Hexo框架(三)：Next主题配置及美化
Hexo 框架允许我们更换自己喜欢的主题，用于构件不同风格的主题，因为我个人比较喜欢简洁风，所以我选择了 Next 主题。Next 主题也是特别常用的一款主题，如果你也和我一样喜欢简洁的风格，可以对我的配置进行参考。
在正式开始配置之前，我们需要明确以下东西 : 站点配置文件 `主题配置文件
在 Hexo 中有两份主要的配置文件，其名称都是
_config.yml。站点配置文件，位于站点根目录下，用于网站的基础配置主题配置文件，位于thems目录下，用于主题相关的配置不同的主题会有不同的配置文件，
主题配置文件通常由主题作者提供
注意：目前我已经更新至最新版本，目前采用了全新的配置方式，这里的主题配置文件，均指 hexo/source/_data 目录下的 next.yml 文件，你可以点击这里查看：关于博客主题持续更新的问题和我的新配置方式
安装 Next 主题
下载 Next
Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的
themes目录下， 然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。注：我们这里使用社区维护的最新版本。
我们使用 Git，克隆最新版本的方式进行安装，之后的更新我们也可以用
git pull来进行快速更新，而不用再次下载压缩包替换在终端窗口下，定位到 Hexo 站点根目录，在终端中输入：
1 | git clone https://github.com/theme-next/hexo-theme-next themes/next |
启用主题
- 与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开
站点配置文件， 找到theme字段，并将其值更改为next。
1 | # Extensions |
到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。
验证主题
首先使用hexo clean清除缓存，然后使用hexo g 生成文件，然后使用hexo s来运行本地服务。当命令行输出中提示：
1 | INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. |
此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。
当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT 主题。
现在，你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。
Hexo 基础配置
现在我们就正式开始配置，以下内容均为 站点配置文件：
1 | title: #网站的标题 |
1 | url: #网站地址 比如：https://yourname.github.io |
1 | #网站的url格式 |
1 | #自动提交到仓库，可以设置多个仓库 |
1 | #设置主题为next |
Next 主题设置
以下配置主要基于更高版本的 Next7，下面配置项如无特别指明，均为主题配置文件中的配置项，
选择 Scheme
Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持四种 Scheme，他们是：
- scheme: Muse
- scheme: Mist
- scheme: Pisces
- scheme: Gemini
Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有四行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。我个人选择 Gemini。
1 | # Schemes |
设置语言
编辑 站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：
1 | language: zh-CN |
目前 NexT 支持的语言如以下表格所示:
| 语言 | 代码 | 设定示例 |
|---|---|---|
| English | en |
language: en |
| 简体中文 | zh-Hans |
language: zh-CN |
| Français | fr-FR |
language: fr-FR |
| Português | pt |
language: pt or language: pt-BR |
| 繁體中文 | zh-hk 或者 zh-tw |
language: zh-hk |
| Русский язык | ru |
language: ru |
| Deutsch | de |
language: de |
| 日本語 | ja |
language: ja |
| Indonesian | id |
language: id |
| Korean | ko |
language: ko |
设置菜单
菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。
编辑 主题配置文件，修改以下内容：
- 设定菜单内容，对应的字段是
menu。 菜单内容的设置格式是：item name: link。其中item name是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。
设置菜单项的显示中文文本
打开 themes/next/languages/zh-Hans.yml 文件,搜索 menu 关键字，修改对应中文或者新增。
最新版本此方法已经修改：你可以点击 这里 查看其中的第 3.2 节。
1 | menu: |
设定菜单项的文件目录和对应图标
打开 themes/next/_config.yml 文件，搜索 menu 关键字，修改对应图标名称或者新增对应 menu 的图标。各个菜单项通过 # 注释开启或关闭。
1 | menu: |
除了 home， archives , 后面都需要手动创建这个页面
创建菜单项对应文件目录
设定好上面后，我们hexo s启动本地服务器预览，就可以看到网页上出现了对应的文件目录。更改目录的位置即可调整顺序。比如我习惯的：
1 | menu: |
网页显示：
但是，此时我们还没有创建对应的页面，比如点击分类，会报错：Cannot GET /categories/
下面我们就创建上面对应的页面：
在终端窗口下，定位到 Hexo 站点目录下。使用 hexo new page 新建页面:
1 | #分类 |
这时候，站点根目录source文件夹下面新增一个categories文件夹，打开里面的index.md文件。在文档头部添加以下描述,其他页面类似。
1 | --- |
设置头像
打开主题配置文件，搜索关键字Sidebar Avatar 进行定位，将 avatar 的值设置成头像图片的链接地址即可。
1 | # Sidebar Avatar |
头像图片的完整连接地址可以是：
- 完整的互联网地址：例如，https://www.example.com/avatar.jpg
- 站点内的相对地址：例如，假设图片命名为 avatar.jpg，存放在 source/images/ 目录下，则链接地址可以写成 /images/avatar.jpg
侧边栏设置
默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。 可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置， 其二是侧栏显示的时机。
设置侧边栏的位置
修改 sidebar.position 的值，支持的选项有：
- left - 靠左放置
- right - 靠右放置
1 | sidebar: |
设置侧边栏显示的时机
修改 sidebar.display 的值，支持的选项有：
post- 默认行为，在文章页面（拥有目录列表）时显示always- 在所有页面中都显示hide- 在所有页面中都隐藏（可以手动展开）remove- 完全移除
1 | sidebar: |
设置侧边栏社交链接
打开 主题配置文件，搜索关键字social，然后添加社交站点名称与地址即可。
1 | # --------------------------------------------------------------- |
如果要自定义图标或者新增链接，搜索关键字social_icons ，添加社交站点名称（注意大小写）图标，Font Awesome图标地。
友情链接
打开 主题配置文件 ，搜索关键字blog rolls :
1 | # Blog rolls |
提醒版本更新
1 | # Console reminder if new version released. |
缓存
1 | # Allow to cache content generation. |
自动清除无用文件
1 | # Remove unnecessary files after hexo generate. |
不蒜子统计
1 | # Show Views / Visitors of the website / page with busuanzi. |
valine 评论
获取 APP id 和 APP key
- 你可以点击 LeanCloud ，注册登录，进入控制台后点击创建应用。
- 进入刚刚创建的应用，选择
设置》应用Keys，就能看到你的 APP ID 和 APP Key
修改主题配置文件
1 | # Valine |
配置参考：https://valine.js.org/configuration.html
定制
1 | # Define custom file paths. |
修改 valine 及不蒜子样式
source/_data/styles.styl 文件内容：
1 | // 隐藏 valine 的 powered by |
个性网页标题
新建source/_data/footer.swig 文件，添加内容：
1 | {# 搞怪网页标题 #} |
在主题配置文件添加以下内容：
1 | # 搞怪网站标题 |
文章末尾统一添加本文结束分割线
新建 source/_data/post-body-end.swig 文件，添加内容：
1 | {# 本文结束 #} |
修改底部用户图标为跳动的心
1 | # Icon between year and copyright info. |
打开文章末尾的版权信息
1 | # Creative Commons 4.0 International License. |
菜单栏显示分类/标签中的文章数目
1 | menu_settings: |
文章目录的设置
1 | # Table of Contents in the Sidebar |
字数统计与阅读时长
- 在终端中输入命令安装插件
1 | npm install hexo-symbols-count-time |
- 在
站点配置文件添加：
1 | symbols_count_time: |
- 修改
主题配置文件
1 | symbols_count_time: |
修改文章底部标签的样式
1 | # Use icon instead of the symbol # to indicate the tag at the bottom of the post |
SEO 优化
1 | # --------------------------------------------------------------- |
第三方插件
1 | # Math Formulas Render Support |
动态线条背景
- Next7 内置了 2 个动态背景，但我都觉得不太好看，安装对应插件打开即可。
- three:
1 | git clone https://github.com/theme-next/theme-next-three source/lib/three |
1 | # JavaScript 3D library. |
- canvas_ribbon
1 | git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon |
1 | # Canvas-ribbon |
- 我使用的 canvas_nest
在source\_data\footer.swig文件中添加以下代码即可。
1 | <script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script> |
如果你没有配置 第 11 条 ，那一定要记得打开主题配置文件 中的：
1 | custom_file_path: |
点击头像跳转到关于页面
打开 themes\next\layout\_partials\sidebar\site-overview.swig 文件，添加以下的 a 标签。当然这个 about 你也可以改成你想要页面。
1 | <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"> |
点击出现桃心效果
实现效果图：
实现方法：
创建 JS 文件
在在
/themes/next/source/js/src下新建文件clicklove.js，接着把代码拷贝粘贴到clicklove.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!(function (e, t, a) {
function n() {
c(
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
),
o(),
r()
}
function r() {
for (var e = 0; e < d.length; e++)
d[e].alpha <= 0
? (t.body.removeChild(d[e].el), d.splice(e, 1))
: (d[e].y--,
(d[e].scale += 0.004),
(d[e].alpha -= 0.013),
(d[e].el.style.cssText =
'left:' +
d[e].x +
'px;top:' +
d[e].y +
'px;opacity:' +
d[e].alpha +
';transform:scale(' +
d[e].scale +
',' +
d[e].scale +
') rotate(45deg);background:' +
d[e].color +
';z-index:99999'))
requestAnimationFrame(r)
}
function o() {
var t = 'function' == typeof e.onclick && e.onclick
e.onclick = function (e) {
t && t(), i(e)
}
}
function i(e) {
var a = t.createElement('div')
;(a.className = 'heart'),
d.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: s(),
}),
t.body.appendChild(a)
}
function c(e) {
var a = t.createElement('style')
a.type = 'text/css'
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName('head')[0].appendChild(a)
}
function s() {
return (
'rgb(' +
~~(255 * Math.random()) +
',' +
~~(255 * Math.random()) +
',' +
~~(255 * Math.random()) +
')'
)
}
var d = []
;(e.requestAnimationFrame = (function () {
return (
e.requestAnimationFrame ||
e.webkitRequestAnimationFrame ||
e.mozRequestAnimationFrame ||
e.oRequestAnimationFrame ||
e.msRequestAnimationFrame ||
function (e) {
setTimeout(e, 1e3 / 60)
}
)
})()),
n()
})(window, document)修改
themes/next/layout/_layout.swig文件，在末尾添加
1 | <!-- 页面点击小红心 --> |
页面底部主题信息删除
- 打开
主题配置文件，修改footer下面的这些设置为false即可。
1 | # If not defined, `author` from Hexo `_config.yml` will be used. |
修改网站的图标 Favicon
实现效果
实现方法：
- 在EasyIcon中找一张（32*32）的 ico 图标,或者去别的网站下载或者制作，并将图标名称改为 favicon.ico，然后把图标放在/themes/next/source/images 里，并且修改
主题配置文件：
1 | favicon: |
显示当前浏览进度
实现效果：
实现方法：
- 修改
主题配置文件，把false改为true：
1 | back2top: |
添加在线联系功能
实现方法：
- 修改
next\layout_partials\head\head.swig文件, 添加以下内容
1 | {% if theme.daovoice %} |
- 修改
主题配置文件，添加：
1 | # daovoice 配置 |
部署到网站：
hexo clean&&hexo g&&hexo d就能看到效果了，网页右下角多了个 图标。具体修改图表的样式，位置。可以在 daovoice 网页中 应用设置-聊天设置 中配置。
添加文章书写样式
文字增加背景色块
在source\_data\styles.styl文件中添加属性样式（参考第 11 条）：
2020.3.25 提醒：其实可以直接使用 next 主题支持的 label 方法。
1 | {% label danger @ XXXX %} |
1 | // 颜色块-黄 |
在你需要编辑的地方，使用如下代码：
1 | `站点配置文件` |
下载样式
在source\_data\styles.styl文件中添加属性样式（参考第 11 条）：
1 | a#download { |
在你需要编辑的文章地方。放置如下代码：
1 | <a id="download" href="https://git-scm.com/download/win" |
在文章中增加小图标
next 支持Font Awesome 提供图标，你可以选择你喜欢的图标，这样使用即可：
1 | <i class="fa fa-pencil"></i>支持Markdown |
添加本地搜索
- 搜索功能需要依赖
hexo-generator-searchdb插件，我们先安装插件：
1 | npm install hexo-generator-searchdb --save |
- 打开
主题配置文件，搜索local_search，修改enable为true。 - 修改
站点配置文件，添加代码：
1 | search: |
右上角增加 fork me on GitHub 图标
1 | github_banner: |
打开代码块的复制功能
1 | codeblock: |
页面加载进度效果
- 安装插件
1 | git clone https://github.com/theme-next/theme-next-pace source/lib/pace |
- 编辑
主题配置文件：
1 | pace: |
阅读进度条
1 | # Reading progress bar |
文章创建时间和更新时间
1 | # Post meta display settings |
结语
很多内容参考了很多优秀博文，并根据自己实际情况进行了自己的博客进行了修改，感谢前辈们的珍贵经验，参考文章：
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 你真是一个美好的人类！
