基于Hexo 5.x 创建NexT主题的个人博客

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

花了大概两天的时间，终于把博客从 Jekyll 迁移到了 Hexo，期间淌过了很多的坑，作此记录，以醒来者。

概述

一开始为什么选择 jekyll ?

选择 jekyll 的原因主要是 github 支持推送编译，所以只需要将自己的文章（.md文件）推送到 master 即可部署了，而 Hexo 需要在本地编译好，再上传，所以本机要安装 nodejs，比较麻烦。

为什么会选择从 jekyll 更改到 Hexo 呢？

我的博客从 2018年就开始建立了，最近想着美化一下主题吧，然后就开始配置 jekyll 开发环境，但是 jekyll 它本身只支持 linux, 从网上下载了一个 jekyll 的 windows 安装程序，按照教程安装，然后百般倒腾，就是运行不起来！

好吧，我想，既然你原生支持 linux, 那我下载个 docker 安装你吧，网上一搜，还真有专门针对 pages 的 docker 镜像，安装完成后，还是运行不起来，蛋疼~

不折腾了，直接用 Hexo 吧。

我原来用的是 NexT 主题，所以，在 Hexo 的主题商店一搜，好家伙，恕我以前没见识！

“哇，主题真多”，“哇，插件真多”，“兴奋~”。

好了，话不多说，接下来开开心心地安装 Hexo 加 NexT 主题吧。

安装 Hexo 及 NexT

扫盲

要特别注意的是，咱们从 github 上下载的 NexT 只是 Hexo 的一个主题，它不包含主程序，主程序需要用 Hexo 初始化。

安装 Hexo

查看 Hexo安装官方教程 进行安装

安装 Hexo 时，直接使用 npm install -g hexo-cli 进行安装，不建议采用 进阶安装 方式

用 Hexo 初始化一个博客

假设我的安装目录为：D:\Personal, 博客的目录为：hexo-site

1
2
3
4
5
6
7
8
9
10
11
cd d:
cd D:\Personal
hexo init hexo-site
cd hexo-site
npm install

# 安装 hexo-server，进行本地编译及运行
npm install hexo-server --save

# 安装 hexo-deployer-git,一键部署到 github 等平台
npm install hexo-deployer-git --save

安装完成后目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml // 博客配置文件
├── package.json  // npm包配置文件
├── scaffolds  // 模版文件夹
├── source // 存放用户资源的地方
|   ├── _drafts // 存放草稿
|   └── _posts  // 存放需要编译的文章
└── themes  // 存放主题

官方教程

下载 NexT 主题

hexo 的主题都是放在 themes 目录下，一般每个主题都是一个 Git 仓库，所以，为了方便今后在其它电脑上下载自己的博客仓库进行编译，我们需要把主题作为 hexo 的子模块。

添加子模块

1
git submodule add https://github.com/iissnan/hexo-theme-next themes/next

更新子模块

保持上面的命令行窗口不变，输入以下命令：

1
2
3
4
5
// 更新项目内子模块到最新版本
git submodule update

// 更新子模块为远程项目的最新版本
git submodule update --remote

主题安装完成后的目录如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
D:\Personal\hexo-site
├── _config.yml // 博客配置文件
├── package.json  // npm包配置文件
├── scaffolds  // 模版文件夹
├── source // 存放用户资源的地方
|   ├── _drafts // 存放草稿
|   └── _posts  // 存放需要编译的文章
└── themes  // 存放主题
    ├── next
    |   ├── _config.yml // 主题配置文件
    |   ├── source
    |   ├── ...
    |   └── script
    └── .gitkeep // 让 git 忽略当前文件夹及其子文件夹内所文件和文件夹

关于子模块的使用，可以参考：Git submodule 子模块的管理和使用

启用主题

打开 博客配置文件，搜索 theme 字段，将其改成如下：

1
theme: next

安装主题依赖包

1
2
cd themes/next
npm install

官方安装教程

配置 NexT 主题

我们需要修改 themes\next\_config.yml 来进行主题配置，但是如果直接修改它，会使得今后更新主题时出现冲突情况，所以我们使用 代替主题配置文件 来进行个性化配置。它的文件名格式为：_config.[theme].yml 。

在网站根目录 D:\Personal\hexo-site 新建 _config.next.yml 文件，在里面进行博客配置。

配置优先级

Hexo 在合并主题配置时，Hexo 配置文件（博客配置文件）中的 theme_config 的优先级最高，其次是 _config.[theme].yml 文件，最后是位于主题目录下的 _config.yml 文件。

1
2
3
4
5
6
# _config.yml
theme: "next"
theme_config:
  bio: "My awesome bio"
  foo:
    bar: 'a'
1
2
3
4
# _config.next.yml
logo: "a-cool-image.png"
  foo:
    baz: 'b'
1
2
3
4
5
6
# themes/next/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
  foo:
    baz: 'c'
    bay: 'd'

最终主题配置的输出是：

1
2
3
4
5
6
7
8
9
{
  bio: "My awesome bio",
  logo: "a-cool-image.png",
  foo: {
    bar: "a",
    baz: "b",
    bay: 'd'
  }
}

关键配置

Hexo 和 NexT 安装完成后，还需要进行一些关键的配置，才能有更好的使用体验。

NexT 主题配置：

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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
# _config.next.yml
# 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
  #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,在该文件中修改 css 样式，达到更多的定制化
  style: source/_data/styles.styl

# Schemes，主题类型选择
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

# 打开 menu 中的其它菜单
# 配置教程：https://theme-next.js.org/docs/theme-settings/custom-pages.html
# 打开后，还要进行额外的配置，详见下文
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
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true # 显示文章数量

# 显示返回顶部按钮
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

# 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: 5
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

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


# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: https://i.loli.net/2021/08/13/uOIcVFAlDbYRiCk.png
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

# 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/galensgan || fab fa-github
  简  书: https://www.jianshu.com/u/08760e791f9e || fa fa-book-reader
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #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

# ---------------------------------------------------------------
# Post Settings
# See: https://theme-next.js.org/docs/theme-settings/posts
# ---------------------------------------------------------------

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: true
    another_day: true
  categories: 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 (unsupport animation).
reward_settings:
  # If true, a donate button will be displayed in every article by default.
  enable: true
  animation: true
  comment: Buy me a coffee

reward:
  wechatpay: https://i.loli.net/2021/08/13/JOw9cxomhBAZFW8.png
  alipay: https://i.loli.net/2021/08/13/U2s7gKn1zRw3uP4.png
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
  公众号: https://i.loli.net/2021/08/13/QMRtHE2b4czd7OA.jpg || fab fa-weixin
  简书: https://www.jianshu.com/u/08760e791f9e || fa fa-book-reader
  #Twitter: https://twitter.com/username || fab fa-twitter  
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

# Mermaid tag
# 开启 mermaid 展示
mermaid:
  enable: true
  # Available themes: default | dark | forest | neutral
  theme: forest

# 代码块设置
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: github
    dark: github
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: flat

# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
# 该设置使得切换页面不会重复刷新，提高响应速度
pjax: true

配置 About，Tags，Categories 页面

初始化的博客只有首页和归档两个菜单，一般我们还需要添加关于、标签、分类菜单栏，可以通过下列步骤进行增加。

**修改 _config.next.yml 配置**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# _config.next.yml

# ... 其它配置

# 打开 menu 中的其它菜单
# 配置教程：https://theme-next.js.org/docs/theme-settings/custom-pages.html
# 打开后，还要进行额外的配置，详见下文
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
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

新建页面

在终端中，将目录定位到博客根目录（D:\Personal\hexo-site）

1
2
3
4
5
6
7
8
# 定位到根目录
cd d:
cd D:\Personal\hexo-site

# 新建页面
hexo new page about
hexo new page tags
hexo new page categories

修改页面类型

通过上述命令后，会在博客根目录下的 source 目录中生成 about、tags、categories 三个目录，每个目录中分别有一个 index.md 文件，打开该文件，并添加 type 属性。以 source/tags/index.md 为例:

1
2
3
4
5
6
---
title: 标签
date: 2021-08-13 00:09:00
type: tags
comments: false
---

每个菜单的类型如下：

菜单 type
about about
tags tags
categories categories

显示优化

通过上述步骤后，就可以运行 hexo clean && hexo g && hexo s，然后在浏览器中查看效果了（网址：http://127.0.0.1:4000）。

但是，当某些界面显示不符合我们的审美时，我们也可以对样式进行自定义。

打开自定义样式配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# _config.next.yml

# 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
  #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,在该文件中修改 css 样式，达到更多的定制化
  style: source/_data/styles.styl

新建 source/_data/styles.styl 文件

在 styles.styl 文件中自定义样式

下面是我做的一点更改，以供参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 侧边目录行距
.post-toc .nav-item {
    line-height: 2;
}

// 链接
p a {
    color: #fc6423;
}

// 头部没有进度条时的黑框
.headband {
    display: none;
}

// 侧边栏名称底色
.site-brand-container {
    background: #333333c7;
}

// 边栏阅读进度背景色
.back-to-top.back-to-top-on {
    background-color: #fc642380;
}

插件推荐

到上面一步为止，咱们的博客已经处于生产水平了，正常使用完全没问题了，如果不感兴趣，可以直接跳到 部署 章节。

hexo-enhancer

hexo-enhancer是一个 Hexo 功能增强插件。它可以自动生成日期，标题，标签等等，在使用中很方便。

官方网址：https://sulin.me/2019/Z726F8.html

hexo-uuid

给文章添加设置一个永久链接，这样文章变动后，链接将不会改变。

官方网址：https://www.npmjs.com/package/hexo-uuid

部署

本人采用 hexo-deployer-git 来实现一键部署。

按 官方说明文档 配置即可。

其它参考文档

theme-next