Hexo Next 主题详细配置之一

发表于 阅读次数： 评论数： 本文字数： 3.5k 阅读时长 ≈ 3 分钟

前言

Next 安装

版本说明

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

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

Next 各版本的介绍

值得一提的是，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 常规配置

PDF 显示

Next 默认支持 PDF 自定义标签，使用格式为： {% pdf https://www.example.com/spring.pdf %}。若希望启用 PDF 的支持，需要更改 Next 主题的配置文件 themes/next/_config.yml，设置以下内容，详见官方文档

1
2
3
4
pdf:
  enable: true
  # Default height
  height: 550px

首页像显示头

更改 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号-1'

启用不蒜子统计

更改 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        # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）