Hexo 博客常用的优化手段

前言

Hexo 博客因为它独特的快速写作办法,一旦配置好相关的项,就能够达到一直使用这套配置,很长一段时间内都不需要更新的目的。折腾就对了。

相关版本号和依赖项

Hexo 版本 : 3.7.0 依赖项:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    "gulp": "^3.9.1",
​ "gulp-clean-css": "^4.0.0",
​ "gulp-htmlclean": "^2.7.22",
​ "gulp-htmlmin": "^5.0.1",
​ "gulp-imagemin": "^5.0.3",
​ "gulp-minify-css": "^1.2.4",
​ "gulp-uglify": "^3.0.1",
​ "hexo-abbrlink": "^2.0.5",
​ "hexo-addlink": "^1.0.4",
​ "hexo-all-minifier": "^0.5.2",
​ "hexo-deployer-rsync": "^0.1.3",
​ "hexo-generator-archive": "^0.1.5",
​ "hexo-generator-category": "^0.1.3",
​ "hexo-generator-feed": "^1.2.2",
​ "hexo-generator-index": "^0.2.1",
​ "hexo-generator-tag": "^0.2.0",
​ "hexo-renderer-ejs": "^0.3.1",
​ "hexo-renderer-kramed": "^0.1.4",
​ "hexo-renderer-marked": "^0.3.2",
​ "hexo-renderer-mathjax": "^0.6.0",
​ "hexo-renderer-stylus": "^0.3.3",
​ "hexo-server": "^0.3.1"

所以现在我们就来说说在 Hexo 博客中常见的优化项。依赖项和 Hexo 版本都在上边了,在配置的时候记得参考当前博客的时间和当前配置项

首先是配置固定链接。在你博客通过Hexo init后,已经已经更换完自己的主题以后。当你上传到云端,例如 github pages 或者你的服务器中的时候,为了更好的 seo 效果,你应该为每个独立的博客页面构建一个固定链接。

添加永久链接

因此你需要这个插件:Hexo-abbrlink。它的安装很简单,只需要在你的博客根目录下键入npm install hexo-abbrlink --save即可。然后在你的_config.yml将原来的

_config.yml
1
2
permalink: ***********
permalink_defaults:

改成以下内容:

_config.yml
1
2
3
4
5
6
7
# abbrlink config
abbrlink:
alg: crc16 #support crc16(default) and crc32
rep: hex #support dec(default) and hex

permalink: p/:abbrlink.html
permalink_defaults:

即可。当然,也可以每次手动配置。

例如:

post.md
1
2
3
4
5
6
---
title: a
category: b
date: 201x/0x/0x
abbrlink: '1'
---

添加版权页

然后你会想要做以下的内容,例如在文章的最后加上版权页。那么你需要这个插件:Hexo-addlink,同样地,你需要在博客的根目录下输入命令安装这个插件。然后在你的配置项中添加以下内容即可:

_config.yml
1
2
3
4
## Banquan
addlink:
before_text: __本文作者__:你的名字<br />__本文地址__:
after_text: <br />__版权声明__:本博客所有文章除特别声明外,均采用 [CC BY-NC-SA 3.0 CN](http://creativecommons.org/licenses/by-nc-sa/3.0/cn/) 许可协议。转载请注明出处!即可。

即可。

可选项:更换渲染引擎

因为原有的 marked 引擎对 mathjax 的渲染效果不好,十分麻烦。需要去找一个新的渲染引擎,在卸载和安装的时候有可能会报错。原因不明。但是这是可行的办法。

注意这样做的前提是你需要更好的 Mathjax 支持,否则少折腾

第一步

首先在根目录下输入:

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

然后,更改/node_modules/hexo-renderer-kramed/lib/renderer.js,更改:

renderer.js
1
2
3
4
5
// Change inline math rule
function formatText(text) {
// Fit kramed's rule: $$ + \1 + $$
return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
}

为:

renderer.js
1
2
3
4
// Change inline math rule
function formatText(text) {
return text;
}

第二步: 停止使用 hexo-math

首先,如果你已经安装 hexo-math, 请卸载它:

1
npm uninstall hexo-math --save

然后安装 hexo-renderer-mathjax 包:

1
npm install hexo-renderer-mathjax --save

第三步: 更新 Mathjax 的 CDN 链接

首先,打开/node_modules/hexo-renderer-mathjax/mathjax.html

然后,把<script>更改为:

mathjax.html
1
2
3

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>

第四步: 更改默认转义规则

因为 hexo 默认的转义规则会将一些字符进行转义,比如 _ 转为 <em>, 所以我们需要对默认的规则进行修改.
首先, 打开<path-to-your-project/node_modules/kramed/lib/rules/inline.js,

然后,把:

inline.js
1
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
更改为:
inline.js
1
escape: /^\\([`*\[\]()# +\-.!_>])/,

inline.js
1
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
更改为:
inline.js
1
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

第五步: 开启mathjax

在主题 _config.yml 中开启 Mathjax, 找到 mathjax 字段添加如下代码:

_config.yml
1
2
mathjax:
enable: true

这一步可选,在博客中开启 Mathjax,, 添加以下内容:

post.md
1
2
3
4
5
6
---
title: a
category: b
date: 201x/0x/0x
mathjax: true
---

可选项:添加你的 rss

在根目录下执行npm install hexo-generator-feed,然后在你的_config.yml中添加以下配置:

_config.yml
1
2
3
4
5
6
7
8
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit:
content_limit_delim: ' '

即可。

优化

因为在别人访问你的博客的时候,最重要的就是速度,还有就是访问体验。所以推荐以下两个方法:

插件

使用hexo-all-minifier这个插件。安装好这个插件以后,在你的配置项中添加:

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# Minify things
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: true
interlaced: false
multipass: false
optimizationLevel: 2
pngquant: false
progressive: false

即可。

Gulp

首先先全局安装 gulp。

1
npm install gulp -g

在根目录下输入

1
npm install gulp-minify-css gulp-babel gulp-uglify gulp-htmlmin gulp-htmlclean --save-dev

然后安装 babel 的依赖项

1
npm install --save-dev @babel/core @babel/preset-env

接着在文件的根目录下创建gulpfile.js

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')

// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
​ .pipe(minifycss())
​ .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
​ .pipe(htmlclean())
​ .pipe(htmlmin({
​ removeComments: true,
​ minifyJS: true,
​ minifyCSS: true,
​ minifyURLs: true,
​ }))
​ .pipe(gulp.dest('./public'))
});

// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
​ .pipe(uglify())
​ .pipe(gulp.dest('./public'));
});

// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
// 1. 找到图片
​ gulp.src('./photos/*.*')
// 2. 压缩图片
​ .pipe(imagemin({
​ progressive: true
​ }))
// 3. 另存图片
​ .pipe(gulp.dest('dist/images'))
});

// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js','images'
]);

即可。

注意

因为以上两种方法同时使用会导致冲突,所以选择其中一种即可。

CDN

在使用的过程中,使用合适的 CDN 很重要。这方面就不展开来说了。

参考文章

如何在 hexo 中支持 Mathjax? - 简书

推荐两个 Hexo 插件:短地址与封面模式 - 简书

利用 Gulp 来压缩你的 Hexo 博客 | LEAFER x LAB

为hexo博客添加RSS订阅功能 - codingstudy - SegmentFault 思否

用 gulp 优化 Hexo - 掘金

本文作者: Bon
本文地址https://bonxg.com/p/23.html
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 CN 许可协议。转载请注明出处!

# Bon
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×