hexo优化攻略

image.png

写在前面

这个攻略主要是给有一定diy能力的hexo博主。
一些细节的攻略可以参考如下文章：
hexo 基础配置优化

插件进阶

静态代码压缩

文章比较长的情况下网页往往会显示地较慢。因此，需要对静态代码进行压缩，以提高网站的响应速度。

npm install hexo-all-minifier --save

在hexo根目录下的
_config.yml中配置:

# 代码压缩 github.com/chenzhutian/hexo-all-minifier
all_minifier: true

html_minifier:
  enable: true
  ignore_error: false
  exclude:
  
css_minifier:
  enable: true
  exclude: 
    - '*.min.css'

js_minifier:
  enable: true
  mangle: true
  output:
  compress:
  exclude: 
    - '*.min.js'

image_minifier: 
  enable: false # 图片不压缩
  interlaced: false
  multipass: false
  optimizationLevel: 2
  pngquant: false
  progressive: false

文章加密

插件安装

npm install hexo-encrypt --save

在项目_config.yml中声名默认密码

#该密码为全局默认密码
encrypt: 
  password: 你的密码

在文章头加入密码配置

encrypt: true
enc_pwd: 你的文章独立密码

在根目录的package.json中追加配置，记得补全“,”

 "hexo-encrypt": "^0.2.0"

最终效果

截图

网站顶部进度条

在{hexo-path}/themes/next/layout/_partials/head/head.swig中顶部加入如下代码

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
<style>
.pace .pace-progress {
    background: #f6a427; /*进度条颜色*/
    height: 3px;
}
.pace .pace-progress-inner {
     box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
    border-top-color: #1E92FB;    /*上边框颜色*/
    border-left-color: #1E92FB;    /*左边框颜色*/
}
</style>

效果图