第二期：安装AnZhiYu主题并个性化配置

[]

安装AnZhiYu主题

我的电报群（进群实时交流）：链接
我的电报官方频道：链接

HEXO主题有410种点击跳转

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 --save

1.2. 使用主题

修改 Hexo 配置文件 _config.yml，将主题改为 anzhiyu。

1
theme: anzhiyu

1.3. 覆盖配置

覆盖配置可将主题配置放置在 anzhiyu 目录之外，避免在更新主题时丢失自定义的配置。通过 Npm 安装主题的用户可忽略，其他用户建议学习使用。

  • macOS/Linux 在博客根目录运行：
1
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml
  • Windows 用户复制 /themes/anzhiyu/_config.yml 到 Hexo 根目录，并重命名为 _config.anzhiyu.yml。

后续修改主题配置只需更新 _config.anzhiyu.yml。

注意事项

  • _config.anzhiyu.yml 中的配置优先级高于 _config.yml。
  • 每次更新主题时可能存在配置变更，请查看更新说明，并手动同步修改 _config.anzhiyu.yml。
  • 可通过 hexo g --debug 查看覆盖配置是否生效。
  • 若要将某些配置覆盖为空，注意不要删除主键。

1.4. 到这一步主题部署就完成了！别忘了推送更新上线

1
2
3
4
//本地预览
hexo cl; hexo s
//推送更新上线
hexo cl; hexo g; hexo d

2 功能特性

2.1. 生成标签页和分类页

生成标签页：

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-10-22 03:36:48
aside: false
top_img: false
type: "categories"
---

接下来，配置 _config.yml 和 _config.anzhiyu.yml 文件。

2.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
---
title: {{ title }} #【必需】页面标题
date: #【必需】页面创建日期
updated: #【可选】页面更新日期
tags: #【可选】文章标签
categories: #【可选】文章分类
keywords: #【可选】文章关键字
description: #【可选】文章描述
top: # 1 置顶
top_img: #【可选】文章顶部图片
comments: #【可选】显示文章评论模块(默认 true)
cover: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】文章缩略图
toc: #【可选】显示文章 TOC
toc_number: #【可选】显示 toc_number
toc_style_simple: #【可选】显示 toc 简洁模式
copyright: #【可选】显示文章版权模块
copyright_author: #【可选】文章版权作者
copyright_author_href: #【可选】作者链接
copyright_url: #【可选】版权链接
copyright_info: #【可选】版权声明文字
mathjax: #【可选】显示 mathjax
katex: #【可选】显示 katex
aplayer: #【可选】加载 aplayer 的 js 和 css
highlight_shrink: #【可选】配置代码框是否展开
aside: #【可选】显示侧边栏 (默认 true)
swiper_index: 10 #【可选】首页轮播图配置
top_group_index: 10 #【可选】首页右侧卡片组配置
ai: #【可选】文章 ai 摘要
background: "#fff" #【可选】文章主色
---
<div class="video-container">[视频内嵌代码]</div>
<style>.video-container { position: relative; padding-top: 56.25%; } .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: #【必需】页面创建日期
type: #【必需】标签、分类等
updated: #【可选】页面更新日期
comments: #【可选】显示页面评论模块
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】页面顶部图片
mathjax: #【可选】显示 mathjax
katex: #【可选】显示 katex
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】加载 aplayer 的 js 和 css
highlight_shrink: #【可选】配置代码框是否展开
top_single_background: #【可选】部分页面的顶部模块背景图片
---

3 开启本地搜索

安装插件

安装 hexo-generator-search：

1
npm install hexo-generator-search --save

设置主题配置文件

在配置文件中添加：

1
2
3
4
local_search:
  enable: true
  preload: false
  CDN:
参数 解释
enable 是否开启本地搜索
preload 预加载，进入网页后自动加载搜索文件
CDN 搜索文件的 CDN 地址（默认使用本地链接）

个性化配置

修改网站图标：

  • 在线制作ico图标：链接

修改以下位置的 favicon.ico：

  • themes/anzhiyu/source/img/favicon.ico
  • .deploy_git/img
  • public/img
  • .deploy_git

替换为自己的图标，注意原图标大小。

将 themes/anzhiyu/source/img/siteicon/ 下的 32.png 和 16.png 替换为自己的图标，注意原图标大小。

保存后，运行以下指令更新：

1
2
3
hexo cl
hexo g
hexo d

4 新建文章

新建博文命令

1
hexo new 这是一篇新的博文

文章置顶

安装插件

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 后的参数越大，越靠前。

添加任意文件

若想在网站根目录添加 ads.txt 文件，只需在 /source 文件夹下放置该文件即可。

更多请参考安之鱼主题官方文档：链接