【Hexo博客系列】No.2 美化Hexo博客，主题安装配置

美化Hexo博客，主题安装配置

这期教程演示将使用一款基于hexo-theme-butterfly修改的主題-安知鱼，安知鱼是一个简洁、美丽的静态hexo主题

项目地址：https://github.com/anzhiyu-c/hexo-theme-anzhiyu
官方文档：https://docs.anheyu.com/initall.html

1.安装主题

1.1. Git 安裝

在博客根目录里安装最新版主题

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

第一次使用需要安装 pug 以及 stylus 的渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --sav

1.2. 应用主题

修改 hexo 配置文件_config.yml，把主题改为anzhiyu

1
theme: anzhiyu

1.3. 覆盖配置

覆盖配置可以使主题配置放置在 anzhiyu 目录之外，避免在更新主题时丢失自定义的配置。

如果你是linux系统就执行以下命令

1
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml

如果你是windows系统就请手动将/themes/anzhiyu/_config.yml复制到根目录下并重命名为_config.anzhiyu.yml即可。

以后如果修改任何主题配置，都只需修改 _config.anzhiyu.yml 的配置即可。

注意：

  • 只要存在于 _config.anzhiyu.yml 的配置都是高优先级，修改原 _config.yml 是无效的。
  • 每次更新主题可能存在配置变更，请注意更新说明，可能需要手动对 _config.anzhiyu.yml 同步修改。
  • 想查看覆盖配置有没有生效，可以通过 hexo g --debug 查看命令行输出。
  • 如果想将某些配置覆盖为空，注意不要把主键删掉，不然是无法覆盖的

1.4. 配置主题与主站配置文件

到这一步主题部署就完成了，就是这么简单！！！

1
2
3
4
5
//本地预览
hexo cl; hexo s

//推送更新上线
hexo cl; hexo g; hexo d

1.5. 生成标签页和分类页

执行以下命令生成标签页

1
hexo new page tags

找到 source/tags/index.md 这个文件，修改添加 type: "tags"

1
2
3
4
5
6
7
---
title: 标签
date: 2024-07-05 03:36:02
type: "tags"
comments: false
top_img: false
---

执行以下命令生成分类页

1
hexo new page categories

找到 source/categories/index.md 这个文件，修改添加 type: "categories"

1
2
3
4
5
6
7
---
title: 分类
date: 2024-07-05 03:36:48
aside: false
top_img: false
type: "categories"
---

剩下的工作就是配置_config.yml和_config.anzhiyu.yml文件，修改博客参数。

2. 配置文章模版

/scaffolds目录下有几个模版文件，其中

  • post.md：新建博文模版
  • page.md：新建标签页模版

post.md模版，仅供参考

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
---
title: {{ title }} 
date: {{ date }} 
updated: 
tags: 
categories: 
keywords: 
description: 
top: 
top_img: 
comments: 
cover: https://img.090227.xyz/file/ae62475a131f3734a201c.png 
toc: 
toc_number: 
toc_style_simple: 
copyright: 
copyright_author: 
copyright_author_href: 
copyright_url: 
copyright_info: 
mathjax: 
katex: 
aplayer: 
highlight_shrink: 
aside: 
swiper_index: 10 
top_group_index: 10 
ai: 
background: "#fff" 
---

<div class="video-container">
[up主专用，视频内嵌代码贴在这]
</div>

<style>
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 * 100%) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

page.md模版，仅供参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: {{ title }} 
date: {{ date }} 
type: 
updated: 
comments: 
description: 
keywords: 
top_img: https://img.090227.xyz/file/ae62475a131f3734a201c.png 
mathjax: 
katex: 
aside: 
aplayer: 
highlight_shrink: 
top_single_background: 
---

更多功能

新建文章

新建博文命令

1
hexo new page 新建的标签页

新建标签页命令

1
hexo new page 新建的标签页

文章置顶

安装插件

1
npm install hexo-generator-topindex --save

设置置顶

给需要置顶的文章加入top参数，如下：

1
2
3
4
5
6
7
8
9
---
title: 每天一个linux命令
date: 2017-01-23 11:41:48
top: 1
categories:
- 运维
tags:
- linux命令
---

如果存在多个置顶文章，top后的参数越大，越靠前。

开启本地搜索

安装插件

你需要安装 hexo-generator-search，根据它的文档去做相应配置

1
npm install hexo-generator-search --save

设置主题配置文件

1
2
3
4
5
local_search:
  enable: true
  preload: false
  CDN:

参数 解释
enable 是否开启本地搜索
preload 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
CDN 搜索文件的 CDN 地址（默认使用的本地链接）

添加任意文件

例如当我们想在网站根目录添加ads.txt文件，来通过站长验证时，我们只需要在/source文件夹下放置该文件即可。

参考资料

https://docs.anheyu.com/initall.html
https://www.fomal.cc/posts/4aa2d85f.html
https://github.com/anzhiyu-c/hexo-theme-anzhiyu/blob/dev/README.md?plain=1
https://blog.csdn.net/COCO56/article/details/103840966