个人博客搭建之四：hexo更换主题

Posted on Edited on In , Changyan: Symbols count in article: 7k Reading time ≈ 6 mins.

hexo博客框架有大量可供选择的主题，本文以themes/next为例，梳理更换主题的基本操作步骤和设置方法：

  • 下载主题
  • 站点配置
  • 主题配置
  • 应用更新
  • 上传更新

参考链接

  1. 枫叶知乎博客学习专栏：八篇文章构成的知乎专栏，作者枫叶，手把手指导从github建立个人博客，以及相关美化操作
  2. Git官网：Git is a free and open source distributed version control system ... [一个免费开源的分布式版本控制系统]
  3. Git维基：Git的wikipedia页面
  4. My GitHub：我的GitHub主页
  5. Node.js：一个基于 Chrome V8 引擎 的 JavaScript 运行时环境 a JavaScript runtime built on Chrome's V8 JavaScript engine
  6. hexo：一个“快速、简洁且高效”的博客框架，支持Markdown（GFM所有功能），基于Node.js，可一键部署到 GitHub Pages 或其他平台
  7. My Blog：学习搭建的博客链接（GitHub）
  8. themes/next：用在hexo博客框架上的一个主题设计

开始条件

本人具备的资源和知识条件（2022-5-11）

  1. Github已有注册账户，可方便登录访问；
  2. 原购买一个域名nyjing.online，闲置中；
  3. MarkDown基本了解；
  4. HTML、CSS知道些皮毛；
  5. JavaScript等基本不懂。
  6. Git工具了解一些：《个人博客搭建之一：git工具》
  7. Git与GitHub已绑定：《个人博客搭建之二：Git绑定GitHub基本操作》
  8. 安装Node.js(JavaScript运行时)和Hexo(基于Node.js的博客框架)并发布到GitHub： 《个人博客搭建之三：安装node.js和hexo》

Hexo博客设置主题

对应枫叶知乎博客学习专栏的第7篇;

日期：2022-5-11

目标主题：themes/next v7.8.0

下载主题

博客根目录Blog文件夹，右键Git Bash，输入如下代码将next主题下载到目录Blog/themes：git clone https://github.com/theme-next/hexo-theme-next themes/next 

1
2
3
4
5
6
7
JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
Cloning into 'themes/next'...
remote: Enumerating objects: 12582, done.
remote: Total 12582 (delta 0), reused 0 (delta 0), pack-reused 12582
Receiving objects: 100% (12582/12582), 8.03 MiB | 163.00 KiB/s, done.
Resolving deltas: 100% (7990/7990), done.

站点配置

打开根目录下的_config.yml(称为站点配置文件)，修改主题（注意冒号后都要有空格）： 

1
2
3
4
5
6
7
8
9
10
11
12
13
# Site
title: Nothing but Blogging
subtitle: 'Learning, Thinking & Doing'
description: '千古兴亡多少事？悠悠。不尽长江滚滚流。'
keywords:
author: Jun Jing
language: zh-CN           #主题语言 en | zh-CN
timezone: 'Asia/Shanghai' #中国的时区

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next   #主题 next | landscape
> 主题语言主要看themes/next/language中的简体中文是 zh-CN 还是 zh-Hans

主题配置

打开目录Blog/themes/next/下的_config.yml（称为主题配置文件），只要将你选的主题前的#删除就行了；同时可配置Dark mode为 true 或 false > next主题有四种，如依次为Muse、Mist、Pisces、Gemini 

1
2
3
4
5
6
7
8
9
10
11
12
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

# Dark Mode
darkmode: true

应用更新

回到根目录打开Git Bash，输入如下三条命令：hexo clean, hexo g, hexo s，本地打开 http://localhost:4000/

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
JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
$ hexo clean
INFO  Validating config
INFO  Deleted database.
INFO  Deleted public folder.

JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
$ hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 231 ms
(node:24780) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:24780) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:24780) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:24780) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:24780) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:24780) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
INFO  Generated: archives/index.html
INFO  Generated: index.html
INFO  Generated: images/algolia_logo.svg
INFO  Generated: archives/2022/05/index.html
INFO  Generated: images/apple-touch-icon-next.png
INFO  Generated: images/avatar.gif
INFO  Generated: images/cc-by-nc-nd.svg
INFO  Generated: images/cc-by-nc-sa.svg
INFO  Generated: images/cc-by-sa.svg
INFO  Generated: images/cc-by-nd.svg
INFO  Generated: images/cc-by-nc.svg
INFO  Generated: images/cc-by.svg
INFO  Generated: images/favicon-32x32-next.png
INFO  Generated: images/cc-zero.svg
INFO  Generated: images/favicon-16x16-next.png
INFO  Generated: images/logo.svg
INFO  Generated: js/bookmark.js
INFO  Generated: css/main.css
INFO  Generated: js/schemes/muse.js
INFO  Generated: archives/2022/index.html
INFO  Generated: lib/anime.min.js
INFO  Generated: lib/velocity/velocity.min.js
INFO  Generated: js/motion.js
INFO  Generated: js/algolia-search.js
INFO  Generated: js/local-search.js
INFO  Generated: js/schemes/pisces.js
INFO  Generated: js/utils.js
INFO  Generated: js/next-boot.js
INFO  Generated: lib/font-awesome/css/all.min.css
INFO  Generated: 2022/05/10/hello-world/index.html
INFO  Generated: lib/velocity/velocity.ui.min.js
INFO  Generated: lib/font-awesome/webfonts/fa-regular-400.woff2
INFO  Generated: lib/font-awesome/webfonts/fa-brands-400.woff2
INFO  Generated: lib/font-awesome/webfonts/fa-solid-900.woff2
INFO  34 files generated in 641 ms

JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
$ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
(node:17728) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:17728) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:17728) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:17728) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:17728) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:17728) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
INFO  Bye!

==存在问题==：Site设置的内容（title|subtitle|description）显示中文乱码！ 检查发现在生成的静态文件中已经乱码了。推测原因可能是 UltraEdit 编辑_config.yml时改变了文件存储的编码格式，导致 hexo g 过程中读取为乱码。 解决：换为 Visual Studio Code 重新编辑_config.yml编辑文档，纠正乱码，再发布OK！

上传更新

发布到GitHub，输入如下三条命令：hexo clean, hexo g, hexo d，打开 My Blog

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
JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
$ hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 224 ms
...省略
INFO  34 files generated in 659 ms

JING@LAPTOP-DEHH91FV MINGW64 /d/MyStuday/git_codelife/Blog
$ hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
warning: LF will be replaced by CRLF in 2022/05/10/hello-world/index.html.
The file will have its original line endings in your working directory
... 省略
The file will have its original line endings in your working directory
[master 1408e37] Site updated: 2022-05-11 18:10:48
 6 files changed, 27 insertions(+), 27 deletions(-)
Enumerating objects: 31, done.
Counting objects: 100% (31/31), done.
Delta compression using up to 12 threads
Compressing objects: 100% (10/10), done.
Writing objects: 100% (16/16), 1.42 KiB | 1.42 MiB/s, done.
Total 16 (delta 6), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (6/6), completed with 4 local objects.
To https://github.com/nyjingle/nyjingle.github.io.git
   7116a22..1408e37  HEAD -> main
branch 'master' set up to track 'https://github.com/nyjingle/nyjingle.github.io.git/main'.
INFO  Deploy done: git

与本地一致。——通常需手动清除一下浏览器记录再刷新，才能马上看到效果。

主页无问题。 原RSS和搜索框在新主题中不显示了。

注意：hexo d 最后一步可能会报Access错误；如下操作可增加成功概率： 1. 关掉Git Bash，在本地Blog目录下重新右键打开； 2. 输入命令 ssh -T git@github.com 验证ssh连接； 3. 输入下面三个命令发布更新： 

1
2
3
hexo clean
hexo g
hexo d