Typecho主题开发

前言

这是一个基于Typecho开发的主题模板,风格就是现在的界面。其中部分风格(样式)采用了梦幻辰风,友人C,QQ爹等博客或者网站。这个主题在chrome上显示正常,如果在你的浏览器上显示不正常请告诉我,主题可能对IE浏览器不太友好,因为用到了一些IE不支持的功能,即使是IE11也一样(例如ES6语法、position:sticky等),不过我也不打算兼容IE。

开源库

  • UI库:Bootstrap V4
  • Popper.js:用做消息提示
  • PJAX:一个JQuery的插件,全称是pushState + ajax
  • nprogressjs:pjax的加载动画
  • prismjs:文章代码高亮插件
  • font-awesome:字体图标
  • 当然还有必不可少的jquery
  • Scrollspy:目录滚动监听

功能

功能完成度
网站主体样式已完成(2019.01.27)
代码高亮已完成(2019.01.27)
文章目录已完成(2019.01.27)
每日一句已完成(2019.01.27)
全站pjax未完成(评论部分)
自定义页面模板待实现
友链功能待实现
后台自定义设置待实现
归档待实现
书单、歌单页面待实现
音乐播放待实现

踩的坑

目录监听

  1. Scrollspy监听非body标签时必须写标签高度。
  2. 设置data-offset偏移值时不易过大,不然会导致目录的active无法正确的响应到元素上。
  3. 目前完成由js实现,实现过程为:首先给文章h标签添加相应的id,然后通过jq动态创建目录一次性通过.append添加出来,因为目录为树形结构,而目录是用过append一次性添加,这就会导致需要特别的注意ol和li标签的闭合时机,最后我是使用的这个办法实现的目录,但是我相信有更好逻辑性更好的方法可以实现,但是我的数据结构的自学没到家,这个问题可能会在以后进行优化。

添加代码行号

在使用prismjs的显示行号插件时,需要在dom加载完成之前运行,它无法在dom加载完成后进行添加。

pjax导致的问题

所有的事件监听、所有的函数和方法在pjax后都会失效,这是pjax的特性,为了解决这个问题:

$(document).on('pjax:end',   function() { 
    //这里写上所有需要重新加载函数
});

EditorMD的前台解析功能失效,解决办法是使用Parsedown插件来接管mrakdown的解析

需要优化的内容

  • spacing间隔:在写了很多的css后发现bootstrap自带了spacing间隔功能,大部分的padding和margin都可以使用class类实现。
  • 定位:一些地方使用了传统的布局方式,一些地方使用了Flex弹性布局,尽量全部改为Flex弹性布局。
  • 提示冒泡(Tooltip):Popper.js实现的功能,如果在鼠标放在链接上点击,这时鼠标没有移开会导致提示信息在pjax后依然显示,现在的解决办法是给多余出来的提示信息添加display:none 这样dom树虽然不会加载,但是内存中却存在。
  • 某些样式比较难看,但是我又想不到更好的风格,可能下次遇见好看的可以"抄"过来。
  • markdown解析 css美化(已完成)

更新日志

2019.02.03:修复评论第一失效的问题,但是还是没有添加ajax评论
2019.01.30:修复手机页面评论时输入框显示为一行的问题。

1 评论

  1. 可乐加冰 2023年08月20日 回复
    我正在开发一个动态内容博客系统,可以使用你的主题作为我系统的主题吗