Skip to content

Kevin's Home

Hexo折腾笔记(二)博客优化与定制

美化, html1 min read

首先我使用的是由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:

  • 将多说的公共JS放入head或加入'data-no-instant'属性放入body中,并删除recent.ejs与comment.ejs中重复的JS。
  • 修改change事件中的代码为:

这样虽然能够解决问题,但是会显示方面又会出现点小问题。可以加入下面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样式:

##参考