第二期：从零开始安装AnZhiYu主题，Hexo博客个性化配置全攻略

第二期: 从零开始安装AnZhiYu主题, Hexo博客个性化配置全攻略

1. 安装并使用AnZhiYu主题

  1. Git 安装
1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
  1. 通过软件包安装（点击跳转下载软件包）
1
2
3
4
5
6
7
8
9
10
11
# 下载软件包地址
https://github.com/anzhiyu-c/hexo-theme-anzhiyu/tree/1.6.14

# Windows上传文件到vps服务器上
scp hexo-theme-anzhiyu-1.6.14.zip root@IP地址:/root/hexo/blog-demo/themes/.

# 压缩包解压
unzip hexo-theme-anzhiyu-1.6.14.zip

# 文件重命名
mv hexo-theme-anzhiyu-1.6.14/ anzhiyu
  1. 安装 Pug 和 Stylus 渲染插件
1
npm install hexo-renderer-pug hexo-renderer-stylus --save
  1. 修改 Hexo 配置文件 _config.yml，将主题改为 anzhiyu
1
2
3
4
5
 96 # Extensions
 97 ## Plugins: https://hexo.io/plugins/
 98 ## Themes: https://hexo.io/themes/
 99 #theme: landscape
100 theme: anzhiyu

  1. 覆盖配置可将主题配置放置在 anzhiyu 目录之外，避免在更新主题时丢失自定义的配置。后续修改主题配置只需更新 _config.anzhiyu.yml
1
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyubash

  1. 注意事项

    • _config.anzhiyu.yml 中的配置优先级高于 _config.yml

    • 每次更新主题时可能存在配置变更，请查看更新说明，并手动同步修改 _config.anzhiyu.yml

    • 可通过 hexo g --debug 查看覆盖配置是否生效

    • 若要将某些配置覆盖为空，注意不要删除主键

  2. 推送更新上线

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

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

2. 功能特性

  1. AnZhiYu官方文档

2.1 生成标签页和分类页

  1. 生成标签页
    1
    hexo new page tags

  1. 找到 source/tags/index.md 文件，添加 type: "tags"
1
2
3
4
5
6
7
---
title: 标签
date: 2024-11-26 12:21:37
type: "tags"
comments: false
top_img: false
---

  1. 生成分类页
1
hexo new page categories

  1. 找到 source/categories/index.md 文件，添加 type: "categories"
1
2
3
4
5
6
7
8
9
[root@iZf8zcdepn65ymcadi95fjZ blog-demo]# cat source/categories/index.md 
---
title: 分类页
date: 2024-11-26 12:25:17
aside: false
top_img: false
type: "categories"
---
[root@iZf8zcdepn65ymcadi95fjZ blog-demo]#

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

  1. 推送更新上线（每次改动都建议推送更新上线一下）
1
2
3
4
5
//本地预览
hexo cl; hexo s

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

2.2 开启本地搜索

  1. 安装插件
1
2
# 安装 hexo-generator-search
npm install hexo-generator-search --save
  1. 设置主题配置文件
1
2
3
4
local_search:
  enable: true
  preload: false
  CDN:

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

2.3 配置文章模板

  1. 默认 /scaffolds 目录下有几个模板文件

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

  2. 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:  #【可选】文章缩略图
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>
  1. 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:  #【可选】页面顶部图片
mathjax: #【可选】显示 mathjax
katex: #【可选】显示 katex
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】加载 aplayer 的 js 和 css
highlight_shrink: #【可选】配置代码框是否展开
top_single_background: #【可选】部分页面的顶部模块背景图片
---

3. 个性化配置

3.1 修改网站图标

1
2
3
138 # Favicon（网站图标）
139 # favicon: /favicon.ico
140 favicon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/web-logo.ico

3.2 网站资料

编辑 _config.yml

1
2
3
4
5
6
7
8
 5 # Site
 6 title: 魔法信息堡
 7 subtitle: '生活明朗，万物可爱'
 8 description: ''
 9 keywords:
10 author: zetman
11 language: cn
12 timezone: ''

3.3 导航配置

设置一个警告页

1
hexo new page Warning

1
2
3
4
5
6
7
8
1 menu:
2    文章:
3      隧道: /archives/ || anzhiyu-icon-box-archive
4      分类: /categories/ || anzhiyu-icon-shapes
5      标签: /tags/ || anzhiyu-icon-tags
6 
7    警示页:
8      警告: /Warning/ || anzhiyu-icon-shoe-prints1

3.4 修改文章路径

编辑 _config.yml

1
2
17 # permalink: :year/:month/:day/:title/
18 permalink: article/:title/

3.5 导航栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
26 # nav相关配置
27 nav:
28   enable: true
29   travelling: false
30   clock: false
31   menu:
32     - title: 网页
33       item:
34         - name: 博客
35           link: https://blog.zetman.cn/
36           # icon: /img/favicon.ico
37           icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/web-logo.ico
38     - title: 项目
39       item:
40         - name: 魔法信息堡图床
41           link: https://github.com/zetman-lz/PicGo
42           # icon: https://image.anheyu.com/favicon.ico
43           icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/jsdelivr.ico
44 
45         - name: LobeChat聊天
46           link: https://lobechat.zetman.top/
47           # icon: https://image.anheyu.com/favicon.ico
48           icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/lobechat.ico

3.6 作者卡片（状态）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
82 # 作者卡片 状态
83 author_status:
84   enable: true
85   # 可以是任何图片，建议放表情包或者emoji图片，效果都很好，[表情包速查](https://emotion.xiaokang.me/)
86   statusImg: "https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/dog.png"
87   skills:
88     - 🤖️  + 🖥️  = 与科技同行
89     - 🔍  + 💡  = 分享智慧火
90     - 🏠  + 📱  = 家中控制者
91     - 🔨  + 🎨  = 设计开发合
92     - 🤝  + 🧠  = 交互设计师
93     - 🏃  + 🏃d<200d>♂️ = 行动梦想家
94     - 🧱  + 🏗️  = 团队推动力
95     - 💢  + 🔥  = 行动胜言语

3.7 头像

1
2
3
4
161 # Avatar (头像)
162 avatar:
163   img: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/Eye.gif
164   effect: false

3.8 加载动画

1
2
3
4
5
6
7
8
9
10
11
12
804 # Loading Animation (加载动画)
805 preloader:
806   enable: true
807   # source
808   # 1. fullpage-loading
809   # 2. pace (progress bar)
810   # else all
811   source: 3
812   # pace theme (see https://codebyzach.github.io/pace/)
813   pace_css_url:
814   # avatar: https://npm.elemecdn.com/anzhiyu-blog-static@1.0.4/img/avatar.jpg # 自定加载动画义头像
815   avatar: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/load.gif

3.9 设置404页面

1
2
3
4
5
6
192 # A simple 404 page
193 error_404:
194   enable: true
195   subtitle: "请尝试站内搜索寻找文章"
196   # background: https://bu.dusays.com/2023/05/08/645907596997d.gif
197   background: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/404.gif

3.10 打赏图片

1
2
3
4
5
6
7
8
9
10
266 # Sponsor/reward
267 reward:
268   enable: true
269   QR_code:
270     - img: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/weixing.png
271       link:
272       text: 微信
273     - img: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/zhifubao.png
274       link:
275       text: 支付宝

3.11 左下角音乐球

1
2
3
4
5
6
7
8
9
1149 # 左下角音乐配置项
1150 # https://github.com/metowolf/MetingJS
1151 nav_music:
1152   enable: false
1153   console_widescreen_music: false # 宽屏状态控制台显示音乐而不是标签 enable为true 控制台依然会显示
1154   id: 8152976493
1155   server: netease
1156   volume: 0.7 # 默认音量
1157   all_playlist: https://y.qq.com/n/ryqq/playlist/8802438608

3.12 欢迎语配置

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
1176 # 欢迎语配置
1177 greetingBox:
1178   enable: true #开启后必须配置下面的list对应的时间段，不然会出现小白条
1179   default: 晚上好👋
1180   list:
1181     - greeting: 晚安好梦
1182       startTime: 0
1183       endTime: 5
1184     - greeting: 早上好鸭👋 , 祝你一天好心情！
1185       startTime: 6
1186       endTime: 9
1187     - greeting: 上午好👋 , 状态很好，鼓励一下～
1188       startTime: 10
1189       endTime: 10
1190     - greeting: 11点多啦, 在坚持一下就吃饭啦～
1191       startTime: 11
1192       endTime: 11
1193     - greeting: 午安👋 , 宝贝
1194       startTime: 12
1195       endTime: 14
1196     - greeting: 🌈 充实的一天辛苦啦！
1197       startTime: 14
1198       endTime: 18
1199     - greeting: 19点喽, 奖励一顿丰盛的大餐吧🍔 。
1200       startTime: 19
1201       endTime: 19
1202     - greeting: 晚上好👋 , 在属于自己的时间好好放松😌 ~
1203       startTime: 20
1204       endTime: 24

3.13 网站运行时间

1
2
3
4
5
881 # Time difference between publish date and now (网页运行时间)
882 # Formal: Month/Day/Year Time or Year/Month/Day Time
883 runtimeshow:
884   enable: true
885   publish_date: 11/24/2024 00:00:00

3.14 关闭微信公众号

1
2
3
4
5
6
7
836   card_announcement:
837     enable: false
838     content: 欢迎来看我的博客鸭~
839   card_weixin:
840     enable: false
841     face: https://bu.dusays.com/2023/01/13/63c02edf44033.png
842     backFace: https://bu.dusays.com/2023/05/13/645fa415e8694.png

3.15 网站上线时间

1
2
3
4
5
6
446 # Footer Settings
447 # --------------------------------------
448 footer:
449   owner:
450     enable: true
451     since: 2024

3.16 首页顶部相关配置

1
2
3
4
5
6
7
8
9
10
11
12
hexo new page Magic
hexo new page Tools
hexo new page Notes

cd source/
mv Magic/ categories/.
mv Tools/ categories/.
mv Notes/ categories/.

vim source/categories/Magic/index.md
vim source/categories/Tools/index.md
vim source/categories/Notes/index.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
1080 # 首页顶部相关配置
1081 home_top:
1082   enable: true # 开关
1083   timemode: date #date/updated
1084   title: 生活明朗
1085   subTitle: 万物可爱。
1086   siteText: zetman.cn
1087   category:
1088     - name: 魔法上网
1089       path: /categories/Magic/
1090       shadow: var(--anzhiyu-shadow-blue)
1091       class: blue
1092       icon: anzhiyu-icon-dove
1093     - name: 工具推荐
1094       path: /categories/Tools/
1095       shadow: var(--anzhiyu-shadow-red)
1096       class: red
1097       icon: anzhiyu-icon-fire
1098     - name: 学习笔记
1099       path: /categories/Notes/
1100       shadow: var(--anzhiyu-shadow-green)
1101       class: green
1102       icon: anzhiyu-icon-book
1103   default_descr: 再怎么看我也不知道怎么描述它的啦！
1104   swiper:
1105     enable: false
1106     swiper_css: https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.css #swiper css依赖
1107     swiper_js: https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.js #swiper js依赖
1108   banner:
1109     tips: 捣鼓什么！！！
1110     title: 随便看看
1111     image: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/654.gif
1112     link: blog.zetman.cn

3.17 首页技能点配置

1
2
3
4
1256 # 首页随便逛逛people模式 而非技能点模式，关闭后为技能点模式需要配置creativity.yml
1257 peoplecanvas:
1258   enable: false
1259   img: https://upload-bbs.miyoushe.com/upload/2024/07/27/125766904/ba62475f396df9de3316a08ed9e65d86_568095863226805339     9..png

1
2
3
cd source/_data/

cat creativity.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
41
42
43
44
45
46
47
48
49
50
- class_name: 开启创造力
  creativity_list:
    - name: Java
      color: "#fff"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/java.jpg 
    - name: Docker
      color: "#57b6e6"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/docker.png 
    - name: Photoshop
      color: "#4082c3"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/photoshop.png 
    - name: Node
      color: "#333"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/node.svg 
    - name: Webpack
      color: "#2e3a41"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/webpack.png 
    - name: Pinia
      color: "#fff"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/pinia.svg 
    - name: Python
      color: "#fff"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/python.png 
    - name: Vite
      color: "#937df7"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/vite.svg 
    - name: Flutter
      color: "#4499e4"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/Flutter.png 
    - name: Vue
      color: "#b8f0ae"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/vue.png 
    - name: React
      color: "#222"
      icon: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K
    - name: CSS3
      color: "#2c51db"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/css3.png 
    - name: JS
      color: "#f7cb4f"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/js.png 
    - name: HTML
      color: "#e9572b"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/html.png 
    - name: Git
      color: "#df5b40"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/git.webp 
    - name: Apifox
      color: "#e65164"
      icon: https://cdn.jsdelivr.net/gh/zetman-lz/PicGo@main/apifox.png

3.18 鼠标点击烟火

1
2
3
4
745 # Mouse click effects: Heart symbol (鼠标点击效果: 爱心)
746 click_heart:
747   enable: false
748   mobile: false

3.19 社交图标设置

1
2
3
4
5
6
75 # social settings (社交图标设置)
76 # formal:
77 #   name: link || icon
78 social:
79   Github: https://github.com/zetman-lz || anzhiyu-icon-github
80   BiliBili: https://space.bilibili.com/473987590 || anzhiyu-icon-bilibili

3.20 侧边栏

1
843     description: 欢迎来到魔法信息堡, 希望你在这里找到所需的知识和教程, 开启一段充满魔法的奇妙之旅!

3.21 代码块配置

1
2
3
4
5
6
59 highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
60 highlight_copy: true # copy button
61 highlight_lang: true # show the code language
62 highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and      hide the button
63 highlight_height_limit: 330 # unit: px
64 code_word_wrap: false

3.22 右下角链接

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
531   footerBar:
532     enable: true
533     authorLink: /
534     cc:
535       enable: false
536       link: /copyright
537     linkList:
538       - link: https://github.com/
539         text: GitHub
540 
541       - link: https://dash.cloudflare.com/
542         text: Cloudflare
543 
544       - link: https://picgo.github.io/PicGo-Doc/
545         text: PicGo
546 
547       - link: https://twikoo.js.org/
548         text: Twikoo
549 
550       - link: https://www.mongodb.com/zh-cn
551         text: MongoDB
552 
553       - link: https://vercel.com/
554         text: Vercel
555 
556       - link: https://www.oplog.cn/qexo/
557         text: Qexo