【hexo】基础功能优化

发表于 更新于 分类于 阅读次数： 本文字数： 9.3k 阅读时长 ≈ 8 分钟

批处理 -- 懒人必备

为了简化日常工作，我们来写几个常用的批处理。

首先，我们在 工程目录 下新建一个文件夹 cmd，并在此文件夹下新建以下三个文件。

1
2
3
4
5
6
7
8
9
10
# git_push.bat
@echo off
cd..
set /p var=请输入提交日志信息:

git add .
git commit -m "%var%"
git push origin master

pause
1
2
3
4
5
6
7
# hexo_d.bat
@echo off
cd..
echo 开始提交
hexo clean && hexo g -d

pause
1
2
3
4
5
6
hexo_s.bat
@echo off
cd ..
hexo s

pause

双击运行 git_push.bat 即可将工程文件提交到github上。

双击运行 hexo_d.bat 即可重新部署网页源文件。

双击运行 hexo_s.bat 即可打开本地hexo服务，运行 localhost:4000 显示主页。

博文

支持图片

第一步，我们打开 全局配置文件，找到 post_asset_folder 字段。

1
post_asset_folder: true

这样每次新建一个博文时，都会新建一个同名的文件夹，我们把需要用到的图片全部放在这个同名文件夹下。

第二步，安装插件以支持从同名文件夹下引用图片。在 工程目录下，执行以下代码。

1
$ npm install hexo-asset-image --save

最后，当我们需要引用图片的时候，只需要像 markdown 语法一样使用即可

1
![xxx](文件夹名\pic_name.png)

支持 MathJax 数学公式

卸载旧的渲染器 marked 并安装新的 kramed。在 工程目录 下执行以如下命令。

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

打开 工程目录\node_modules\kramed\lib\rules 文件夹下的 inline.js 文件，修改如下。

1
2
3
4
5
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,

//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

打开 主题配置文件，找到 mathjax 字段

1
2
3
mathjax:
	enable: true
	per_page: true

访问量统计

使用busuanzi添加全局统计

打开 主题配置文件，找到 busuanzi_count 字段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
busuanzi_count:
	enable: true

	site_uv: true
	site_uv_header: <i class="fa fa-user"></i> 您是第 
	site_uv_footer: 个访客

	site_pv: true
	site_pv_header: <i class="fa fa-eye"></i> 总访问量
	site_pv_footer:

	page_pv: false
	page_pv_header: <i class="fa fa-eye"></i> 阅读次数
	page_pv_footer:

此时底部的全局统计信息完成。

使用LeanCloud添加文章统计

首先注册 LeanCloud。然后新建一个应用，名字随便填。在新建的应用下新建一个类，名字必须为 Counter。ACL权限 选择无限制。

选择 设置，在 安全中心 添加 Web安全域名。

打开 主题配置文件，找到 leancloud_visitors 字段。

1
2
3
4
leancloud_visitors:
	enable: true
	app_id: your_app_id
	app_key: your_app_key

其中 app_id 和 app_key 在 LeanCloud 网站设置里的 应用Key 里面。此时每个文章的访问次数统计信息完成。

字数统计

安装字数统计插件。

1
$ npm install hexo-wordcount --save

打开 主题配置文件，找到 post_wordcount 字段。

1
2
3
4
5
6
post_wordcount:
	item_text: true
	wordcount: true		# 文章字数
	min2read: true		# 文章阅读时间
	totalcount: true	# 总字数
	separated_meta: true

打开 工程目录\themes\next\layout\_macro 文件夹下的 post.swig 文件，找到如下字段，在其后加上 字 和 分钟。

1
2
3
4
5
6
7
<span title="{{ __('post.wordcount') }}">
	{{ wordcount(post.content) }} 字
</span>

<span title="{{ __('post.min2read') }}">
  {{ min2read(post.content) }} 分钟
</span>

打开 工程目录\themes\next\languages 文件夹下的 zh-Hans.yml 文件，找到 totalcount 字段。

1
totalcount: 总字数

评论系统

打开 主题配置文件，找到 valine 字段。

1
2
3
4
5
6
7
8
9
10
valine:
	enable: true
	appid: your_app_id 
	appkey: your_app_key
	notify: false			# mail notifier ，https://github.com/xCss/Valine/wiki
	verify: false			# Verification code
	placeholder: mua~~~		# comment box placeholder
	avatar: mm			# gravatar style
	guest_info: nick,mail,link	# custom comment header
	pageSize: 5			# pagination size

注意在此之前需要配置 LeanCloud，可以参考前面配置访问量时的流程。

下面去掉最后的两行 powered by valine，打开 工程目录themes\next\source\css\_custom 文件夹下的 custom.styl，添加如下代码。

1
2
// 去掉 valine 最后两行信息
.info { display: none; }

如果想要禁用某篇博文的评论功能，只需要在文章头添加如下一行即可。

1
comments: false

我们现在需要禁用 标签 和 分类 页面的评论功能。所以要分别打开 工程目录\source\tags\index.md 和 工程目录\source\categories\index.md， 添加上面那句话。

加密访问

打开 工程目录\themes\next\layout\_partials\head.swig，在 script 后面新加一个 script。

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
	(function () {
		if ('{{ page.password }}') {
			if (prompt('请输入文章密码') !== '{{ page.password }}') {
				alert('密码错误！');
				if (history.length === 1) {
					location.replace("http://xxxxxxx.xxx");	// 这里替换成你的首页
				} 
				else { history.back(); }
			}
		}
	})();
</script>

在写文章的时候，只要在文章头加上 password 字段即可。

1
password: xxx

版权信息

打开 主题配置文件，找到 post_copyright 字段。

1
2
3
4
post_copyright:
	enable: true
	license: CC BY-NC-SA 3.0
	license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

版权信息文本可以在 工程目录\themes\next\languages\zh-Hans.yml 里修改。

博文压缩

安装 gulp 插件。

1
2
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp-imagemin gulp --save

在 工程目录 下新建 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
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(['./public/**/*.png'，'./public/**/*.svg'，'./public/**/*.gif'，'./public/**/*.gif'])
	// 2. 压缩图片
	.pipe(imagemin({ progressive: true }))
	// 3. 另存图片
	.pipe(gulp.dest('./public'))
});

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

以后博客的部署流程变为如下。

1
2
3
4
$ hexo clean	# 清理
$ hexo g	# 生成
$ gulp build	# 压缩
$ hexo d	# 部署

同时可修改 工程目录\cmd\hexo_d.bat 文件。

1
2
3
4
5
6
@echo off
cd..
echo 开始提交
hexo clean && hexo g && gulp build && hexo d

pause

注意如果 gulp 出错的话，可能是因为对 html 压缩时有问题，只能不压缩 html 了。

博文置顶

打开 工程目录\node_modules\hexo-generator-index\lib\generator.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
'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
	var config = this.config;
	var posts = locals.posts.sort(config.index_generator.order_by);
  
	posts.data = posts.data.sort(function(a, b) {
		if(a.top && b.top) { 
			// 若top值一样则按照文章日期降序排
			if(a.top == b.top) return b.date - a.date;	
			else return b.top - a.top;			// 否则按照top值降序排
		} // 两篇文章top都有定义
		else if(a.top && !b.top) { return -1; }	// 只有一篇文章top有定义，那么将有top的排在前面
		else if(!a.top && b.top) { return 1; }
		else return b.date - a.date; // 都没定义按照文章日期降序排
	});

	var paginationDir = config.pagination_dir || 'page';
	var path = config.index_generator.path || '';

	return pagination(path, posts, {
		perPage: config.index_generator.per_page,
		layout: ['index', 'archive'],
		format: paginationDir + '/%d/',
		data: {
			__index: true
		}
	});
};

以后我们写文章想置顶，只需要在文章头添加 top 即可。top 值越大，文章越靠前。

1
top: 999

另外，我们还可以给置顶的文章增加置顶标签。

打开 工程目录\themes\next\layout\_macro\post.swig，找到 post-meta" 字段，增加如下内容。

1
2
3
4
5
{% if post.top %}
	<i class="fa fa-thumb-tack"></i>
	<font color=7D26CD>置顶</font>
	<span class="post-meta-divider">|</span>
{% endif %}

RSS

安装 feed 插件。

1
$ npm install hexo-generator-feed --save

打开 全局配置文件 找到 plugins 字段。

1
2
3
4
5
6
7
plugins:				#插件，例如生成 RSS 和站点地图的
# - hexo-generator-feed			# 很奇怪这里去掉注释就会报错
# - hexo-generator-sitemap
feed:
	type: atom
	path: atom.xml
	limit: 20

打开 主题配置文件 找到 rss: 字段。

1
rss: /atom.xml

重新 generator 一下，发现 public 目录下有 atom.xml 文件生成即可。

侧栏友链

社交链接

打开 主题配置文件 找到 social 字段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
social:
	github: https://github.com/your_git_name || github
	csdn: https://blog.csdn.net/your_csdn_name || crosshairs
	#E-Mail: mailto:yourname@gmail.com || envelope
	#Google: https://plus.google.com/yourname || google
	#Twitter: https://twitter.com/yourname || twitter
	#FB Page: https://www.facebook.com/yourname || facebook
	#VK Group: https://vk.com/yourname || vk
	#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
	#YouTube: https://youtube.com/yourname || youtube
	#Instagram: https://instagram.com/yourname || instagram
	#Skype: skype:yourname?call|chat || skype

social_icons:
	enable: true
	icons_only: false
	transition: false

打开 工程目录\themes\next\source\css\_custom\custom.styl，添加如下代码。

1
2
3
4
5
// 社交链接字体大小
.links-of-author a { 
	font-size: 16px; 
	text-align: center;
}

友链

打开 主题配置文件 找到 links 字段。

1
2
3
4
5
6
7
links_icon: link
links_title: 友情链接
links_layout: block
#links_layout: inline
links:
	acdreamers的博客: https://blog.csdn.net/acdreamers
	S_Black学长的博客: https://blackwaters.github.io/

打开 工程目录\themes\next\source\css\_custom\custom.styl，添加如下代码。

1
2
3
4
5
6
// 友情链接样式
.links-of-blogroll-title { display: none; }		# 不显示友情链接字样
.links-of-blogroll {
	font-size: 16px;
	text-align: center;
}

添加 README.md

在 工程目录\source 文件夹下新建 README.md 文件，打开 工程配置文件，找到 skip_render 字段。

1
skip_render: README.md

搜索功能

安装 search 插件。

1
2
$ npm install hexo-generator-search --save
$ npm install hexo-generator-searchdb --save

打开 工程配置文件 添加以下代码。

1
2
3
4
5
6
# Local_search
search:
	path: search.xml
	field: post
	format: html
	limit: 10000

打开 主题配置文件 找到 local_search 字段。

1
2
3
4
5
6
7
local_search:
	enable: true
	# if auto，trigger search by changing input
	# if manual，trigger search by pressing enter key or search button
	trigger: auto
	# show top n results per article，show all results by setting to -1
	top_n_per_article: 1

文章地址优化

如果我们的文章是中文的话，可能地址栏里会出现中文。但是有时候当我们复制到其他地方的时候，由于编码格式的改变，这些中文就变成了乱码。所以要想很好地解决这个问题，就必须借助一下外部力量。我们要多安装一个插件 hexo-abbrlink。

1
$ npm install hexo-abbrlink --save

打开 工程配置文件，找到 permalink 字段。

1
2
3
4
5
6
# permalink: post/:title.html #文章的链接格式
# permalink_defaults:
permalink: post/:abbrlink.html
abbrlink:
	alg: crc32	# 算法：crc16(default) and crc32
	rep: hex	# 进制：dec(default) and hex

tips

保存为本地html文件时防止添加两次hljs，需要修改blog\themes\next\source\js\utils.js如下。

1
2
3
4
if (!name.startsWith("hljs-"))
{
    span.classList.replace(name, `hljs-${name}`);
}