首先我使用的是由zippera基于官方Light主题改进而来的Lightum主题,其他主题可能稍有出入。 ##速度优化 参考之前的文章:静态页面优化。然后使用了hexo-qiniu-sync这个项目,将静态的图片以及css、js同步到了七牛云。(PS:主题模板中包含了两个不同版本的jquery,分别在head.ejs与after-footer.ejs中,随便删除一个。)
对于处于body区域的script、style的引用尽可能的加入data-no-instant属性,避免InstantClick重复加载。 ##给instantclick加载进度条加上阴影效果
##加入Swiftype搜索 去Swiftype官网申请代码,然后修改search.ejs文件为:
更具体的指导具体可以参考这篇文章:click here。 ##改进多说评论框 ###添加data-thread-key等属性
###美化多说评论框 进入多说评论的管理后台,将下面代码粘贴到‘设置->自定义CSS’中。
##加入多说最新评论
修改'theme/lightum/_config.yml'文件,在widgets下面添加- recent_comments
项。
在主题文件的'theme/lightum/layout/_widget'目录中新建recent_comments.ejs文件,并放入如下代码:
然后在'/languages/zh-CN.yml'文件添加翻译:recent_comments: 最新评论
最后,原来的评论样式不太符合lightum主题,可以在'/source/css/_partial'里建立一个recent_comment.styl文件:
然后在/theme/lightum/source/css/style中将之包括进来:@import '_partial/recent_comments'
多说的这个插件同样不兼容于instantclick。我们可以在这篇文章的基础上解决:click here:
这样虽然能够解决问题,但是会显示方面又会出现点小问题。可以加入下面css修复:
修改'/layout/_partical/article.ejs'文件
在'\source\css_partial\article.styl'文件后添加:
这样,我们就能在写文章的时候添加toc: true
来启动文章导航功能。
###扩展:浮动式导航
实现当页面滑动到下方时将文章导航浮动到屏幕右侧。
在'\layout_partial\'里新建文件:float_nav.ejs
在'layout/_partial/article.ejs'中添加对其的引用:
添加css样式:
###添加"返回顶部"
与上一节相似,在'layout/_widget/'中添加totop.ejs
文件:
在'lightum/_config.yml'中启用该挂件:
添加css样式:
##参考