加速 Hexo 博客

96
reuixiy
2018.05.30 14:39* 字数 213

利用 InstantClick、hexo-service-worker、hexo-filter-optimize 让博客快如闪电 ⚡

先体验:https://yixiuer.github.io/ ,然后操作 :dolphin: ~

InstantClick

介绍请看官网:http://instantclick.io/ ,先下载压缩版的 instantclick.min.js(浏览器右键保存为),再放到~/blog/themes/next/source/js/src/下,然后添加代码:

/* 文件位置:~/blog/themes/next/layout/_layout.swig */
+ <script type="text/javascript" src= "/js/src/instantclick.min.js" data-no-instant></script>
+ <script data-no-instant>InstantClick.init();</script>
</body>
</html>

去除顶部加载条:

/* 文件位置:~/blog/themes/next/source/css/_custom/custom.styl */
#instantclick {
  display: none;
}

可能会有一些问题,比如与 FancyBox、Google Analytics 等等的兼容问题,解决方法自行查看文档或 Google。

Hexo 插件

主要利用两个插件:

  1. hexo-service-worker
  2. hexo-filter-optimize

先在站点文件夹根目录安装:

npm install hexo-service-worker hexo-filter-optimize --save

然后在站点配置文件中配置:

# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  stripPrefix: public
  verbose: true

filter_optimize:
  enable: true
  # remove static resource query string
  #   - like `?v=1.0.0`
  remove_query_string: true
  # remove the surrounding comments in each of the bundled files
  remove_comments: true
  css:
    enable: true
    # bundle loaded css file into the one
    bundle: true
    # use a script block to load css elements dynamically
    delivery: true
    # make specific css content inline into the html page
    #   - only support the full path
    #   - default is ['css/main.css']
    inlines:
    excludes:
  js:
    # bundle loaded js file into the one
    bundle: true
    excludes:
  # set the priority of this plugin,
  # lower means it will be executed first, default is 10
  priority: 12

最后 deploy 到 Github 上查看效果,Enjoy it ! :coffee: ~


原文地址:https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/30/speed-up-hexo.html

日记本
Web note ad 1