Next 主题配置
当前用得最多的是next主题，那为什么用得多呢？当然是符合大多数人的审美。我使用的是next(v7.8.0)，下载地址：theme-next/hexo-theme-next
1 基本设置
1.1 主题设置
打开博客根目录 Blog 文件夹，右键 Git Bash，输入如下代码将next主题下载到目录 Blog/themes：
git clone https://github.com/theme-next/hexo-theme-next themes/next
打开根目录下的 _config.yml(称为站点配置文件)，修改主题（注意冒号后都要有空格）：
# Site
title: CarpeDiem's Blog # 标题
subtitle: '虽不能至，心向往之'
description: '不闻不若闻之，闻之不若见之，见之不若知之，知之不若行之。' # 简介或格言
keywords: "Python, Linux, Java, 算法, 人工智能"
author: Carpe Diem # 作者
language: zh-CN # 主题语言 en/zh-CN
timezone: Asia/Shanghai # 中国的时区
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-bamboo # 主体修改为 next
主题语言主要是看你的themes/next/language中的简体中文是 zh-CN 还是 zh-Hans：
next主题有四种，如下图依次为Muse、Mist、Pisces、Gemini（你可以每个设置一遍，确定一个喜欢的），这里选的是Gemini，打开目录 Blog/themes/next/ 下的_config.yml（称为主题配置文件），只要将你选的主题前的#删除就行了：
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini # 选择的主题
温馨提示：注意区分 根目录 Blog 下的 _config.yml 和 Blog/themes/next/ 下的_config.yml，搞混就找不到相应的配置
回到根目录打开 Git Bash，输入如下三条命令：
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
1.2 设置菜单
打开主题配置文件即themes/next下的_config.yml，查找menu，将前面的#删除就行了：
menu:
home: / || home #首页
archives: /archives/ || archive #归档
categories: /categories/ || th #分类
tags: /tags/ || tags #标签
about: /about/ || user #关于
resources: /resources/ || download #资源
# schedule: /schedule/ || calendar #日历
# sitemap: /sitemap.xml || sitemap #站点地图，供搜索引擎爬取
# commonweal: /404/ || heartbeat #腾讯公益404
“||”前面的是目标链接，后面的是图标名称，next使用的图标全是图标库 - Font Awesome 中文网 这一网站的，有想用的图标直接在fontawesome上面找图标的名称就行。resources 是我自己添加的。
新添加的菜单需要翻译对应的中文，打开 theme/next/languages/zh-CN.yml，在 menu 下设置：
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
resources: 资源
search: 搜索
在根目录下打开 Git Bash，输入如下代码：
hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "resources"
此时在根目录的sources文件夹下会生成categories、tags、about、resources四个文件，每个文件中有一个 index.md 文件，修改内容分别如下：
---
title: 分类
date: 2020-02-10 22:07:08
type: "categories"
comments: false
---
---
title: 标签
date: 2020-02-10 22:07:08
type: "tags"
comments: false
---
---
title: 关于
date: 2020-02-10 22:07:08
type: "about"
comments: false
---
---
title: 资源
date: 2020-02-10 22:07:08
type: "resources"
comments: false
---
注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段 comments 并将值设置为false。
1.3 设置建站时间
打开主题配置文件即 themes/next 下的_config.yml，查找since：
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
since: 2023-06 # 建站时间
1.4 设置头像
打开主题配置文件即 themes/next 下的 _config.yml，查找avatar，url后是图片的链接地址：
# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: /images/avatar.gif #图片的位置，也可以是http://xxx.com/avatar.png
# If true, the avatar will be dispalyed in circle.
rounded: true #头像展示在圈里
# If true, the avatar will be rotated with the cursor.
rotated: false #头像随光标旋转
1.5 网站图标设置
我是在这个网站找的图标，免费的图标素材网站：Easyicon
下载16x16和32x32的图标后，打开主题配置文件，查找favicon，只要修改small和medium为你的图标路径：
favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml
1.6 设置动态背景
1. canvas nest 风格
在themes/next目录下打开Git Bash，输入：
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest
打开主题配置文件即 themes/next 下的 _config.yml，找到 canvas-nest，将enable：false 改为true：（如果找不到 canvas-nest，可能是文件修改了，试试将下面的代码复制粘贴到 themes/next 中）
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
enable: true
onmobile: true # Display on mobile or not
color: "0,0,255" # RGB values, use `,` to separate
opacity: 0.5 # The opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # The number of lines
2. JavaScript 3D library风格
在themes/next目录下打开Git Bash，输入：
git clone https://github.com/theme-next/theme-next-three source/lib/three
打开主题配置文件即themes/next下的_config.yml，找到three，这里有三种风格，可以试一下看看喜欢哪种风格，直接将false改为true就行了，我已经选了canvas-nest，就没有选这种风格：
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: true
three_waves: false
canvas_lines: false
canvas_sphere: false
1.7 添加顶部加载条
在themes/next目录下打开Git Bash，输入：
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
打开主题配置文件即themes/next下的_config.yml，找到pace，将enable：false改为true，你还可以选择类型（theme）：
pace:
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal
1.8 设置侧边栏显示效果
打开主题配置文件即themes/next下的_config.yml，找到Sidebar Settings，设置：
sidebar:
# Sidebar Position. #设置侧边栏位置
position: left
#position: right
# - post 默认显示模式
# - always 一直显示
# - hide 初始隐藏
# - remove 移除侧边栏
display: post
1.9 侧边栏推荐阅读
打开主题配置文件即themes/next下的_config.yml，搜索links（里面写你想要的链接）：
# Blog rolls
links_settings:
icon: fa fa-link
title: 推荐网站 # 修改名称
# Available values: block | inline
layout: block
links:
#Title: http://yoursite.com
菜鸟教程: https://www.runoob.com/
C语言中文网: http://c.biancheng.net/sitemap/
CS自学指南: https://csdiy.wiki/
Road To Coding: https://www.r2coding.com/#/
计算机专业学习路线: https://hackway.org/docs/cs/intro
鱼C论坛: https://fishc.com.cn
1.10 添加社交链接
打开主题配置文件即themes/next下的_config.yml，搜索social：
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/molimi || fab fa-github
E-Mail: mailto:[email protected] || fa fa-envelope
CSDN: https://blog.csdn.net/xq151750111 || fa fa-codiepie
“||”前面的是链接，后面的是 FontAwesome 图标名称。
1.11 设置博文内链接为蓝色
打开themes/next/source/css/_common/components/post/post.styl文件，将下面的代码复制到文件最后：
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}
1.12 显示文章字数和阅读时长
从根目录Blog打开Git Bash，执行下面的命令，安装插件：
npm install hexo-wordcount --save
然后打开站点配置文件，在文件末尾加上下面的代码：
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
1.13 文章末尾添加版权说明
查找主题配置文件themes/next/_config.yml中的creative_commons：
creative_commons:
license: by-nc-sa
sidebar: false
post: true # 将false改为true即可显示版权信息
language:
1.14 添加评论
针对 Hexo 静态博客的 nexT主题 继承了多种评论系统，此处介绍两种相对好用的评论系统： Valine、Gitment 和 Utterances 。
1. Valine 评论系统
Valine 评论系统，此款系统不需要登录，无后端，nexT 主题最新也已经支持安装。
因为 Valine 是基于 LeanCloud 系统的，所以先在 LeanCloud 中注册账号，LeanCloud官网：https://console.leancloud.cn/login，注册登陆后，访问控制台，创建应用，选择开发版，确定创建，如下图
创建成功，生成了 AppID 和 AppKey，在控制台—应用凭证 查看，如下图
在主题的配置文件_config.yml中，修改关于 valine 的配置，如下图
上述设置仅作参考！最后，重新部署即可。
2. Gitment 评论系统
Gitment 评论系统是基于 Github 开发的，是依靠 GitHub Issues 的评论系统，Next 主题最新也已经支持安装。
安装前提：更新 Next 主题（5.1.2 主题及以上）
1. 注册 OAuth application
- 在 github 中进行注册，进入 https://github.com/settings/profile
- 点击左侧 Developer settings
- 点击左侧Oauth Apps
- 点击 Register a new application
注册完成之后，得到：Client ID 和 Client Secret
2. 新建存放博客评论仓库
在 github 中建一个项目，专门用来存储你的博客评论
3. 配置 nexT 主题文件
编辑主题配置文件：themes\ next主题 \ _config.yml，找到有关 gitment 的设置，如下
gitment:
enable: true
mint: true
count: true
lazy: false #评论懒加载，如果true，则默认不展示评论，点击按钮查看评论
cleanly: false
language:
github_user: #github名称
github_repo: BlogComments #上一步新建存放评论的仓库名
client_id: b8bad0exxxx #上面注册 OAuth Application 的 Client ID
client_secret: bcee560xxxxxx #上面注册 OAuth Application 申请的 Client Secret
proxy_gateway:
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint
4. 初始化
在设置完成后，Hexo重新部署。每篇文章都要点击初始化评论按钮。
5. 管理
评论显示在新建存放评论的仓库中的 issue 中。
6. 关闭
可以单独关闭某个页面的评论，在页面的 Front-matter 中添加 comments 字段，设为 false。比如标签页不想要评论，则在标签页面中做如下设置
---
title: xxxxxxxxx
date: 2023-06-06 17:05:24
type: "tags"
comments: false
---
3. Utterances 评论系统
这里主要介绍基于 Github Issues 的轻量级博客评论系统 Utterances。主要介绍 Utterances 的配置与使用
Utterances是一个基于Github Issues的轻量级评论系统，可用于博客、Wiki等。它具有以下优点：
- 开源
- 不追踪，无广告，始终免费
- 所有的数据都存储在Github Issues
- 样式基于Github的Primer设计语言
- 夜间模式
- 轻量级；原生TypeScript；在“常青树”浏览器上不使用网络字体，JavaScript框架或Polyfill。
快速上手
- 在 GitHub 上新建一个公开仓库（Repository），安装 Utterances GitHub App 至该仓库。
- 在你的网页需要插入 Utterances 评论的位置，粘贴以下代码（username，reponame 分别修改为你的 GitHub 用户名，仓库名）。
<script src="https://utteranc.es/client.js"
repo="username/reponame"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
script>
- 刷新网页就可以看到Utterances评论框了。
了解更多配置，请移步——自托管Utterances教程：基于Github Issues的轻量级博客评论系统
1.15 修改永久链接的默认格式
如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。
在 Hexo 根目录下的 _config.yml 文件采用初始设置。这里因为用“年月日”会让文章链接的层次太深，所以我用"article"代替：
# permalink: :year/:month/:day/:title/
permalink: article/:title.html
permalink_defaults:
生成的文章链接就是 (标题为“我的个人博客”)：https://[你的网站域名]/article/我的个人博客.html
链接中出现中文显然不太好，所以下面给出三种替代中的方法。
1. 安装插件方法一（推荐）
在 Hexo 根目录下使用 git bash 执行命令：
npm install hexo-abbrlink --save
在 Hexo 根目录下的 _config.yml 文件，修改为如下配置：
# permalink: :year/:month/:day/:title/
# permalink: article/:title/
permalink: article/:abbrlink.html
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 进制：dec(default) and hex
permalink_defaults:
然后在 git bash 按顺序运行如下命令：
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
再打开网站的文件就可以看到效果————https://[你的网站域名]/article/60762.html（其中60762就是随机生成的）
2. 安装插件方法二
中文链接转拼音，在 Hexo 根目录下使用 git bash 执行命令：
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中，修改以下的配置项：
permalink: article/:title.html
permalink_pinyin:
enable: true
separator: '-' # default: '-'
permalink_defaults:
然后在 git bash 按顺序运行如下命令：
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
再打开网站的文件就可以看到效果。https://[你的网站域名]/article/wo-de-ge-ren-bo-ke.html（标题为“我的个人博客”）
3. 采用urlname
在写每篇md文章的时候，在 Front-matter 里加上urlname：
---
title: Next 主题介绍
date: 2023-06-06 15:31:11
urlname: 2023060601
---
在 Hexo 根目录下的 _config.yml 文件中，修改以下的配置项：
permalink: article/:urlname.html # urlname值文章里必须填写，格式2023060601
permalink_defaults:
然后在 git bash 按顺序运行如下命令：
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署
再打开网站的文件就可以看到效果。https://[你的网站域名]/article/2023060601.html
小结
第一种方法是我试过中最好的；第三次之，因为每次都要手动加上urlname；而第二种，当文章的中文标题名字过长时，效果并不好。