No.2 安知鱼主题美化，让你的博客更上一层楼！

总览

  1. 安装AnZhiYu主题
  2. 配置主题
  3. 进行美化

安知鱼主题

在这期教程中，我将会使用基于hexo-theme-butterfly修改的安知鱼主题 ,是一个简洁、美丽的静态Hexo主题。
项目地址：https://github.com/anzhiyu-c/hexo-theme-anzhiyu
官方文档：https://docs.anheyu.com/

1.安装主题

1.1 Git安装

在你的博客根目录下打开Git Bash，键入以下命令来安装安知鱼主题：

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

如果安装不上可以使用以下URL代理安装：

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

1.2 安装Pug和Stylus渲染插件

npm install hexo-renderer-pug hexo-renderer-stylus --save

1.3 应用主题

打开Hexo根目录下的config.yml , 找到以下配置项，把主题改为anzhiyu ：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu

1.4 覆盖配置

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

  • MacOS/Linux在博客根目录运行:
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml
  • Windows复制[BlogRoot]/themes/anzhiyu/_config.yml 此文件到Hexo根目录，并重命名为_config.anzhiyu.yml 。

注意

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

1.5 本地预览

hexo cl
hexo g
hexo s

此时就能看到效果了。

如果不会的可以去看一下安知鱼大佬的官方教程视频

1.6 标签页配置

  1. 在你的博客根目录下打开终端，键入:
hexo new page tags
  1. 找到source/tags/index.md 这个文件，然后修改这个文件:记得添加type:tags :
---
title: 标签
date: 2021-04-06 12:01:51
type: "tags"
comments: false
top_img: false
---
参数 解释
type 【必须】页面类型，必须为 tags
comments 【可选】是否显示评论
top_img 【可选】是否显示顶部图
orderby 【可选】排序方式：random/name/length
order 【可选】排序次序：1, asc for ascending; -1, desc for descending

1.7 分类页配置

  1. 在你的博客根目录下打开终端，键入:
hexo new page categories
  1. 找到source/categories/index.md 这个文件，然后修改这个文件:记得添加type:categories :
---
title: 分类
date: 2022-02-23 17:56:00
aside: false
top_img: false
type: "categories"
---

2.配置文章模板

[BlogRoot]/scaffolds 目录下有几个模版文件，其中：
  • post.md ：新建文章的模版
  • page.md ：新建标签页的模版
post.md模板，仅供参考： 
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
updated: #【可选】页面更新日期
tags: #【可选】文章标签
categories: #【可选】文章分类
keywords: #【可选】文章关键字
description: #【可选】文章描述
top: # 1 置顶
top_img: #【可选】文章顶部图片,要么留空要么填写地址，写true或者false会报错
comments: #【可选】显示文章评论模块(默认true)
cover: #【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
toc: #【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number: #【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple: #【可选】显示toc简洁模式
copyright: #【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author: #【可选】文章版权模块的文章作者
copyright_author_href: #【可选】文章版权模块的文章作者链接
copyright_url: #【可选】文章版权模块的文章作者链接
copyright_info: #【可选】文章版权模块的版权声明文字
mathjax: #【可选】显示mathjax(当设置mathjax的per_page: false 时，才需要配置，默认false)
katex: #【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认false)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考[安知鱼音乐馆](https://docs.anheyu.com/page/music.html)配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
aside: #【可选】显示侧边栏 (默认true)
swiper_index: 10 #【可选】首页轮播图配置index索引，数字越小越靠前
top_group_index: 10 #【可选】首页右侧卡片组配置, 数字越小越靠前
ai: #【可选】文章AI摘要
background: "#fff" #【可选】文章主色，必须是16进制颜色且有6位，不可缩减，例如#ffffff 不可写成#fff
---
page.md模板，仅供参考： 
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
type: #【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated: #【可选】页面更新日期
comments: #【可选】显示页面评论模块(默认true)
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img: #【可选】页面顶部图片
mathjax: #【可选】显示mathjax(当设置 mathjax的per_page: false时，才需要配置，默认false)
katex: #【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认false)
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】在需要的页面加载aplayer的js和css,请参考[安知鱼音乐馆](https://docs.anheyu.com/page/music.html)配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
top_single_background: #【可选】部分页面的顶部模块背景图片
---

3.站点配置

3.1 语言

修改站点配置文件_config.yml ，不是主题配置文件。
默认语言是en

主题支持三种语言

  • default(en)
  • zh-CN (简体中文)
  • zh-TW (繁体中文)

3.2 网站资料

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改博客根目录的_config.yml 。

3.3 文章置顶(推荐)

安装插件：

npm install hexo-generator-topindex --save

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

---
title: 这是一篇文章
cover: https://image.xd520.us.kg/file/1753859413747_X0_6rTZl.jpg
background: '#0059ffff'
tags: Hello World
categories: Hello World
top_img: https://image.xd520.us.kg/file/1753859413747_X0_6rTZl.jpg
date: 2025-07-29 15:14:38
top: 1 #置顶参数
---

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

3.4 文章版权

为你的博客文章展示文章版权和许可协议。
修改主题配置文件 :

post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

由于Hexo 4.1开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置decode:true 来显示中文网址。
如果有文章（例如：转载文章）不需要显示版权，可以在文章Front-matter 单独设置:

---
copyright: false
---

3.5 TOC(文章目录)

在文章页，会有一个目录，用于显示TOC。修改主题配置文件 ：

toc:
  post: true
  page: true
  number: true
  expand: false
  style_simple: false # for post
属性 解释
post 文章页是否显示 TOC
page 普通页面是否显示 TOC
number 是否显示章节数
expand 是否展开 TOC
style_simple 简洁模式（侧边栏只显示 TOC，只对文章页有效）

为特定文章配置
在你的文章 md 文件的头部，加入 toc_number 和 toc，并配置 true 或者 false 即可。

主题会优先判断文章 Markdown 的 Front-matter 是否有配置，如有，则以 Front-matter 的配置为准。否则，以主题配置文件中的配置为准

3.6 本地搜索

记得运行hexo clean

hexo-generator-search,根据它的文档去做相应配置。

安装插件：

npm install hexo-generator-search --save

修改主题配置文件 :

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

3.7 Footer设置

since 是一个来展示你站点起始时间的选项。它位于页面的最底部。修改主题配置文件 ： 
# Footer Settings
# --------------------------------------
footer:
  owner:
    enable: true
    since: 2020
  custom_text:
  runtime:
    enable: true
    launch_time: 04/01/2021 00:00:00 # 网站上线时间
    work_img: https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-上班摸鱼中.svg
    work_description: 距离月入25k也就还差一个大佬带我~
    offduty_img: https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-下班啦.svg
    offduty_description: 下班了就该开开心心的玩耍，嘿嘿~
  # 徽标部分配置项 https://shields.io/
  # https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
  bdageitem:
    - link: https://hexo.io/ #徽标指向网站链接
      shields: https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg #徽标API
      message: 博客框架为Hexo_v5.4.0 #徽标提示语
    - link: https://blog.anheyu.com/
      shields: https://pan.anheyu.com/d/anzhiyu/svg/Theme-AnZhiYu-2E67D3.svg
      message: 本站使用AnZhiYu主题
    - link: https://www.dogecloud.com/
      shields: https://npm.elemecdn.com/anzhiyu-blog@2.2.0/img/badge/CDN-多吉云-3693F3.svg
      message: 本站使用多吉云为静态资源提供CDN加速
    - link: https://github.com/
      shields: https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Source-Github.svg
      message: 本站项目由Github托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://npm.elemecdn.com/anzhiyu-blog@2.2.0/img/badge/Copyright-BY-NC-SA.svg
      message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
参数 解释
owner 页脚网站所有者@2020-当前年份
owner.enable 页脚网站所有者是否启用
owner.since 页脚年份，控制台中打印的运行时间也来自这里
runtime 运行时间
runtime.enable 运行时间是否启用
runtime.launch_time 网站上线时间
runtime.work_img 页脚上班时间的徽标
runtime.work_description 页脚上班时间的 title 描述
runtime.offduty_img 页脚下班时间的徽标
runtime.offduty_description 页脚下班时间的 title 描述
bdageitem 徽标配置项
bdageitem.link 徽标配置链接
bdageitem.shields 徽标配置徽标
bdageitem.message 徽标配置徽标 title

3.8 运行时间

修改主题配置文件 ：

# Time difference between publish date and now (网页运行时间)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
  enable: true
  publish_date: 4/1/2021 00:00:00

3.9 字数统计

在博客根目录中打开终端，运行以下代码：

npm install hexo-wordcount --save

修改主题配置文件 :

wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

3.10 定制化的右键菜单

开启rightClickMenu 即可。

# 右键菜单
rightClickMenu:
  enable: true

3.11 51A统计

可以配置51A统计与灵雀
配置后可在关于页面显示统计信息。

# 51a统计配置
LA:
  enable: true
  ck: #选择手动安装，在代码中找到ck
  LingQueMonitorID: #找到ID即可

配置好了就可以Hexo一键三联部署啦。

hexo cl
hexo g
hexo d

这里我只选了一些大家可能要用到的配置，具体想要配置更多功能可以去看主题配置文件，里面都有注释，或者去安知鱼官方文档里面跟着配置。

参考资料

每日一图(每次刷新都不一样的哦！)
图