分享,进步,自足
27/1
2019

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:修复手机页面评论时输入框显示为一行的问题。

添加新评论