个人blog搭建指南hexo-theme-next

发表于 更新于 分类于 阅读次数： 本文字数： 9.4k 阅读时长 ≈ 34 分钟

曾几何时，我也是一个小白，摸索前行。

我始终坚信，对别人有帮助（参考价值）的文章，在合适的时间被有需要的人看到，那就是一篇好文章。

俗话说，每一篇博文背后都有一个精彩的段子，这是我说的，哈哈。

这个故事有点长。在一个月黑风高阳光灿烂的夜晚，小汪问了一堆奇怪的问题，然后来了句我们去开房吧。我当时愣了一愣，也只是愣了一愣，接着说了一句我们一起起床吧。啊这，请不要想多了，她只是…想借鉴一下我搭建个人blog的经验而已，哈哈。

如果你想支持小站持续发展，可以在文章尾部进行赞赏哟，我将用于小站持续维护以及域名费用。

个人 blog 仓库

源码仓库地址，不定期更新：blog-recording

我尽可能详细说明，希望初次接触 hexo 搭建个人 blog 的人群看到也能轻松上手。个人每隔一段时间，会输出一堆垃圾博文。

采用 hexo 和 next 主题打造。如果你想和我一样打造一款属于自己的博客站点，需要做如下操作。

主站和主题配置说明，尽本人最大能力去解释说明。配置文件（站点根目录），个人使用如下版本：

版本 配置文件 作用
7.2.0 _config.yml hexo 主站点配置
8.19.2 _config.next.yml next 主题配置

疑惑解答

在一个月黑风高的夜晚，小汪问了一堆奇怪的问题，然后来了句我们去开房吧。啊这，请不要想多了，她只是…想借鉴一下我搭建个人blog 的经验而已，哈哈。

小汪：为什么要部署 Git 环境？

答：主要用于版本控制，将生成的静态资源文件推送到 github 、gitee 等支持代码托管以及 pages 服务的平台。

小汪：为什么要部署 nodejs 环境？

答：主要用于安装静态博客生成器需要的依赖包，包含需要使用到的 npm 工具。

推荐使用国内 npm 镜像源地址。如何配置，请参考个人这篇博文： npm切换镜像源

小汪： 为什么要部署 hexo 环境？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

答：主要用于生成静态博客网站框架页面（ html + js + css + xml ）文件。

小汪： 为什么要部署 next 主题环境？

答：主要用于生成静态博客主题页面（ html + js + css + xml ）文件。不限于 next 主题，可以使用你喜欢的主题，人各有所好嘛。

仓库目录

本仓库目录作用说明：

  1. .deploy_git 目录：存放带有 git 版本控制的静态资源目录，需要部署 hexo-deployer-git 插件。
  2. node_modules 目录：存放 npm 工具安装的依赖文件。
  3. public 目录：与 .deploy_git 类似，存放 hexo g 生成后的静态资源文件。
  4. scaffolds 目录：存放模板文件。
  5. source 目录：存放网站源码文件。
  6. themes 目录：存放站点主题文件。
  7. _config.yml 文件：hexo 站点配置文件。
  8. _config.next.yml 文件：next 主题配置文件。
  9. package.json：保存 npm 安装插件版本的信息文件。
  10. .gitignore：git 版本控制忽略提交推送哪些文件。

scaffolds 目录作用说明：

目录 作用
draft.md 草稿文件模板
page.md 目录页面文件模板
post.md 博文文件模板

source 目录作用说明：

目录 作用
_data 数据（比如利用相关插件生成的 json 数据文件）目录
_posts 博文生成目录
about 关于（自我简介）目录
categories 类别目录
tags 标签目录
images 图片目录
links 个人自定义友情链接目录（你也可以定义为 friends）
happy 个人自定义娱乐项目目录
BingSiteAuth.xml SEO：在必应搜索引擎进行提交站点信息
CNAME 解析域名形式，使用某些插件需要在 source 目录加上 CNAME 配置文件

环境搭建

必备（部署）环境：

  1. git & nodejs
  2. 部署 hexo 静态博客生成器：npm install hexo-cli -g
  3. 安装 next 主题：npm install hexo-theme-next

hexo 部署步骤：

1
2
3
4
5
npm install hexo-cli -g   	#1.部署 hexo 客户端工具（-g ， 全局模式）
hexo init blog        		#2.初始化 blog 站点目录（存放站点配置文件以及资源文件）  
cd blog           			#3.进入 blog 目录
npm install               	#4.安装依赖
hexo server        			#5.启动 hexo 服务

next 主题部署方式（两种）

  • 方式一，利用 hexo 5.x 以及更高版本的特性，推荐使用 npm 工具直接部署 ：npm install hexo-theme-next ，主题部署目录保存在 blog 目录中 node_modules\hexo-theme-next 。
  • 方式二，利用 Git 工具部署：git clone https://github.com/next-theme/hexo-theme-next themes/next ，正常部署 hexo 会生成 themes 目录，将 next 主题克隆到 themes 中，好处是可以直接利用 git 做版本控制。

方式一部署步骤：

1
2
3
4
$ mkdir blog-hexo-site          #1.建立博客站点工作空间
$ cd blog-hexo-site         	#2.进入站点工作空间
$ npm install hexo-theme-next   #3.部署 next 主题
$ cp .\node_modules\hexo-theme-next\_config.yml  .\_config.next.yml  #4.复制主题配置文件到当前站点目录

方式二部署步骤：

1
2
3
$ mkdir blog-hexo-site
$ cd blog-hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next

hexo 主站加入配置：

1
theme: next

更详细的部署方式以及目录说明请参考 hexo 文档站和 next 主题仓库。

正常部署，使用命令 hexo -v 可以查看到工具版本信息：

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
hexo-cli: 4.3.1
os: win32 10.0.22631
node: 20.10.0
acorn: 8.10.0
ada: 2.7.2
ares: 1.20.1
base64: 0.5.0
brotli: 1.0.9
cjs_module_lexer: 1.2.2
cldr: 43.1
icu: 73.2
llhttp: 8.1.1
modules: 115
napi: 9
nghttp2: 1.57.0
nghttp3: 0.7.0
ngtcp2: 0.8.1
openssl: 3.0.12+quic
simdutf: 3.2.18
tz: 2023c
undici: 5.26.4
unicode: 15.0
uv: 1.46.0
uvwasi: 0.0.19
v8: 11.3.244.8-node.25
zlib: 1.2.13.1-motley

使用命令 node -v 查看 nodejs 版本

1
2
PS D:\work> node -v
v20.10.0

使用命令 npm -v 查看 npm 版本

1
2
PS D:\work> npm -v
10.2.3

效果展示

个人目前使用比较多的域名是 https://blog.cnwangk.top/ ，我做了 SEO。

效果展示，在线地址：

  1. 备用地址：

    • https://blog.cnwangk.top/
      • 部署在 vercel：https://vercel.com/
    • https://www.cnwangk.top/
      • 部署在 netlify：https://app.netlify.com/
    • https://cf.cnwangk.top/
      • 部署在 cloudflare：https://dash.cloudflare.com/

  2. 主站地址：

    • https://sky.cnwangk.top/
      • 部署在github：https://github.com/cnwangk/cnwangk.github.io

注意事项

next 主题仓库相关，一共有三个仓库：

版本 年份 仓库
v5.1.4 或更低 2014 ~ 2017 https://github.com/iissnan/hexo-theme-next
v6.0.0 ~ v7.8.0 2018 ~ 2019 https://github.com/theme-next/hexo-theme-next
v8.0.0 或更高 2020 ~ 至今 https://github.com/next-theme/hexo-theme-next
  1. next 5.x ，仓库很长一段时间没更新，不推荐使用。
  2. next 6.x ~ 7.x ，仓库很长一段时间没更新，不推荐使用。
  3. next 8.x（个人当前使用版本 v8.19.1），推荐使用。

引用 next 8.x 主题仓库一篇 issues 的一段说明：

遗憾的是，每个新仓库的创建者都没有 Archive 旧仓库的权限，导致了历史遗留问题。为了避免安装过时的 NexT 版本，请务必按照本仓库 README 中提供的几种安装方式进行操作。
跨版本的升级可能并不顺滑（例如由 v5.1.4 或 v7.8.0 升级至 v8.0.0），请备份配置文件及修改过的文件（例如自定义模板文件）后，重新安装新的主题。具体操作请阅读文档： https://theme-next.js.org/docs/getting-started/upgrade.html

详情请戳这篇 issues ，必读更新说明及常见问题：

https://github.com/next-theme/hexo-theme-next/issues/4

hexo 本体 & next 主题配置

通过浏览 hexo 文档站 与 next 主题文档站) 做了大量实践操作比对，做出如下总结。

_config.yml 配置

_config.yml 配置文件路径：blog\_config.yml

友情提醒：个人所展示 Hexo 配置，主题已升级 v7.0.0，_config.yml 配置文件内容还在摸索尝试中，尚未做出改变，还停留在 v6.3.0。

主站配置与搜索

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
# ===================================================================
# Version：7.0.0
# Hexo 主站配置
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# ===================================================================

# -------------------------------------------------------------------
# 友情提示：配置项分为网站（Hexo）主站配置和主题（默认为 landscape ）配置
# 主站配置文件：根目录下的 _config.yml
# 主题配置：例如使用 next 主题，根目录下配置 _config.next.yml
# -------------------------------------------------------------------

# Site
# 配置效果请戳：https://blog.cnwangk.top/
# 备用地址：https://cnwangk.github.io/
# 网站主站设置
# 参考 hexo 官方文档：https://hexo.io/zh-cn/docs/configuration.html
title: 龙腾万里sky的博客
subtitle: '子标题比如我个人比较喜欢的一句话：养得胸中一种恬静'
description: '可以是你的技术偏好：'
keywords:                      # 网站的关键词，支持多个关键词。
author: 龙腾万里sky             # 作者（你的昵称） 
language: zh-CN                # 设置网站显示语言，language:zh-CN，显示中文
timezone: 'Asia/Shanghai'      # 时区，国内推荐设置 timezone: 'Asia/Shanghai' ，亚洲/上海

# search
# 配置本地搜索，主站配置 hexo config 
# 需要安装插件：$ npm install hexo-generator-searchdb --save
# 详细配置请参考：https://theme-next.js.org/docs/third-party-services/search-services.html#Local-Search
search:
  path: search.xml
  field: post
  content: true
  format: html

扩展

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
# -------------------------------------------------------------------
# 扩展
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# -------------------------------------------------------------------
# 初次安装 hexo，默认配置主题为：theme: landscape
# 主站配置选择主题，个人通过 npm install hexo-theme-next --save 形式安装
# 配置方式是，theme: next
#theme: fluid
theme: next
#theme: hexo-theme-next
#theme: landscape


# 生成 sitemap
# npm install hexo-generator-sitemap --save
# npm install hexo-generator-baidu-sitemap --save
sitemap:
  path: sitemap.xml
# baidusitemap:
#   path: baidusitemap.xml


# 文章 URL 设置规则
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
#url: https://cnwangk.github.io/
url: https://blog.cnwangk.top/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks


# 网站资源目录
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
schedule_dir: schedule
code_dir: downloads/code
i18n_dir: :lang
skip_render:


# 文章相关配置
# Writing
new_post_name: :title.md # 新文章的文件名称
default_layout: post     # 预设布局
auto_spacing: false      # 在中文和英文之间加入空格
titlecase: false         # 把标题转换为 title case
external_link:           # 在新标签中打开链接
  enable: true           # 在新标签中打开链接，默认 true
  field: site            # 对整个网站（site）生效或仅对文章（post）生效
  exclude: ''            # 需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0         # 把文件名称转换为 (1) 小写或 (2) 大写 
render_drafts: false     # 显示草稿，默认 false
post_asset_folder: false  # post_asset_folder 文章资源文件夹 相对路径引用的标签插件
# 使用 Markdown 嵌入图片 
# marked:
#   prependRoot: true
#   postAsset: true
relative_link: false    # 把链接改为与根目录的相对位址
future: true  # future 显示未来的文章 default:true

# 代码块的设置, 请参考 Highlight.js 进行设置
# 注意：某些主题可能做了改造，需要禁用主站 PrismJS 配置，代码块的设置, 请参考 PrismJS 进行设置
# https://hexo.io/zh-cn/docs/syntax-highlight#Highlight-js
# https://hexo.io/zh-cn/docs/syntax-highlight#PrismJS
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:       # 代码块的设置, 请参考 PrismJS 进行设置
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''


# 首页设置
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 5         # 每页显示文章数量
  order_by: -date     # 按时间先后顺序排序


# 类别和标签配置
# Category & Tag
# default_category：默认分类，默认值 uncategorized
# category_map：分类别名
# tag_map： 标签别名 
default_category: uncategorized
category_map:
tag_map:


# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true    # Meta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签


# 日期、时间设置（文章生成时间）
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD   # 日期格式
time_format: HH:mm:ss     # 时间格式
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'   # 当 Front Matter 中没有指定 updated 时 updated 的取值

# 分页
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10             # 每页显示的文章量 (0 = 关闭分页功能)，默认 10
pagination_dir: page     # 分页目录



# 设置包含（include）、排除（exclude）、忽略（ignore）哪些文件
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
# include: Hexo 默认会不包括 source/ 下的文件和文件夹（包括名称以下划线和 . 开头的文件和文件夹，Hexo 的 _posts 和 _data 等目录除外）。
# include: 通过设置此字段将使 Hexo 处理他们并将它们复制到 source 目录下。
# exclude: Hexo 不包括 source/ 下的这些文件和目录
# ignore: Hexo 会忽略整个 Hexo 项目下的这些文件夹或文件
include:
exclude:
ignore:

尝试使用第三方插件 hexo-bilibili-bangumi

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
# -------------------------------------------------------------------
# 安装：npm install hexo-bilibili-bangumi  --save
# 仓库地址：https://github.com/HCLonely/hexo-bilibili-bangumi
# 注意：我设置了二级菜单，同时需要 path 值。默认不填 path 即可。
# -------------------------------------------------------------------
bangumi: # 追番设置
  enable: true
  source: bili
  bgmInfoSource: 'bgmApi'
  path: '/happy/bangumis/index.html'
  vmid: '26787954'
  title: '追番列表'
  quote: '一入编程深似海，从此节操是路人！'
  show: 1
  lazyload: false
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  showMyComment: false
  pagination: false
  metaColor:
  color:
  webp:
  progress:
  extraOrder:
  proxy:
    host: ''
    port: ''
  extra_options:
    key: value
cinema: # 追剧设置
  enable: true
  path: '/happy/cinemas/index.html'
  vmid: '26787954'
  title: '追剧列表'
  quote: '一入编程深似海，从此节操是路人！'
  show: 1
  lazyload: false
  srcValue: '__image__'
  lazyloadAttrName: 'data-src=__image__'
  loading:
  metaColor:
  color:
  webp:
  progress:
  extraOrder:
  extra_options:
    key: value

一键发布至 github 仓库，需要安装插件：hexo-deployer-git

建议配置成这种模式：repo: git@github.com:username/username.github.io.git

1
2
3
4
5
6
7
8
9
10
11
12
# -------------------------------------------------------------------
# 一键发布至 github 仓库，需要安装插件：hexo-deployer-git
# Deployment
# npm install hexo-deployer-git --save
## Docs: https://hexo.io/docs/one-command-deployment
# -------------------------------------------------------------------
deploy:
  type: git
  #repo: https://github.com/cnwangk/cnwangk.github.io
  repo: git@github.com:cnwangk/cnwangk.github.io.git
  branch: gh-pages
  #message: 升级 hexo 版本至 v7.0.0

啊，你没看错，我一般是第一时间升级到 hexo 最新稳定版本。如果觉得最新版本不稳定，也可以使用上一个版本 hexo 6.3.0。

_config.yml 其它配置项，个人感觉可用可不用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 中文链接转拼音
# 插件1： https://github.com/rozbo/hexo-abbrlink   仓库近期还在活跃
# 插件2： https://github.com/viko16/hexo-permalink-pinyin    仓库有一段时间没更新了

# 压缩静态资源：css | js | html
# gulp
# npm install hexo-minify --save  有插件冲突，可能需要禁用某些插件功能
# npm install hexo-clean-css --save
# npm install html-minifier-terser --save

# 二次元看板娘，根据个人喜好添加
# npm install --save hexo-helper-live2d
# 原始仓库地址：https://github.com/EYHN/hexo-helper-live2d
# 活跃仓库地址：https://github.com/stevenjoezhang/live2d-widget

_config.next.yml 配置

本文记录了 hexo-theme-next 主题从 v8.16.0 到 v8.19.1 做了哪些更新（移除或新增某些功能），在代码注释中有做说明，方便查阅。

_config.next.yml 主题配置文件路径：blog\_config.next.yml

如果你采用了 npm install hexo-theme-next --save 形式安装。那么，_config.next.yml 主题配置文件原始路径为：blog\node_modules\hexo-theme-next\_config.yml。

主题核心配置：

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
# ===============================================================
# 个人对使用过的 Next 主题相关功能一点点理解，多数情况参考 Next 文档站
# 存在描述不当（有误）的地方，还请包含
# It's recommended to use Alternate Theme Config to configure NexT
# Modifying this file may result in merge conflict
# See: https://theme-next.js.org/docs/getting-started/configuration
# ===============================================================

# ---------------------------------------------------------------
# 主题核心配置
# 详细演示请前往（目前文档没有同步中文翻译）：https://theme-next.js.org/docs/theme-settings/
# Theme Core Configuration Settings
# See: https://theme-next.js.org/docs/theme-settings/
# ---------------------------------------------------------------

# 允许内容（生成文件）可以存在缓存
# Allow to cache content generation.
cache:
  enable: true

# 在 hexo（hexo g） 生成静态资源文件后删除不需要的文件
# Remove unnecessary files after hexo generate.
minify: true

# 配置自定义文件路径
# 例如在你的网站目录配置：source/_data
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

主题形态设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# ---------------------------------------------------------------
# 主题设置：安装默认设置 Muse ，可以自行切换喜欢的主题形态
# 比如 Next 主题文档站默认设置 Gemini ，个人比较喜欢这款
# Scheme Settings
# ---------------------------------------------------------------

# 主题四大形态：Muse | Mist | Pisces | Gemini
# 默认设置，scheme: Muse
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

# 暗黑模式设置，false：禁用，true：开放
# Dark Mode
darkmode: false

网站信息配置

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
# ---------------------------------------------------------------
# 网站信息配置
# Site Information Settings
# ---------------------------------------------------------------

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

# 自定义 logo（温馨提示：不支持 Mist 主题）
# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: #/uploads/custom-logo.png

# 创建监听许可协议，显示效果位于文章底部
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
  # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
  license: by-nc-sa
  # Available values: big | small
  size: big
  sidebar: true
  post: true
  # You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
  # CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
  language: deed.zh

# Open graph settings
# See: https://hexo.io/docs/helpers#open-graph
open_graph:
  enable: true
  options:
    type: blog
    #twitter_card: <twitter:card>
    #twitter_id: <twitter:creator>
    #twitter_site: <twitter:site>
    #twitter_image: <twitter:image>
    #google_plus: <g+:profile_link>
    #fb_admins: <fb:admin_id>
    #fb_app_id: <fb:app_id>

菜单栏设置

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
# ---------------------------------------------------------------
# 菜单栏设置
# 设置网站主站显示语言，language:zh-CN，显示中文
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home                   # 首页
  about: /about/ || fa fa-user            # 关于页面
  tags: /tags/ || fa fa-tags              # 标签页面
  categories: /categories/ || fa fa-th    # 类别页面
  archives: /archives/ || fa fa-archive   # 归档页面（根据发表时间进行排序） 
  links: /links/ || fa fa-globe fa-fw     # 友情链接（可以自己扩展）
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
  #node_modules\hexo-theme-next\languages\zh-CN.yml 配置文件menu模块新增汉化
  #例如个人配置  happy:文娱  bangumis:番剧  cinemas:电视剧
  happy:                                  # 多级（二级）菜单示例 
      default: /happy/ || fa fa-th
      bangumis: /bangumis/ || fa fa-th
      cinemas: /cinemas/ || fa fa-th
  #bangumis: /bangumis/ || fa fa-th
  #cinemas: /cinemas/ || fa fa-th


# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: false

侧边栏配置

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
# ---------------------------------------------------------------
# 侧边栏配置
# Sidebar Settings
# See: https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

# 设置侧边栏位置
sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar padding in pixels.
  padding: 18
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.jpg
  # If true, the avatar will be displayed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: true

# Posts / Categories / Tags in sidebar.
site_state: true

社交网站链接设置

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
# 社交网站链接设置（位于网站左侧中间部位）
# 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/cnwangk || fab fa-github
  Zhihu: https://www.zhihu.com/people/hbwk || fab fa-zhihu
  E-Mail: mailto:dywangk@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
  enable: true
  icons_only: false
  transition: false

# Blog rolls
links_settings:
  icon: fa fa-globe
  # Available values: block | inline
  layout: block

# 主题默认友情链接设置，原生支持（显示在侧边栏）
# links:
  #Title: https://example.com

文章多级目录显示设置

1
2
3
4
5
6
7
8
9
10
11
12
13
# 文章多级目录显示设置
# Table of Contents in the Sidebar
# Front-matter variable (nonsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

网站底部设置

v8.17.1 版本开始支持设置禁用底部版权显示功能。

v8.19.0 更新备案 url 。

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
# ---------------------------------------------------------------
# 网站底部设置
# Footer Settings
# See: https://theme-next.js.org/docs/theme-settings/footer
# ---------------------------------------------------------------

# Show multilingual switcher in footer.
language_switcher: false
# 网站底部显示从哪一年开始运营
# 8.17.1 版本开始支持设置禁用底部版权显示功能
#footer:
#  copyright: false
footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  since: 2017

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#ff0000"
  # 版权设置  
  # If not defined, `author` from Hexo `_config.yml` will be used.
  copyright: Copyright © 龙腾万里sky. All Rights Reserved.
  # 由 Hexo & NexT 驱动，显示设置（开启：true，禁用：false）
  # Powered by Hexo & NexT
  powered: true
  # 网站备案设置
  # 8.19.0 更新备案 url
  # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, https://beian.mps.gov.cn
  beian:
    enable: false
    icp:
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. Login and See: https://beian.mps.gov.cn/web/business/businessHome/website
    gongan_icon_url:

Post 配置

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
# ---------------------------------------------------------------
# Post 配置，与生成文章相关设置、比如首页文章摘要、读取更多 button 按钮
# Post Settings
# See: https://theme-next.js.org/docs/theme-settings/posts
# ---------------------------------------------------------------

# Use `description` in front-matter to specify post excerpt.
excerpt_description: true

# 阅读博文，读取更多内容（按钮）
# 精确截取，在文章内需要截断的位置嵌入： <!-- more -->
# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

# 如果文章数量大，不想每篇手动截取，可以通过安装其它插件：hexo-excerpt
# 配合主题内置的 read_more_btn 和 excerpt_description 功能混合使用，实现自动截取
# 插件仓库 地址：https://github.com/chekun/hexo-excerpt
# 安装插件：npm install hexo-excerpt --save

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: true

# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
  separated_meta: true
  item_text_total: true

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

# 赞赏配置
# Donate (Sponsor) settings
# Front-matter variable (nonsupport animation).
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: false
  animation: false

reward:
  #wechatpay: /images/wechatpay.png
  #alipay: /images/alipay.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

# 社交网站设置（位于文章底部）
# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  WeChat: /images/wechat_channel.jpg || fab fa-weixin
  Zhihu: https://www.zhihu.com/people/hbwk || fab fa-zhihu
  #RSS: /atom.xml || fa fa-rss

# 文章显示关联设置
# Related popular posts
# Dependencies: https://github.com/sergeyzwezdin/hexo-related-posts
related_posts:
  enable: true
  icon: fa fa-signs-post

# 在线编辑文章设置（需要链接到文章原始仓库）
# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name/ # Link for view source
  #url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ # Link for fork & edit

# Show previous post and next post in post footer if exists
# Available values: left | right | false
post_navigation: left

定义页面配置

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
# ---------------------------------------------------------------
# 自定义页面配置
# Custom Page Settings
# See: https://theme-next.js.org/docs/theme-settings/custom-pages
# ---------------------------------------------------------------
# 标签云设置
# TagCloud settings for tags page.
tagcloud:
  min: 12 # Minimum font size in px
  max: 30 # Maximum font size in px
  amount: 200 # Total amount of tags
  orderby: name # Order of tags
  order: 1 # Sort order

# 谷歌日历配置，需要申请账号（获取 api key）
# Google Calendar
# Share your recent schedule to others via calendar page.
calendar:
  calendar_id: <required> # Your Google account E-Mail
  api_key: <required>
  orderBy: startTime
  showLocation: false
  offsetMax: 72 # Time Range
  offsetMin: 4 # Time Range
  showDeleted: false
  singleEvents: true
  maxResults: 250

杂项（混合）主题配置

NexT 8.18.0 Released 版本开始支持代码折叠功能。

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
87
88
89
90
91
92
# ---------------------------------------------------------------
# 杂项（混合）主题配置
# Misc Theme Settings
# See: https://theme-next.js.org/docs/theme-settings/miscellaneous
# ---------------------------------------------------------------

# Preload styles and preconnect CDN for fonts and plugins.
# For more information: https://www.w3.org/TR/resource-hints/#preconnect
preconnect: false

# 文本居中配置
# Set the text alignment in posts / pages.
text_align:
  # Available values: start | end | left | right | center | justify | justify-all | match-parent
  desktop: justify
  mobile: left

# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: true

# Browser header panel color.
theme_color:
  light: "#222"
  dark: "#222"

# Override browsers' default behavior.
body_scrollbar:
  # Place the scrollbar over the content.
  overlay: false
  # Present the scrollbar even if the content is not overflowing.
  stable: false

# 代码主题设置
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: stackoverflow-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  # 复制按钮功能
  copy_button:
    enable: true
    # Available values: default | flat | mac
    # 可选属性：default | flat | mac（比如 mac 特效，复制按钮右上角有三颗彩色圆点）
    style: mac
  # Fold code block 
  # 代码折叠，true：开启，false：禁用；NexT 8.18.0 Released 版本开始支持该功能
  # https://github.com/next-theme/hexo-theme-next/pull/694
  fold:
    enable: true
    height: 500


# 返回顶部按钮，默认在网站右下角
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: false

# 读取进度条配置
# Reading progress bar
reading_progress:
  enable: false
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false
  color: "#37c6c0"
  height: 3px

# Bookmark Support
bookmark:
  enable: false
  # Customize the color of the bookmark.
  color: "#222"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: auto


# 在网站右上角显示关注我的 github 角标
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/cnwangk

字体配置

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
# ---------------------------------------------------------------
# 字体配置
# Font Settings
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://fonts.google.com)
# All fonts set here will have the following styles:
#   light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------

font:
  enable: false

  # Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Lato
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family:
    size:

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family:
    size:

  # Font settings for posts (.post-body).
  posts:
    external: true
    family:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family:

SEO（网站被搜索引擎索引）配置

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
# ---------------------------------------------------------------
# SEO（网站被搜索引擎索引）配置
# SEO Settings
# See: https://theme-next.js.org/docs/theme-settings/seo
# ---------------------------------------------------------------

# If true, site-subtitle will be added to the title of index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: true

# Automatically add external URL with Base64 encrypt & decrypt.
exturl: true
# If true, an icon will be attached to each external URL
exturl_icon: true

# Google Webmaster tools verification.
# See: https://developers.google.com/search
google_site_verification: 

# Bing Webmaster tools verification.
# See: https://www.bing.com/webmasters
bing_site_verification:  

# Yandex Webmaster tools verification.
# See: https://webmaster.yandex.ru
yandex_site_verification:

# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site
baidu_site_verification:

标签配置

v8.17.0 版本开始支持 WaveDrom tag 功能

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
# ---------------------------------------------------------------
# 标签配置
# Tags Settings
# See: https://theme-next.js.org/docs/tag-plugins/
# ---------------------------------------------------------------

# Note tag (bootstrap callout)
note:
  # Note tag style values:
  #  - simple    bootstrap callout old alert style. Default.
  #  - modern    bootstrap callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: true
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0


# Tabs tag 配置
# 比如在文章顶部参数设置：sticky:100  或者  top:100
# 当然还有其它用法，通过 {% tabs First unique name %} <!-- tab --> tab1 <!-- endtab --> {% endtabs %} 包裹内容 tab1
# 详细配置请参考：https://theme-next.js.org/docs/tag-plugins/tabs.html#Settings
# Tabs tag
tabs:
  # Make the nav bar of tabs with long content stick to the top.
  sticky: true
  transition:
    tabs: false
    labels: true

# PDF tag
# NexT will try to load pdf files natively, if failed, pdf.js will be used.
# So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# Dependencies: https://github.com/next-theme/theme-next-pdf
pdf:
  enable: false
  # Default height
  height: 500px

# Mermaid tag
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme:
    light: default
    dark: dark
    
# WaveDrom tag
# 8.17.0 版本开始支持 WaveDrom tag 功能
wavedrom:
  enable: false

第三方插件服务配置

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
# ---------------------------------------------------------------
# 第三方插件服务配置
# Third Party Plugins & Services Settings
# See: https://theme-next.js.org/docs/third-party-services/
# More plugins: https://github.com/next-theme/awesome-next
# ---------------------------------------------------------------

# ---------------------------------------------------------------
# Math Formulas Render Support
# See: https://theme-next.js.org/docs/third-party-services/math-equations
# Warning: Please install / uninstall the relevant renderer according to the documentation.
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
# ---------------------------------------------------------------

math:
  # Default (false) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in front-matter.
  # If you set it to true, it will load mathjax / katex script EVERY PAGE.
  every_page: false

  mathjax:
    enable: false
    # Available values: none | ams | all
    tags: none

  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

扩展功能配置

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
# ---------------------------------------------------------------
# 扩展功能配置
# External Libraries
# See: https://theme-next.js.org/docs/third-party-services/external-libraries
# ---------------------------------------------------------------

# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
# 开启影响  番剧组件、giscus 评论组件加载（可能需要二次刷新才能显示）
pjax: false

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: false

# Medium Zoom is a JavaScript library for zooming images like Medium.
# Warning: Do not enable both `fancybox` and `mediumzoom`.
# For more information: https://medium-zoom.francoischalifour.com
mediumzoom: false

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: true

# 中文与英文之间自动插入白色空格，实际效果以最终显示为准
# 不开启pangu插件示例效果：原始显示next当前最新稳定版本是v8.19.1
# 开启 pangu 插件示例效果：原始显示 next 当前最新稳定版本是 v8.19.1
# Automatically insert whitespace between CJK and half-width characters.
# For more information: https://github.com/vinta/pangu.js
# Server-side plugin: https://github.com/next-theme/hexo-pangu
pangu: true

# Prefetch links based on what is in the user's viewport.
# For more information: https://getquick.link
# Front-matter variable (nonsupport home archive).
quicklink:
  enable: true

  # Home page and archive page can be controlled through home and archive options below.
  # This configuration item is independent of `enable`.
  home: true
  archive: true

  # Default (true) will initialize quicklink after the load event fires.
  delay: true
  # Custom a time in milliseconds by which the browser must execute prefetching.
  timeout: 3000
  # Default (true) will attempt to use the fetch() API if supported (rather than link[rel=prefetch]).
  priority: true

动画效果配置

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
# ---------------------------------------------------------------
# 动画效果配置
# Animation Settings
# ---------------------------------------------------------------

# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
  enable: true
  async: false
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
    menu_item: fadeInDown
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInUp


# 首页加载进度条特效设置
# Progress bar in the top during page loading.
# For more information: https://github.com/CodeByZach/pace
pace:
  enable: true
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: blue
  # All available themes:
  # 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: mac-osx

# Generate a ribbon in your website with HTML5 canvas.
# For more information: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

评论组件设置

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
# ---------------------------------------------------------------
# 评论组件设置
# Comments Settings
# See: https://theme-next.js.org/docs/third-party-services/comments
# ---------------------------------------------------------------

# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
  active: giscus
  # Setting `true` means remembering the comment system selected by the visitor.
  storage: true
  # Lazyload all comment systems.
  lazyload: true
  # Modify texts or order for any naves, here are some examples.
  nav:
    #disqus:
    #  text: Load Disqus
    #  order: -1
    #gitalk:
    #  order: -2


# giscus 评论组件
# github仓库地址： https://github.com/giscus/giscus
# giscus 配置生成地址：https://giscus.app/zh-CN 
# giscus next 主题插件仓库地址：https://github.com/next-theme/hexo-next-giscus
# 如果你和我一样使用 next 主题版本为 v8.19.1，giscus 版本配置为：1.0.3
# 安装组件：npm install hexo-next-giscus@1.0.3 --save
giscus:
  enable: true
  repo:  # Github repository name
  repo_id:  # Github repository id
  category:   # Github discussion category
  category_id:  # Github discussion category id
  # Available values: pathname | url | title | og:title
  mapping: pathname
  # Available values: 0 | 1
  reactions_enabled: 1
   # Available values: 0 | 1
  emit_metadata: 1
  # Available values: light | dark | dark_high_contrast | transparent_dark | preferred-color-scheme
  theme: light
  # Available values: en | zh-CN
  lang: zh-CN
  # Place the comment box above the comments
  input_position: bottom
  # Load the comments lazily
  loading: lazy

# Disqus 评论，需要科学上网配置反代
# Disqus
# For more information: https://disqus.com
disqus:
  enable: false
  shortname:
  count: true

# DisqusJS 评论，同样需要科学上网配置反代
# DisqusJS
# For more information: https://disqusjs.skk.moe
disqusjs:
  enable: false
  # API Endpoint of Disqus API (https://disqus.com/api/docs/).
  # Leave api empty if you are able to connect to Disqus API. Otherwise you need a reverse proxy for it.
  # For example:
  # api: https://disqus.skk.moe/disqus/
  api:
  apikey: # Register new application from https://disqus.com/api/applications/
  shortname: # See: https://disqus.com/admin/settings/general/

# 畅言云评（国内）：使用体验，评论审核很难通过，时好时坏（抽风），半死不活。
# 如果使用自定义域名，需要备案。
# Changyan
# For more information: https://changyan.kuaizhan.com
changyan:
  enable: false
  appid:
  appkey:
  # Show comments count
  count: true

# LiveRe comments system
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: # <your_uid>

# Gitalk 评论组件，需要科学上网配置反代，默认提供反代地址已经失效
# Gitalk
# For more information: https://gitalk.github.io
gitalk:
  enable: false
  github_id: # GitHub repo owner
  repo: # Repository name to store issues
  client_id: # GitHub Application Client ID
  client_secret: # GitHub Application Client Secret
  admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # When the official proxy is not available, you can change it to your own proxy address
  proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy address
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language:

# Utterances 评论组件，基于 github issues 功能，需要公开仓库开放 issues 功能
# Utterances
# For more information: https://utteranc.es
utterances:
  enable: false
  repo: user-name/repo-name # Github repository owner and name
  # Available values: pathname | url | title | og:title
  issue_term: pathname
  # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
  theme: github-light

# Isso
# For more information: https://isso-comments.de
isso: # <data_isso>

快速分享组件

v8.16.0 版本开始支持使用 AddToAny 功能。

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
# ---------------------------------------------------------------
# 快速分享组件（位于文章底部）
# Post Widgets & Content Sharing Services
# See: https://theme-next.js.org/docs/third-party-services/post-widgets
# ---------------------------------------------------------------

# AddToAny Share. See: https://www.addtoany.com
# 8.16.0 版本开始支持使用 AddToAny 功能
addtoany:
  enable: true
  buttons:
    - facebook
    - twitter


# ---------------------------------------------------------------
# 设置网站分析（支持百度、谷歌、Cloudflare等等）
# Statistics and Analytics
# See: https://theme-next.js.org/docs/third-party-services/statistics-and-analytics
# ---------------------------------------------------------------

# Google Analytics
# See: https://analytics.google.com
google_analytics:
  tracking_id: # <app_id>
  # By default, NexT will load an external gtag.js script on your site.
  # If you only need the pageview feature, set the following option to true to get a better performance.
  only_pageview: false

# Baidu Analytics
# See: https://tongji.baidu.com
#baidu_analytics: 8cd73d3e373ec975b52226e6d54add67 # <app_id>

# Growingio Analytics
# See: https://www.growingio.com
growingio_analytics: # <project_id>

# Cloudflare Web Analytics
# See: https://www.cloudflare.com/web-analytics/
#cloudflare_analytics: 7be9d37fb35342a9b143b2d559783611

# Microsoft Clarity Analytics
# See: https://clarity.microsoft.com/
clarity_analytics: # <project_id>

# Matomo Analytics
# See: https://matomo.org/
matomo:
  enable: false
  server_url: # https://www.example.com/
  site_id: # <your site id>

# Umami Analytics
# See: https://umami.is/
umami:
  enable: false
  script_url: # https://umami.example.com/script.js
  website_id: # <your website id>
  host_url: # <your umami site url>

# Plausible Analytics
# See: https://plausible.io/
plausible:
  enable: false
  script_url: # https://plausible.io/js/script.js
  site_domain: # www.example.com

# Show number of visitors of each article.
# You can visit https://www.leancloud.cn to get AppID and AppKey.
leancloud_visitors:
  enable: false
  app_id: # <your app id>
  app_key: # <your app key>
  # Required for apps from CN region
  server_url: # <your server url>
  # Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
  # If you don't care about security in leancloud counter and just want to use it directly
  # (without hexo-leancloud-counter-security plugin), set `security` to `false`.
  security: true

# Another tool to show number of visitors to each article.
# Visit https://console.firebase.google.com/u/0/ to get apiKey and projectId.
# Visit https://firebase.google.com/docs/firestore/ to get more information about firestore.
firestore:
  enable: false
  collection: articles # Required, a string collection name to access firestore database
  apiKey: # Required
  projectId: # Required


# 网站访问量统计（不蒜子）
# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
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: far fa-eye

搜索服务设置

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
# ---------------------------------------------------------------
# 搜索服务设置
# Search Services
# See: https://theme-next.js.org/docs/third-party-services/search-services
# ---------------------------------------------------------------

# Algolia Search
# For more information: https://www.algolia.com
algolia_search:
  enable: false
  hits:
    per_page: 10


# 配置本地搜索
# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: true
  # Preload the search data when the page loads.
  preload: true

聊天服务配置

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
# ---------------------------------------------------------------
# 聊天服务配置
# Chat Services
# See: https://theme-next.js.org/docs/third-party-services/chat-services
# ---------------------------------------------------------------

# A button to open designated chat widget in sidebar.
# Firstly, you need to enable and configure the chat service.
chat:
  enable: false
  icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.

# Chatra is a functional, easy to use piece of chat software for websites.
# For more information: https://chatra.com
# Dashboard: https://app.chatra.io/settings/general
chatra:
  enable: false
  async: true
  id: # Visit Dashboard to get your ChatraID
  #embed: # Unfinished experimental feature for developers. See: https://chatra.com/help/api/#injectto

# Tidio is a powerful, all-in-one customer service tool.
# For more information: https://www.tidio.com
# Dashboard: https://www.tidio.com/panel/dashboard
tidio:
  enable: false
  key: # Public Key, get it from dashboard. See: https://www.tidio.com/panel/settings/developer

# Next 主题 8.18.0 已经移除对 Gitter 的支持
# Gitter is a chat and networking platform.
# For more information: https://gitter.im
#gitter:
#  enable: false
#  room:

CDN 设置

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
# ---------------------------------------------------------------
# CDN 设置
# CDN Settings
# See: https://theme-next.js.org/docs/advanced-settings/vendors
# ---------------------------------------------------------------

vendors:
  # The CDN provider of NexT internal scripts.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Warning: If you are using the latest master branch of NexT, please set `internal: local`
  internal: local
  # The default CDN provider of third-party plugins.
  # Available values: local | jsdelivr | unpkg | cdnjs | custom
  # Dependencies for `plugins: local`: https://github.com/next-theme/plugins
  plugins: cdnjs
  # Custom CDN URL
  # For example:
  # custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
  # custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
  custom_cdn_url:

# 静态资源文件配置，使用 CDN 加速
# Assets
# Accelerate delivery of static files using a CDN
# The js option is only valid when vendors.internal is local.
css: css
js: js
images: images

我做了哪些DIY

footer.njk 文件路径：blog\node_modules\hexo-theme-next\layout\_partials\footer.njk

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
{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  {%- if theme.busuanzi_count.total_visitors %}
    <span class="post-meta-item" id="busuanzi_container_site_uv">
      <span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_visitors_icon }}"></i>
      </span>
      <span class="site-uv" title="{{ __('footer.total_visitors') }}">
       本站访客数：  <span id="busuanzi_value_site_uv"></span> 人次
      </span>
    </span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_views %}
    <span class="post-meta-item" id="busuanzi_container_site_pv">
      <span class="post-meta-item-icon">
        <i class="{{ theme.busuanzi_count.total_views_icon }}"></i>
      </span>
      <span class="site-pv" title="{{ __('footer.total_views') }}">
        本站总访问量： <span id="busuanzi_value_site_pv"></span> 次
      </span>
    </span>
  {%- endif %}
</div>
{%- endif %}

zh-CN.yml 文件路径：blog\node_modules\hexo-theme-next\languages\zh-CN.yml

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
---
name: 简体中文
title:
  archive: 归档
  category: 分类
  tag: 标签
  links: 友链
  schedule: 日程表
  bangumis: 番剧
  cinemas: 电视剧
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  links: 友链
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404
  bangumis: 番剧
  cinemas: 电视剧
  happy: 文娱
sidebar:
  overview: 站点概览
  toc: 文章目录
  links: 友链

giscus 文件路径：blog\_config.next.yml

友情提醒：安装组件版本，npm install hexo-next-giscus@1.0.3 --save

giscus 详细用法，请参考giscus官方中文文档

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
# giscus 评论组件
# github仓库地址： https://github.com/giscus/giscus
# giscus 配置生成地址：https://giscus.app/zh-CN 
# giscus next 主题插件仓库地址：https://github.com/next-theme/hexo-next-giscus
# 如果你和我一样使用 next 主题版本为 v8.19.1，giscus 版本配置为：1.0.3
# 安装组件：npm install hexo-next-giscus@1.0.3 --save
giscus:
  enable: true
  repo: cnwangk/blog-talk # Github repository name | Github 仓库名称
  repo_id: R_kgDOJg6bLQ # Github repository id | Github 仓库 id
  category: Announcements  # Github discussion category | Github 讨论模块组件类别
  category_id: DIC_kwDOJg6bLc4CWXpT # Github discussion category id  | Github 讨论模块组件类别 id
  # Available values: pathname | url | title | og:title |支持映射方式 pathname | url | title | og:title
  mapping: pathname  
  # Available values: 0 | 1
  reactions_enabled: 1
   # Available values: 0 | 1
  emit_metadata: 1
  # Available values: light | dark | dark_high_contrast | transparent_dark | preferred-color-scheme
  theme: light
  # Available values: en | zh-CN  | 支持语言：en(英文)，zh-CN(中文)
  lang: zh-CN
  # Place the comment box above the comments
  input_position: bottom
  # Load the comments lazily
  loading: lazy

到此为止，就是本篇博文的全部内容了，希望对你有所帮助哟！

絮絮叨叨

静下心来，才发现原来不会的还有很多。

一分耕耘，一分收获。莫问收获，但问耕耘。

多总结，你会发现，自己的知识宝库越来越丰富。

如果你有幸看到这篇博文，虽然很基础，但希望对你的学习和工作有所帮助哟！

我始终坚信，对别人有帮助（参考价值）的文章，在合适的时间被有需要的人看到，那就是一篇好文章。

感谢

感谢这些平台提供友好的服务支持，我才可以愉快的打造个人博客站点。

  • github pages
  • hexo & hexo-theme-next & giscus
  • vercel：https://vercel.com/
  • netlify：https://app.netlify.com/
  • cloudflare：https://dash.cloudflare.com/

—END—