Hexo博客推荐安装的插件
SEO相关
百度主动提交连接（hexo-baidu-url-submit）
地址：https://github.com/huiwang/hexo-baidu-url-submit
首先，在Hexo根目录下，安装本插件：
1 | npm install hexo-baidu-url-submit --save |
然后，同样在根目录下，把以下内容配置到_config.yml文件中:
1 | baidu_url_submit: |
其次，记得查看_config.ym文件中url的值， 必须包含是百度站长平台注册的域名（一般有www）， 比如:
1 | # URL |
最后加入新的deployer
1 | deploy: |
实现原理
推送功能的实现，分为两部分：
- 新链接的产生，
hexo generate会产生一个文本文件，里面包含最新的链接 - 新链接的提交，
hexo deploy会从上述文件中读取链接，提交至百度搜索引擎
每天定时提交
关于这部分，我在网上没有找到合适的插件，于是利用Leancloud开发了一款扩展工具。具体方法请参照这篇文章
文章永久地址
地址:https://github.com/rozbo/hexo-abbrlink
安装插件
1 | npm install hexo-abbrlink --save |
修改根目录下的配置文件
1 | permalink: posts/:abbrlink.html |
在根目录添加如下配置
1 | abbrlink: |
生成的链接示例
1 | crc16 & hex |
外链跳转插件
地址：https://github.com/hvnobug/hexo-external-link
hexo-external-link是一个跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。 比如 设置
target=’_blank’, rel=’external nofollow noopener noreferrer’告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html;
1 | ## npm 安装 |
然后在站点根目录的设置中设置如下
1 | hexo_external_link: |
- enable - 是否开启
hexo_external_link插件 - 默认 false - enable_base64_encode - 是否对跳转
url使用base64编码- 默认 fasle - url_param_name - url参数名,在跳转到外链传递给
html_file_name的参数名 - 默认 ‘u’ - html_file_name - 跳转到外链的页面文件路径 - 默认 ‘go.html’
- target_blank - 是否为外链的
a标签添加target='_blank'- 默认 true - link_rel - 设置外链的
a标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’ - domain - 如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
- safety_chain - go.html 为了防止外链盗用 对域名进行的判断 - 默认 false
中文转拼音
地址https://github.com/viko16/hexo-permalink-pinyin
1 | npm i hexo-permalink-pinyin --save |
然后在站点根目录设置
1 | permalink_pinyin: |
加载优化
图片懒加载
地址：https://github.com/Troy-Yang/hexo-lazyload-image
安装
1 | npm install hexo-lazyload-image --save |
之后在站点配置文件下添加下面的代码：
1 | lazyload: |
如果在markdown或html中指定img标记的属性，也可以禁用延迟进程
1 | <img no-lazy src="abc.png" /> |
这里推荐给大家机长图片最为候选哦！。
安装
1 | npm install hexo-lazyload-image --save |
之后在站点配置文件下添加下面的代码：
1 | lazyload: |
如果在markdown或html中指定img标记的属性，也可以禁用延迟进程
1 | <img no-lazy src="abc.png" /> |
https://ws1.sinaimg.cn/large/832afe33ly1gbh4a43va4g209g09gmy4.gif
https://ws1.sinaimg.cn/large/832afe33ly1gbh4a49p3xg20r00lc776.gif
https://ws1.sinaimg.cn/large/832afe33ly1gbh4a44p6xg20b40b4weq.gif
https://ws1.sinaimg.cn/large/832afe33ly1gbh4a444wwg20ee0d4gmz.gif
https://ws1.sinaimg.cn/large/832afe33ly1gbh4a44yb4g20m80godif.gif
代码压缩
代码压缩 这里有两种方式第一种 通过gulp代码压缩方式
进入站点根目录下依次执行下面的命令：
1
2
3
4
5
6# 全局安装gulp模块
npm install gulp -g
# 安装各种小功能模块 执行这步的时候，可能会提示权限的问题，最好以管理员模式执行
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save在Hexo根目录新建文件
gulp.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象
// 清除public文件夹
gulp.task("clean", function () {
return del(["public/**/*"]);
});
// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
return hexo.init().then(function () {
return hexo
.call("generate", {
watch: false
})
.then(function () {
return hexo.exit();
})
.catch(function (err) {
return hexo.exit(err);
});
});
});
// 启动Hexo服务器
gulp.task("server", function () {
return hexo
.init()
.then(function () {
return hexo.call("server", {});
})
.catch(function (err) {
console.log(err);
});
});
// 部署到服务器
gulp.task("deploy", function () {
return hexo.init().then(function () {
return hexo
.call("deploy", {
watch: false
})
.then(function () {
return hexo.exit();
})
.catch(function (err) {
return hexo.exit(err);
});
});
});
// 压缩public目录下的js文件
gulp.task("compressJs", function () {
return gulp
.src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
.pipe(plumber())
.pipe(
gulpBabel({
presets: [es2015Preset] // es5检查机制
})
)
.pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
.pipe(gulp.dest("./public")); //输出到目标目录
});
// 压缩public目录下的css文件
gulp.task("compressCss", function () {
var option = {
rebase: false,
//advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
//keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
//keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
};
return gulp
.src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
.pipe(plumber())
.pipe(cleancss(option))
.pipe(gulp.dest("./public"));
});
// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
var cleanOptions = {
protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
};
var minOption = {
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
removeComments: true, //清除HTML注释
minifyJS: true, //压缩页面JS
minifyCSS: true, //压缩页面CSS
minifyURLs: true //替换页面URL
};
return gulp
.src("./public/**/*.html")
.pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
.pipe(plumber())
.pipe(htmlclean(cleanOptions))
.pipe(htmlmin(minOption))
.pipe(gulp.dest("./public"));
});
// 压缩 public/medias 目录内图片
gulp.task("compressImage", function () {
var option = {
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
};
return gulp
.src("./public/medias/**/*.*")
.pipe(gulpif(!isScriptAll, changed("./public/medias")))
.pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
.pipe(plumber())
.pipe(imagemin(option))
.pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
"build",
gulp.series(
"clean",
"generate",
"compressHtml",
"compressCss",
"compressJs",
"compressImage",
gulp.parallel("deploy")
)
);
// 默认任务
gulp.task(
"default",
gulp.series(
"clean",
"generate",
gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
)
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数以后的执行方式有两种：
- 直接在Hexo根目录执行
gulp或者gulp default，这个命令相当于hexo cl&&hexo g并且再把代码和图片压缩。 - 在Hexo根目录执行
gulp build，这个命令与第1种相比是：在最后又加了个hexo d，等于说生成、压缩文件后又帮你自动部署了。
值得注意的是：这个加入了图片压缩，如果不想用图片压缩可以把第154行的
"compressImage",和第165行的,"compressImage"去掉即可- 直接在Hexo根目录执行
第二种方法通过插件完成，也是我目前使用的方法
地址：https://github.com/rozbo/hexo-neat
但是这个插件是有Bug的：
- 压缩 md 文件会使 markdown 语法的代码块消失
- 会删除全角空格
Hexo根目录执行安装代码：
1 | npm install hexo-neat --save |
在Hexo配置文件_config.yml 末尾加入以下配置(此配置仅针对Matery主题)：
1 | #hexo-neat 优化提速插件（去掉HTML、css、js的blank字符） |
当然了 ，如果你是其他主题可以使用网上的通用配置，但我没有尝试过
1 | neat_enable: true |
扩展优化
邮件通知
地址：https://github.com/zhaojun1998/Valine-Admin
作者博客：http://www.zhaojun.im/hexo-valine-admin/
相关配置操作请查看作者博客。这里只说说自定义环境变量及使用阿里云邮件推送
SITE_NAME: 网站名称。SITE_URL: 网站地址, 最后不要加/。SMTP_USER: SMTP 服务用户名，一般为邮箱地址。SMTP_PASS: SMTP 密码，一般为授权码，而不是邮箱的登陆密码，请自行查询对应邮件服务商的获取方式SMTP_SERVICE: 邮件服务提供商，支持QQ、163、126、Gmail、"Yahoo"、......，全部支持请参考 : Nodemailer Supported services。如
SMTP_SERVICE中没有你使用的邮件服务提供商, 也可以进行自定义。参数配置如下:
SMTP_HOST: 邮件服务提供商 SMTP 地址，如 qq :smtp.qq.com，此项需要自行查询或询问其服务商。SMTP_PORT: 邮件服务提供商 SMTP 端口, 此项需要自行查询或询问其服务商。SMTP_SECURE: 是否启用加密, 默认为true，一般不需要设置，如有特殊请自行配置。 此项需要自行查询或询问其服务商。
SENDER_NAME: 寄件人名称。TEMPLATE_NAME：邮件模板，目前内置了两款主题，分别为default与rainbow
注: 配置自定义邮件服务器的话，请不要同时配置 SMTP_SERVICE。当 SMTP_SERVICE 未配置时才会启用自定义邮件服务
如何使用阿里云邮件推送
首先在阿里云创建好发信地址 类型选择：触发邮件
发信地址随便写，然后设置好SMTP密码。
来到我们的Leancloud
按照框框圈的设置好自己的配置即可
1 | SMTP_USER:刚刚创建的发信地址 |
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小康博客！
打赏
![wechat]()
wechat![alipay]()
alipay
评论
TwikooWaline
