前言
这是一个基于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 | 未完成(评论部分) |
自定义页面模板 | 待实现 |
友链功能 | 待实现 |
后台自定义设置 | 待实现 |
归档 | 待实现 |
书单、歌单页面 | 待实现 |
音乐播放 | 待实现 |
踩的坑
目录监听
- Scrollspy监听非body标签时必须写标签高度。
- 设置data-offset偏移值时不易过大,不然会导致目录的active无法正确的响应到元素上。
- 目前完成由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 评论