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

首先我使用的是由zippera基于官方Light主题改进而来的Lightum主题,其他主题可能稍有出入。

速度优化

参考之前的文章:静态页面优化。然后使用了hexo-qiniu-sync这个项目,将静态的图片以及css、js同步到了七牛云。(PS:主题模板中包含了两个不同版本的jquery,分别在head.ejs与after-footer.ejs中,随便删除一个。)

对于处于body区域的script、style的引用尽可能的加入data-no-instant属性,避免InstantClick重复加载。

给instantclick加载进度条加上阴影效果

1
2
3
4
#instantclick-bar{
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.56);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.56);
}

加入Swiftype搜索

Swiftype官网申请代码,然后修改search.ejs文件为:

1
2
3
4
5
<div class="search">
<form>
<input type="search" id="st-search-input" placeholder="<%= __('search') %>">
</form>
</div>

阅读全文

Hexo折腾笔记(一)博客加速以及解决instantclick的兼容问题

首先,Gitcafe的国内速度已经够快了,加不加速其实没多大区别,只不过是闲的蛋疼而已。
Gitcafe无故page不更新,所以又换回了github。

Hexo加速

Hexo加速可以有以下几个方面:

  1. 使用BootCDN并将图片等资源储存至七牛云。可以使用此项目click here
  2. 使用hexo optimize压缩优化HTML、CSS、JS、Image资源。
  3. 使用InstantClick

InstantClick是一款类似于Turbolinks的js库,利用pjax(pushState and Ajax)技术对网站进行优化,能够极大的提高访问速度。

解决InstantClick的兼容问题

InstantClick效果明显,但是副作用也大。加入它之后,原来相处无碍的Fancybox、百度分享、百度统计、 mathJax、多说评论都挂了。下面是我的解决方法:

阅读全文