本博客采用的是 NexT 主题，以下配置结合 hexo 和 NexT 两方面混合讲解。说明：NexT 7.3 配置文件及其目录也发生了很多变化，并且支持了 Pjax。使得我们可以通过启动数据目录来管理配置，升级新的 release 版本更加平滑
语法转义
特殊符号 {{}} 在 Hexo 内是有特殊含义的语法，在文章中你不能直接使用，需要转义字符来代替
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| ! &
” &
$ &
% &
& &
‘ &
( &
) &
* &
+ &
< &
= &
- &
> &
? &
@ &
[ &
\ &
] &
` &
{ &
| &
} &
|
新建页面
配置 source/_data/next.tml1
2
3
4
5
6
7
8
9
10
|
menu:
home: / || fa fa-home
tags: /tags/ || fa fa-tags
|
自动刷新界面
在写博客时，我们往往需要手动刷新页面才会看到变化，操作很机械且耗时间。使用 hexo-browsersync 可解决，缺点是网络链接不稳定或者没网的情况下，需要等待四五分钟才会刷新，有时也会出现界面空白现象！
1
| npm install hexo-browsersync
|
忽略README文件
配置 hexo _config.yml
置入本地图片
Markdown 置入图片的语法是 ，但该语法没办法置入本地图片！这时需要使用到 hexo-asset-image 插件（注意：1.0.0 版本插入图片时，文章内部的图片可正常显示，在首页时图片显示异常，建议继续使用 hexo 的 asset_img 标签）
1
| npm install hexo-asset-image
|
配置 hexo _config.yml1
2
3
4
|
post_asset_folder: true
|
插入代码文件
插入代码文件需要先在 hexo 的 code_dir 模块处配置路径，这里以插入 source/_data/includecode 文件夹内的代码文件为例：code_dir: _data/includecode/
1
2
| {% include_code css lang:css example.css %}
{% include_code css lang:css from:2 to:3 example.css %}
|
cssview raw1
2
3
4
| .terminal {
text-shadow: 0 0 1px rgba(51, 0, 10, 0.4),
0 0 2px rgba(0, 0, 0, 0.8);
}
|
cssview raw1
2
| text-shadow: 0 0 1px rgba(51, 0, 10, 0.4),
0 0 2px rgba(0, 0, 0, 0.8);
|
其它标签请参考：
文章置顶
手动实现
主要运用到的是 JS 内的 sort 方法。按照如下所示，把方法添加到 node_modules/hexo-generator-index/lib/generator.js 内重启即可
1
2
3
4
5
6
7
8
9
10
11
12
| posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) {
return (a.top == b.top) ? b.date - a.date : b.top - a.top
}
else if(a.top && !b.top) {
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date;
});
|
插件实现
插件实现需要先卸载 hexo-generator-index，然后再安装 hexo-generator-index-pin-top
1
2
| npm uninstall hexo-generator-index
npm install hexo-generator-index-pin-top
|
设置 Front-matter
上述两种方法任选则其一进行修改即可，修改完成后还需要在你需要置顶的文章内，设置 Front-matter 的属性值
1
2
3
| # 置顶单一文章，设置 top: true 即可
# 置顶多篇文章，需要设置 top 的值为数值类型，值越大，文章越靠前
top: 1
|
设置图标
置顶的文章如果没有设置图标的话，看着会有点怪，所以这里也设置下。打开 /themes/next/layout/_macro/ 目录下的 post.swig 文件，在 <div class="post-meta"> 的第一个 <span class="post-time"> 标签下，添加下述代码即可
1
2
3
4
5
6
7
| {% if post.top %}
<span style="color: #555">
<i class="fa fa-thumb-tack"></i>
<span>置顶</span>
</span>
<span class="post-meta-divider">|</span>
{% endif %}
|
本地搜索
hexo-generator-searchdblink1
| npm install hexo-generator-searchdb
|
配置 hexo _config.yml1
2
3
4
5
| search:
path: search.xml
field: post
format: html
limit: 10000
|
配置 source/_data/next.yml1
2
| local_search:
enable: true
|
字数统计及阅读时长
hexo-symbols-count-timelink1
| npm install hexo-symbols-count-time
|
配置 hexo _config.yml1
2
3
4
5
| symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
|
配置 source/_data/next.yml1
2
3
4
5
6
| symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 2
wpm: 300
|
访问量统计
配置 source/_data/next.yml1
2
3
4
5
6
7
8
9
|
busuanzi_count:
enable: true
total_visitors: false
total_visitors_icon: user
total_views: false
total_views_icon: eye
post_views: true
post_views_icon: eye
|
配置固定链接
hexo-abbrlinklink1
| npm install hexo-abbrlink
|
配置 hexo _config.yml1
2
3
4
5
| permalink: :abbrlink/
permalink_defaults:
abbrlink:
alg: crc32
rep: dec
|
文章加密
hexo-blog-encryptlink1
| npm install hexo-blog-encrypt
|
在文章顶部 Front-matter 处设置参数
1
2
3
4
5
6
7
| ---
title: ****
...
password: ****
abstract: 文章已加密，查看请联系博主！
message: 请输入密码
---
|
添加Gitalk留言板
1.在 Github 上建个空白仓库专门用来存放留言，注意必须仓库是公开的
2.在 Setting > Developer setting > OAuth Apps > New OAuth App 处，配置 Github OAuth 第三方验证
1.Application name 项目名称随意，只要你看到名称知道它是干什么的就可以
2.Application description 项目描述
3.Homepage URL 和 Authorization callback URL 要填写博客的地址，例如：https://qlzhu.github.io/blog/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| gitalk:
enable: true
github_id: '**'
repo: blog-comments
client_id: a***047*60**e
client_secret: 4f***2c**a8*cd4**d8*
admin_user: '**'
distraction_free_mode: false
language: zh-CN
|
更改server预览端口
https://hexo.io/zh-cn/docs/server