Hexo Next 主题详细配置之一

前言

Next 安装

版本说明

本文使用各软件的版本如下:

软件版本
hexo3.9.0
hexo-cli2.0.0
next7.8

Next 各版本的介绍

年份版本仓库
2014 ~ 2017v5https://github.com/iissnan/hexo-theme-next
2018 ~ 2019v6 ~ v7https://github.com/theme-next/hexo-theme-next
2020v8https://github.com/next-theme/hexo-theme-next

Next 主题与 Hexo 的版本兼容如下:

next-hexo-version

Next 主题安装 7.x 版本

克隆整个 Next 仓库,这里使用 Next 7.x 版本

1
2
# 克隆代码(Next不同版本使用不同仓库)
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
theme: next

日后可以随时使用 Git 更新当前 Next 的版本,并切换到任何带标签的版本,或者切换到最新的 master 或任何其他分支。在大多数情况下,这对用户和开发人员都有用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 进入主题目录
$ cd themes/next

# 查看带标签的版本
$ git tag -l
v6.0.0
v6.0.1
v6.0.2


# 切换到特定标签的版本
$ git checkout tags/v6.0.1

# 重新切换为master分支
$ git checkout master

# 更新代码
$ git pull

Next 常规配置

首页像显示头

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
avatar:
url: /images/avatar.png # 头像图片
rounded: true # 头像显示在圆里
rotated: true # 鼠标焦点落在头像时,是否转动头像

菜单显示中文

在博客的根目录里,找到 _config.yml 文件,然后设置以下的配置项,值得一提的是,这里的字体是 zh-CN,而不是 zh-Hans

1
language: zh-CN

启用文章目录

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
5
6
toc:
enable: true
number: false # 自动添加目录编号
wrap: true # 每行目录字数超长自动换行
expand_all: true # 展开所有级别
max_depth: 5 # 目录的最大深度

启用文章打赏

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容,需要将收款二维码图片放到 themes/next/source/images 文件夹下,或者使用自定义的图片目录路径

1
2
3
4
5
6
7
8
reward_settings:
enable: true
animation: false
comment: 坚持原创技术分享,您的支持将鼓励我继续创作!

reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png

添加版权声明

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
5
creative_commons:
license: by-nc-sa # License类型: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
sidebar: false # 在侧边栏有一个版权的图片链接
post: true # 在每一篇文章末尾自动增加本文作者、本文链接、版权声明信息
language: deed.zh # 点击链接后显示的版权信息的语言

如果需要自定义文章底部版权信息的,可以自行修改 themes/next/layout/_partials/post/post-copyright.swig 模版文件来实现

添加标签页面

通过 Hexo 创建一个标签页面

1
2
3
4
5
# 进入博客的根目录
$ cd ${blog-root}/

# 创建标签页
$ hexo new page tags

创建完标签页后,发现 source 文件夹下会多了 tags/index.md 文件,这个文件是用于显示站点内所有分类标签的,复制以下内容到 tags/index.md 中,必须使用 --- 包裹配置内容,否则配置无效

1
2
3
4
5
6
---
title: 标签
type: "tags"
comments: false
date: 2021-04-05 17:13:00
---

若博客有集成评论服务,标签页面也会带有评论,需要关闭的话,请添加字段 comments 并将值设置为 false

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
menu:
tags: /tags/ || fa fa-tags

添加网站备案号

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
beian:
enable: true
icp: '粤ICP备19024664号'

启用不蒜子统计

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eye

首页不显示文章描述摘录

Next 主题默认会在首页里将文章描述摘录为前言文本,但在首页显示一篇文章的部分内容,并提供一个链接跳转到全文页面是一个常见的需求。 NexT 提供三种方式来控制文章在首页的显示方式,也就是说,在首页显示文章的摘录并显示 阅读全文 按钮,可以更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
excerpt_description: false

建议使用 <!-- more -->,除了可以精确控制需要显示的摘录内容以外,这种方式也可以让 Hexo 中的插件更好的识别

Next 进阶配置

启用 Pjax

Pjax 主要用于加速 Web 页面的切换速度,同时也可以用来解决 Aplayer 音频播发器切换页面后播放出现中断的问题

1
2
3
4
5
# 进入Next主题的目录
$ cd themes/next

# 下载资源文件
$ git clone https://github.com/theme-next/theme-next-pjax source/lib/pjax

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
pjax: true

启用背景 3D 动画

Next 主题默认支持 3D 背景动画,官方配置教程可以看这里,前提是需要下载指定的静态资源文件或者使用 CDN 静态资源文件

1
2
3
4
5
# 进入Next主题的目录
$ cd themes/next

# 下载3D资源文件
$ git clone https://github.com/theme-next/theme-next-three source/lib/three

或者更改 Next 主题的配置文件 themes/next/_config.yml,通过以下配置内容来指定 CDN 静态资源文件的 URL

1
2
3
4
5
vendors:
three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/three-waves.min.js
canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_lines.min.js
canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@latest/canvas_sphere.min.js

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
5
three:
enable: true
three_waves: true # 背景3D动画样式一
canvas_lines: false # 背景3D动画样式二
canvas_sphere: false # 背景3D动画样式三

启用图片点击居中预览

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
mediumzoom: true

启用 Canvas Ribbon 背景

Next 主题默认支持 Canvas Ribbon 背景,官方配置教程可以看这里,前提是需要下载指定的静态资源文件或者使用 CDN 静态资源文件

1
2
3
4
5
# 进入Next主题的目录
$ cd themes/next

# # 下载Canvas资源文件
$ git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon

或者更改 Next 主题的配置文件 themes/next/_config.yml,通过以下配置内容来指定 CDN 静态资源文件的 URL

1
2
vendors:
canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
5
canvas_ribbon:
enable: true
size: 300 # Ribbon的宽度
alpha: 0.6 # Ribbon的透明度
zIndex: -1 # Ribbon的显示级别

添加页面顶部加载进度条

1
2
3
4
5
# 进入Next主题的目录
$ cd themes/next

# 克隆代码
$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
pace:
enable: true
theme: minimal

添加页面顶部阅读进度条

1
2
3
4
5
# 进入Next主题的目录
$ cd themes/next

# 克隆代码
$ git clone https://github.com/theme-next/theme-next-reading-progress source/lib/reading_progress

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
5
reading_progress:
enable: true
position: top # 进度条的位置:top | bottom
color: "#37c6c0" # 进度条的颜色
height: 3px # 进度条的大小

显示侧栏阅读进度百分比

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
back2top:
enable: true
sidebar: false
scrollpercent: true

Next 页面样式更改

超链接样式

打开 CSS 文件 themes/next/source/css/_common/components/post/post.styl,在末尾添加以下 CSS 样式,颜色可自定义,在这里超链接选中状态为橙色,链接样式为蓝色

1
2
3
4
5
6
7
8
9
10
.post-body p a{
color: #0593d3;
border-bottom: none;
border-bottom: 1px solid #0593d3;
&:hover {
color: #fc6423;
border-bottom: none;
border-bottom: 1px solid #fc6423;
}
}

代码块高亮样式

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
5
6
codeblock:
highlight_theme: 'night eighties' # 代码高亮可选样式: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
copy_button:
enable: true # 启用代码复制按钮
show_result: false # 显示代码复制结果
style: flat # 代码块可选样式: default | flat | mac

文章底部标签样式

打开模板文件 themes/next/layout/_macro/post.swig,将以下内容替换掉

1
2
3
{%- for tag in post.tags.toArray() %}
<a href="{{ url_for(tag.path) }}" rel="tag">{{ tag_indicate }} {{ tag.name }}</a>
{%- endfor %}

替换的内容如下

1
2
3
{%- for tag in post.tags.toArray() %}
<a href="{{ url_for(tag.path) }}" rel="tag"> <i class="fa fa-tag"></i> {{ tag.name }}</a>
{%- endfor %}

页面底部添加站点运行时间

themes/next/layout/_partials/ 目录下创建 runtime.swig 源文件,并添加如下内容

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
<div id="site-runtime">
<span class="post-meta-item-icon">
<i class="fa fa-clock-o"></i>
</span>
<span id="runtime"></span>
</div>

<script language="javascript">
function isPC() {
var userAgentInfo = navigator.userAgent;
var agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for (var i = 0; i < agents.length; i++) {
if (userAgentInfo.indexOf(agents[i]) > 0) {
return false;
}
}
return true;
}

function siteTime(openOnPC, start) {
window.setTimeout("siteTime(openOnPC, start)", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;

{%- if theme.runtime.start %}
start = new Date("{{ theme.runtime.start }}");
{%- endif %}
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var diff = now - start;

var diffYears = Math.floor(diff / years);
var diffDays = Math.floor((diff / days) - diffYears * 365);
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);

if (openOnPC) {
document.getElementById("runtime").innerHTML = "Running: " + diffYears + " years " + diffDays + " days " + diffHours + " hours " + diffMinutes + " mins " + diffSeconds + " secs";
} else {
document.getElementById("runtime").innerHTML = "Running: " + diffYears + "y " + diffDays + "d " + diffHours + "h " + diffMinutes + "m " + diffSeconds + "s";
}
}

var showOnMobile = {{ theme.runtime.mobile }};
var openOnPC = isPC();
var start = new Date();
siteTime(openOnPC, start);

if (!openOnPC && !showOnMobile) {
document.getElementById('site-runtime').style.display = 'none';
}
</script>

编辑源文件 themes/next/layout/_partials/footer.swig,在文件末尾添加如下内容

1
2
3
{%- if theme.runtime.enable %}
{% include 'runtime.swig' %}
{%- endif %}

更改 Next 主题的配置文件 themes/next/_config.yml,添加以下内容

1
2
3
4
5
6
7
8
9
10
# Site Runtime
runtime:
enable: true
# The time of the site started running. If not defined, current time of local time zone will be used.
# You can specify the time zone by adding the `+HOURS` or `-HOURS` format time zone.
# If not specify the time zone, it will use `+0000` as default.
# ex: "2015-06-08 07:24:13 +0800", `+0800` specify that it is the time in the East Eight Time Zone.
start: 2019-11-23 09:00:00 +0800
# Whether to show on the mobile side
mobile: false

Next 安装常用插件

标签云插件

1
2
3
4
5
# 进入博客的根目录
$ cd ${blog-root}/

# 安装标签云插件
$ npm install hexo-tag-cloud --save

更改 Next 主题的源文件 themes/next/layout/_macro/sidebar.swig, 然后在最后添加如下内容

1
2
3
4
5
6
7
8
9
10
11
12
{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
<div class="widget-wrap">
<h3 class="widget-title">Tag Cloud</h3>
<div id="myCanvasContainer" class="widget tagcloud">
<canvas width="250" height="250" id="resCanvas" style="width:100%">
{{ list_tags() }}
</canvas>
</div>
</div>
{% endif %}

hexo-nex-tag-cloud

hexo-tag-cloud 插件支持自定义标签云的字体、颜色和高亮显示,在博客的根目录里,找到 _config.yml 文件,然后添加如下的配置项

1
2
3
4
5
6
7
tag_cloud:
textFont: Trebuchet MS, Helvetica # 字体
textColor: '#333' # 字体颜色
textHeight: 25 # 字体大小
outlineColor: '#E2E1D1'
maxSpeed: 0.5 # 旋转速度
pauseOnSelected: false # 当选中对应标签时,是否停止转动

完成安装和配置后,可以通过以下命令来进行本地预览,其中 hexo clean 为必须选项

1
$ hexo clean && hexo g && hexo s

本地搜索插件

Next 主题默认支持使用 Hexo-Generator-Searchdb 插件来实现本地搜索,前提是需要手动安装对应的插件

1
2
3
4
5
# 进入博客的根目录
$ cd ${blog-root}/

# 安装搜索插件
$ npm install hexo-generator-searchdb --save

在博客的根目录里,找到 _config.yml 文件,然后添加如下的配置项

1
2
3
4
5
6
search:
path: search.xml
field: post
content: true
format: html
limit: 1000

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
5
6
local_search:
enable: true
trigger: auto
top_n_per_article: 1
unescape: false
preload: false

RSS 订阅插件

hexo-generator-feed 插件用于在 public 目录下自动生成 atom.xml 文件

1
2
3
4
5
# 进入博客的根目录
$ cd ${blog-root}/

# 安装RSS订阅插件
$ npm install hexo-generator-feed --save

在博客的根目录里,找到 _config.yml 文件,然后添加如下的配置项

1
2
3
4
5
6
7
feed:
limit: 20
type: atom
path: atom.xml
order_by: -date
content_limit: 140
autodiscovery: true

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
social:
RSS: /atom.xml || fa fa-rss

站点地图插件

hexo-generator-sitemap 站点地图插件会在 public 目录下自动生成 sitemap.xml 文件

1
2
3
4
5
# 进入博客的根目录
$ cd ${blog-root}/

# 安装插件
$ npm install hexo-generator-sitemap --save

在博客的根目录里,创建站点地图的模板文件 sitemap_template.xml,将以下内容复制到文件中

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for post in posts %}
<url>
<loc>{{ post.permalink | uriencode }}</loc>
{% if post.updated %}
<lastmod>{{ post.updated.toISOString() }}</lastmod>
{% elif post.date %}
<lastmod>{{ post.date.toISOString() }}</lastmod>
{% endif %}
</url>
{% endfor %}
</urlset>

在博客的根目录里,找到 _config.yml 文件,然后添加如下的配置项

1
2
3
sitemap:
path: sitemap.xml
template: ./sitemap_template.xml

字数与阅读时长统计插件

Next 主题默认支持使用 hexo-symbols-count-time 插件来统计文章字数和阅读时长,前提是需要手动安装对应的插件

1
2
3
4
5
6
7
8
# 进入博客的根目录
$ cd ${blog-root}/

# 安装依赖
$ npm install eslint --save

# 安装插件
$ npm install hexo-symbols-count-time --save

在博客的根目录里,找到 _config.yml 文件,然后添加如下的配置项

1
2
3
4
5
6
symbols_count_time:
time: true # 文章阅读时长
symbols: true # 文章字数统计
total_time: true # 站点总阅读时长
total_symbols: true # 站点总字数统计
exclude_codeblock: true # 排除代码字数统计

更改 Next 主题的配置文件 themes/next/_config.yml,设置以下内容

1
2
3
4
symbols_count_time:
separated_meta: false # 是否另起一行显示(即不和发表时间等同一行显示)
item_text_post: true # 首页文章统计数量前是否显示文字描述(本文字数、阅读时长)
item_text_total: false # 页面底部统计数量前是否显示文字描述(站点总字数、站点阅读时长)