🖼 所有搭建博客的汇总在这里：Blog全程搭建，示例🚀test.ruiqingyan.com。

🌺 之后所有的操作都在Webstrom进行，需要的可以点进去看看

🌻 参考 Anheyu’s docs，用更多相关问题请看官方文档

没做，有空再写

1、语言

修改站点配置文件 _config.yml，默认是en，支持下面三种语言

  • default（en）
  • zh-CN（简体中文）
  • zh-TW（繁体中文）
配置项目语言

2、网站资料

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

配置网站资料

下面是一个对应_config.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
# 0、部署本地的端口号，默认4000，如果多个的话要避开重复的端口
server:
  port: 4004


# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# 1、核心内容
title: 花夕 & Blog                          #网站标题
subtitle: '远赴人间惊鸿宴，一睹人间盛世颜'      #网站的副标题
description: '远赴人间惊鸿宴，一睹人间盛世颜'   #简介或者格言
keywords:                                  #关键词
author: 花夕                                #作者
language: zh-CN                            #主题语言
timezone: 'Asia/Shanghai'                  #中国的时区


# 2、网址URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://ruiqingyan.com        # 页面底部分享的url（就是做好博客之后每页都有分享页面）
root:                    #根目录
permalink: :year/:month/:day/:title/    # 文章的永久链接格式
permalink_defaults:                     # 永久链接中每个段的默认值
pretty_urls:
  trailing_index: true                 # 尾随index.html，设置为false以删除它	true
  trailing_html: true                  # 跟踪.html，设置为false以删除它（不适用于跟踪index.html）	true



# 3、文档管理
# 一般不动
source_dir: source    # 源文件夹。您的内容存储在哪里	source
public_dir: public    # 公共文件夹。在哪里生成静态站点	public
tag_dir: tags         # 标签目录	tags
archive_dir: archives # 存档目录	archives
category_dir: categories    # 类别目录	categories
code_dir: downloads/code    # 包括代码目录（source_dir的子目录）	downloads/code
i18n_dir: :lang             # i18n目录	:lang
skip_render:                # 将复制到public原始的路径，而不被渲染。您可以使用glob表达式进行路径匹配。
#skip_render：“我的页面/**/*”    将在不更改的情况下输出`source/mypage/index.html`和`source/mypage/code.js`。
##  skip_render：“_posts/test-post.md”     这也可以用来排除帖子，#将忽略`source/_posts/test-post.md`。



# 4、写作
# 一般不动
new_post_name: :title.md         #新帖子的文件名格式
default_layout: post             #默认布局
titlecase: false                 #将标题转换为标题案例
external_link:
  enable: true                   #在新选项卡中打开外部链接
  field: site                    #仅适用于整个site或post
  exclude: ''                    #排除主机名。在适用时指定子域，包括www
filename_case: 0                 #将文件名转换为1小写；2大写
render_drafts: false             #显示草稿
post_asset_folder: true          #资产文件夹
relative_link: false             #制作相对于根文件夹的链接
future: true                     #显示未来的帖子
highlight:                       #代码块语法高亮显示设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:                        #代码块语法高亮显示设置
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# 5、主页设置
# 一般不动
index_generator:        #生成帖子存档
  path: ''
  per_page: 10          #每页显示的帖子
  order_by: -date       #帖子订单。默认情况下，按降序日期（从新到旧）排序
  pagination_dir: 'page'  #显示在page下的页面数量

# 6、时间、日期格式
# 一般不动
date_format: YYYY-MM-DD           #日期格式
time_format: HH:mm:ss             #设置时间的格式
updated_option: 'mtime'           #使用文件修改日期

# 7、分页
# 一般不动
per_page: 10           #每页显示贴子数目
pagination_dir: page   #格式url

# 8、主题
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

# 9、仓库
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: https://github.com/ruiqingyan1/ruiqingyan.github.io.git  #你的仓库地址
  branch: master

3、导航配置

这里开始配置都在_config.anzhiyu.yml文件内配置，也叫主题配置文件

3.1 导航栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# nav相关配置
nav:
  enable: false
  travelling: false
  clock: true
  menu:
    - title: 网页
      item:
        - name: 博客
          link: https://blog.anheyu.com/
          icon: /img/favicon.png
    - title: 项目
      item:
        - name: 安知鱼图床
          link: https://image.anheyu.com/
          icon: https://image.anheyu.com/favicon.ico
参数 解释
enable 是否启用 nav 左侧项目按钮，仅控制左侧项目按钮
travelling 是否启用 nav 开往按钮
clock 是否启用 nav 左侧和风天气
menu nav 左侧项目按钮内的菜单
menu.title nav 左侧项目按钮内的菜单标题
menu.item nav 左侧项目按钮内的菜单项
menu.item.name nav 左侧项目按钮内的菜单项标题
menu.item.link nav 左侧项目按钮内的菜单项链接
menu.item.icon nav 左侧项目按钮内的菜单项图标

项目列表

3.2 菜单/目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
menu:
  文章:
    隧道: /archives/ || anzhiyu-icon-box-archive
    分类: /categories/ || anzhiyu-icon-shapes
    标签: /tags/ || anzhiyu-icon-tags

  友链:
    友人帐: /link/ || anzhiyu-icon-link
    朋友圈: /fcircle/ || anzhiyu-icon-artstation
    留言板: /comments/ || anzhiyu-icon-envelope

  我的:
    音乐馆: /music/ || anzhiyu-icon-music
    追番页: /bangumis/ || anzhiyu-icon-bilibili
    相册集: /album/ || anzhiyu-icon-images
    小空调: /air-conditioner/ || anzhiyu-icon-fan

  关于:
    关于本人: /about/ || anzhiyu-icon-paper-plane
    闲言碎语: /essay/ || anzhiyu-icon-lightbulb
    随便逛逛: javascript:toRandomPost() || anzhiyu-icon-shoe-prints1

4、代码（Code Blocks）

代码块中的所有功能只适用于 Hexo 自带的代码渲染

如果使用第三方的渲染器，不一定会有效

4.1 代码高亮主题

butterfly支持6中代码高亮样式：darker、pale night、light、ocean、mac、mac light

1
highlight_theme: mac light  #我觉得最好看的一个

darker样式

night样式

light样式

ocean样式

mac样式

mac light样式

4.2 代码复制

1
highlight_copy: true

代码copy按钮

4.3 代码框展开/关闭

1
highlight_shrink: true #代码框不展开，需点击 '>' 打开（true默认不展开，false默认展开，none不显示按钮）
代码框不展开
代码框展开
不显示按钮

4.4 代码换行

在默认情况下，Hexo 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。

1
code_word_wrap: true

如果你是使用 highlight 渲染，需要找到你站点的 Hexo 配置文件_config.yml，将line_number改成false:

1
2
3
4
5
highlight:
  enable: true
  line_number: false # <- 改这里
  auto_detect: false
  tab_replace:

如果你是使用 prismjs 渲染，需要找到你站点的 Hexo 配置文件_config.yml，将line_number改成false:

1
2
3
4
5
prismjs:
  enable: false
  preprocess: true
  line_number: false # <- 改这里
  tab_replace: ''
不设置代码换行
设置代码换行

4.5 代码高度限制

可配置代码高度限制，超出的部分会隐藏，并显示展开按钮。（建议打开不懂设为false）

1
highlight_height_limit: false # 我设置的是300，注意不要写单位
限制指定行后隐藏

5、社交图标（Social Settings）

1
2
3
4
5
6
# social settings (社交图标设置)
# formal:
#   name: link || icon
social:
   Github: https://github.com/ruiqingyan1 || anzhiyu-icon-github
   BiliBili: https://space.bilibili.com/44712000?spm_id_from=333.1007.0.0 || anzhiyu-icon-bilibili

如需 hover 动画生效需配置fontawesome_animation_css

1
2
3
4
icons:
  ali_iconfont_js: # 阿里图标symbol 引用链接，主题会进行加载 symbol 引用
  fontawesome: false #是否启用fontawesome6图标
  fontawesome_animation_css: #fontawesome_animation 如果有就会加载，示例值：https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@1.0.17/lib/assets/font-awesome-animation.min.css
社交图标

社交图标配置完以后个人卡片会出现图标内容，图标左边的内容为你的站点信息，在hexo的配置文件_config.yml中配置author和subtitle字段

img

个人卡片

个人卡片hover后的显示描述，该描述请在侧边栏配置中的aside.card_author.description中修改，支持html显示。

img

卡片顶部的状态配置：

yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 作者卡片 状态
author_status:
  enable: true
  # 可以是任何图片，建议放表情包或者emoji图片，效果都很好，[表情包速查](https://emotion.xiaokang.me/)
  statusImg: "https://bu.dusays.com/2023/08/24/64e6ce9c507bb.png"
  skills:
    - 🤖️ 数码科技爱好者
    - 🔍 分享与热心帮助
    - 🏠 智能家居小能手
    - 🔨 设计开发一条龙
    - 🤝 专修交互与设计
    - 🏃 脚踏实地行动派
    - 🧱 团队小组发动机
    - 💢 壮汉人狠话不多

1
2
3
4
5
6
7
8
9
10
11
12
13
14

顶部图

相关信息

如果不要显示顶部图，可直接配置 disable_top_img: true

提示

顶部图的获取顺序，如果都没有配置，则不显示顶部图。

  1. 页面顶部图的获取顺序：

    各自配置的 top_img > 配置文件的 default_top_img

  2. 文章页顶部图的获取顺序：

    各自配置的 top_img > cover > 配置文件的 default_top_img

配置中的值：

配置 解释
index_img 主页的 top_img，示例值: index_img: “background: url(https://img02.anheyu.com/xxx) top / cover no-repeat”
default_top_img 默认的 top_img，当页面的 top_img 没有配置时，会显示 default_top_img
archive_img 归档页面的 top_img
tag_img tag 子页面 的 默认 top_img
tag_per_img tag 子页面的 top_img，可配置每个 tag 的 top_img
category_img category 子页面 的 默认 top_img
category_per_img category 子页面的 top_img，可配置每个 category 的 top_img

其它页面 （tags/categories/自建页面）和 文章页 的 top_img ，请到对应的 md 页面设置 front-matter 中的 top_img

以上所有的 top_img 可配置以下值

配置的值 效果
留空 显示默认的 top_img（如有），否则显示默认的顔色 （文章页 top_img 留空的话，会显示 cover 的值）
img 链接 图片的链接，显示所配置的图片
顔色( HEX 值 - #0000FF RGB 值 - rgb(0,0,255) 顔色单词 - orange 渐变色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%) 对应的顔色
transparent 透明
false 不显示 top_img

并不推荐为每个 tag 和每个 category 都配置不同的顶部图，因为配置太多会拖慢生成速度

yaml

1
2
3
4
5
6
7
tag_per_img：
  aplayer: https://xxxxxx.png
  android: ddddddd.png

category_per_img：
  随想: hdhdh.png
  推荐: ddjdjdjd.png

1
2
3
4
5
6
7

文章置顶

【推荐】hexo-generator-index 从 2.0.0 开始，已经支持文章置顶功能。你可以直接在文章的 front-matter 区域里添加 sticky: 1 属性来把这篇文章置顶。数值越大，置顶的优先级越大。

文章封面

文章的 markdown 文档上,在 Front-matter 添加 cover ,并填上要显示的图片地址。

如果不配置 cover,可以设置显示默认的 cover。

如果不想在首页显示 cover, 可以设置为 false。

文章封面的获取顺序 Front-matter 的 cover > 配置文件的 default_cover > false

修改 主题配置文件

yaml

1
2
3
4
5
6
7
8
9
10
cover:
  # 是否显示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面显示的位置
  # 三个值可配置 left , right , both
  position: both
  # 当没有设置cover时，默认的封面显示
  default_cover:

1
2
3
4
5
6
7
8
9
10

参数 解释
index_enable 主页是否显示文章封面图
aside_enable 侧栏是否显示文章封面图
archives_enable 归档页面是否显示文章封面图
position 主页卡片文章封面的显示位置 - left：全部显示在左边 - right：全部显示在右边 - both：封面位置以左右左右轮流显示
default_cover 默认的 cover, 可配置图片链接/顔色/渐变色等

当配置多张图片时,会随机选择一张作为 cover.此时写法应为

yaml

1
2
3
4
default_cover:
  - https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://file.crazywong.com/gh/jerryc127/CDN@latest/cover/default_bg3.png

1
2
3
4

文章 meta 显示

这个选项是用来显示文章的相关信息的。

修改 主题配置文件

yaml

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page:
    date_type: both # created or updated or both 主页文章日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 主页是否显示分类
    tags: true # true or false 主页是否显示标签
    label: true # true or false 显示描述性文字
  post:
    date_type: both # created or updated or both 文章页日期是创建日或者更新日或都显示
    date_format: relative # date/relative 显示日期还是相对日期
    categories: true # true or false 文章页是否显示分类
    tags: true # true or false 文章页是否显示标签
    label: true # true or false 显示描述性文字

1
2
3
4
5
6
7
8
9
10
11
12
13

主页文章页

date_format配置时间显示明确时间还是相对时间

文章版权

为你的博客文章展示文章版权和许可协议。

修改 主题配置文件

yaml

1
2
3
4
5
6
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/

1
2
3
4
5
6

由于 Hexo 4.1 开始，默认对网址进行解码，以至于如果是中文网址，会被解码，可设置 decode: true 来显示中文网址。

如果有文章（例如：转载文章）不需要显示版权，可以在文章 Front-matter 单独设置

yaml

1
copyright: false

1

支持对单独文章设置版权信息，可以在文章 Front-matter 单独设置

yaml

1
2
3
4
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版权归xxxxx所有，如有转载，请注明来自原作者

1
2
3
4

文章打赏

在你每篇文章的结尾，可以添加打赏按钮。相关二维码可以自行配置。

对于没有提供二维码的，可配置一张软件的 icon 图片，然后在 link 上添加相应的打赏链接。用户点击图片就会跳转到链接去。

link 可以不写，会默认为图片的链接。coinAudio 为投币的音频。

修改 主题配置文件

yaml

1
2
3
4
5
6
7
8
9
10
reward:
  enable: true
  coinAudio: https://npm.elemecdn.com/akilar-candyassets@1.0.36/audio/aowu.m4a
  QR_code:
    - img: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-weichat.png
      link:
      text: wechat
    - img: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-alipay.png
      link:
      text: alipay

1
2
3
4
5
6
7
8
9
10

TOC

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

yml

1
2
3
4
5
6
toc:
  post: true
  page: true
  number: true
  expand: false
  style_simple: false # for post

1
2
3
4
5
6

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

为特定的文章配置

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

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

相关文章

警告

当文章封面设置为 false 时，或者没有获取到封面配置，相关文章背景将会显示主题色。

相关文章推荐的原理是根据文章 tags 的比重来推荐

修改 主题配置文件

yaml

1
2
3
4
related_post:
  enable: true
  limit: 6 # 显示推荐文章数目
  date_type: created # or created or updated 文章日期显示创建日或者更新日

1
2
3
4

文章过期提醒

可设置是否显示文章过期提醒，以更新时间为基准。

yaml

1
2
3
4
5
6
7
8
# Displays outdated notice for a post (文章过期提醒)
noticeOutdate:
  enable: true
  style: flat # style: simple/flat
  limit_day: 365 # When will it be shown
  position: top # position: top/bottom
  message_prev: It has been
  message_next: days since the last update, the content of the article may be outdated.

1
2
3
4
5
6
7
8

limit_day： 距离更新时间多少天才显示文章过期提醒

message_prev： 天数之前的文字

message_next：天数之后的文字

文章编辑按钮

在文章标题旁边显示一个编辑按钮，点击会跳转到对应的链接去。

yaml

1
2
3
4
5
6
7
# Post edit
# Easily browse and edit blog source code online.
post_edit:
  enable: false
  # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
  # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
  url:

文章分页按钮

警告

当文章封面设置为 false 时，或者没有获取到封面配置，分页背景将会显示主题色。

可设置分页的逻辑，也可以关闭分页显示

1
2
3
4
5
6
# post_pagination (分页)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false
参数 解释
post_pagination: false 关闭分页按钮
post_pagination: 1 下一篇显示的是旧文章
post_pagination: 2 下一篇显示的是新文章

中控台

主题配置文件中，默认为true

yaml

1
2
# 中控台
centerConsole: true

1
2

中控台在小屏幕状态下只会显示功能按键

img

当屏幕足够大（>1200px）的时候，就能够显示兴趣点、最近评论、时间归档、功能按键、音乐等内容

img

图标配置

AnZhiYu 支持 阿里图标 (需配置自己的图标)，与 font-awesome v6 图标(需开启fontawesome)，使用阿里图标需配置主题配置文件中icon.ali_iconfont_js字段，默认内置部分图标，修改主题配置文件，视频教程: 安知鱼主题社交图标配置

yaml

1
2
3
4
icons:
  ali_iconfont_js: # 阿里图标symbol 引用链接，主题会进行加载 symbol 引用
  fontawesome: false #是否启用fontawesome6图标
  fontawesome_animation_css: #fontawesome_animation 如果有就会加载，示例值：https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@1.0.17/lib/assets/font-awesome-animation.min.css

1
2
3
4

内置阿里图标库：https://www.iconfont.cn/collections/detail?cid=44481

使用方法，将图标库中的图标名复制，然后加上前缀anzhiyu-icon-即可，比如github图标，则为anzhiyu-icon-github。