anzhiyu主题

参考教程文档:安知鱼博客

一、安装主题

先安装好hexo后,再安装安知鱼主题!

hexo文件夹内,单机鼠标右键,进入git bash终端,或者使用vscode打开文件夹,在终端中输入以下命令来安装anzhiyu主题!

git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
//最新的dev分支
git clone -b dev https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
//或者升级
运行 git pull

二、配置主题文件

1. hexo修改配置文件

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

2. 安装渲染插件

安装 pug 和 stylus 渲染插件

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

3. 复制配置文件

复制/themes/anzhiyu/_config.yml此文件到 hexo 根目录,并重命名为_config.anzhiyu.yml
_config.anzhiyu.yml中的配置优先级大于_config.yml

4. 新建标签页

hexo new page tags
添加 type: "tags"

修改Front-matter

参数 解释
type 【必须】页面类型,必须为 tags
comments 【可选】是否显示评论
top_img 【可选】是否显示顶部图
orderby 【可选】排序方式 :random/name/length
order 【可选】排序次序: 1, asc for ascending; -1, desc for descending

5. 新建分类页

hexo new page categories

分类页,可以自己写HTML和CSS和JS

6. 新建即刻页面

hexo new page essay
type: "essay"
# 即刻页面配置
essay:
enable: true
top_background:

7. 新增链接页

hexo new page link
type: "link"

8. 新增关于页-不要轻易配置容易报错!

一旦报错,马上撤销刚才的操作!多运行hexo g来测试是否操作失误!

参数 备选值/类型 解释
class_name 关于页 【必须】页面类
subtitle string 【必须】副标题
avatarImg url 【必须】头像链接
name string 【必须 作者名称
description string 【必须】描述
aboutsiteTips object 【必须】站点关于提示相关配置
aboutsiteTips.tips string 【必须】站点关于提示性文字
aboutsiteTips.title1 string 【必须】站点关于标题文字 1
aboutsiteTips.title2 string 【必须】站点关于标题文字 2
aboutsiteTips.word list 【必须】站点关于标题滚动文字
helloAbout string 【必须】hello 文字
skillsTips object 【必须】技能相关配置
skillsTips.tips string 【必须】技能提示文字
skillsTips.title string 【必须】技能标题
careers object 【必须】生涯相关配置
careers.tips string 【必须】生涯提示性文字
careers.title string 【必须】生涯标题
careers.item list 【必须】生涯 item
careers.img string 【必须】生涯图片
statistic object 【必须】统计数据相关配置
statistic.link url 【必须】统计数据按钮前往链接
statistic.text string 【必须】统计数据按钮文字
map object 【必须】地图相关配置
map.title string 【必须】地图标题
map.StrengthenTitle string 【必须】地图大标题
map.background url 【必须】地图亮色模式背景
map.backgroundDark url 【必须】地图暗色模式背景
selfInfo object 【必须】作者相关信息配置
selfInfo.selfInfoTips1 string 【必须】作者相关提示文字 1
selfInfo.selfInfoContentYear number 【必须】作者生日年份
selfInfo.selfInfoTips2 string 【必须】作者相关提示文字 2
selfInfo.selfInfoContent2 string 【必须】作者相关内容 2
selfInfo.selfInfoTips3 string 【必须】作者相关提示文字 3
selfInfo.selfInfoContent3 string 【必须】作者相关内容 3
personalities object 【必须】作者性格相关配置
personalities.author_name string 【必须】作者性格名称
personalities.personality_type string 【必须】作者性格类型
personalities.photo_url url 【必须】作者自拍图片
personalities.personality_img url 【必须】作者性格表述图片
personalities.name_url url 【必须】点击性格跳转到链接
maxim object 【必须】座右铭相关配置
maxim.maxim_tips string 【必须】座右铭相关提示文字
maxim.maxim_top string 【必须】座右铭相关顶部文字
maxim.maxim_bottom string 【必须】座右铭相关底部文字
buff object 【必须】特长相关配置
buff.buff_tips string 【必须】特长相关提示文字
buff.buff_top string 【必须】特长相关顶部文字
buff.buff_bottom string 【必须】特长相关底部文字
game object 【必须】爱好游戏相关配置
game.game_tips string 【必须】爱好游戏提示文字
game.game_title string 【必须】爱好游戏标题
game.game_uid string 【必须】爱好游戏 uid
game.game_bg url 【必须】爱好游戏背景
comic object 【必须】追番相关配置,需要 5 条数据
comic.comic_tips string 【必须】追番相关提示文字
comic.comic_title string 【必须】追番相关标题
comic.comic_list list 【必须】追番相关列表
comic.comic_list.name string 【必须】追番 item 名称
comic.comic_list.href url 【必须】追番 item 链接
comic.comic_list.cover url 【必须】追番 item 的 cover
like object 【必须】关注偏好相关配置
like.like_tips string 【必须】关注偏好配置提示文字
like.like_title string 【必须】关注偏好配置标题
like.like_bg url 【必须】关注偏好配置背景
like.like_bottom string 【必须】关注偏好配置底部文字
music object 【必须】音乐偏好相关配置
music.music_tips string 【必须】音乐偏好提示性文字
music.music_title string 【必须】音乐偏好标题
music.music_bg url 【必须】音乐偏好背景
music.music_link url 【必须】音乐偏好按钮链接
reward_list object 【可选】打赏相关配置,如果不配置将没有打赏模块
reward_list.name string 【必须】打赏 item 名称
reward_list.amount number 【必须】打赏 item 金额
reward_list.datatime Date 【必须】打赏 item 时间
reward_list.suffix string/元 【可选】打赏 item 后缀(默认元)
extra boolean/false 【必须】开发字段,表示额外模块内容可通过修改主题themes/anzhiyu/layout/includes/anzhiyu/about-extra.pug自行开发,修改为 true 后会引入该 pug 内容。

9. 新增相册页-不要轻易配置,要出错

参数 备选值/类型 解释
class_name string 【必须】页面类
path_name url 【必须】当前相册路径
type number 【必须】当前相册页面样式类型
description string 【必须】当前相册描述
cover url 【必须】当前相册 cover 图片
rowHeight number 【可选】仅当 type 为 2 时有效,当前相册 rowHeight
limit number 【可选】仅当 type 为 2 时有效,当前相册 一次懒加载的数量
lazyload boolean 【可选】仅当 type 为 2 时有效,当前相册 lazyload 是否开启懒加载,默认懒加载为滚动懒加载,type 为 1 时懒加载不可关闭。
btnLazyload boolean 【可选】仅当 type 为 2 且 lazyload 开启 时有效,当前相册 lazyload 懒加载的方式,默认为滚动懒加载,开启本选项后为按钮点击懒加载。
album_list list 【必须】当前相册内图片列表
url url 【可选】仅当 type 为 2 时有效,可以加载远程的 json 数据。
album_list.date date 【必须】当前图片创建时间
album_list.content string 【必须】当前图片描述内容
album_list.image list 【必须】当前图片集,可以多张
album_list.from string 【可选】当前图片的创建人,未填写则不显示
album_list.address string 【必须】当前图片地址

10.新增留言板

npm install hexo-butterfly-envelope --save
在主题配置文件中修改envelope_comment,改为enable: true

11.新增音乐页面

hexo new page music
type: "music"

在hexo的配置文件中添加

# APlayer
# https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
aplayer:
meting: true
asset_inject: false

在主题文件中,menu中/music/改为下面的

/music/?id=1708664797&server=tencent,支持id和server参数

12.开启404页面

error_404:
enable: true

13.文章配置

官方文档说明:https://hexo.io/zh-cn/docs/writing

butterfly主题配置:https://butterfly.js.org/posts/21cfbf15/

anzhiyu主题配置:https://anzhiy.cn/posts/220c.html

Front-matter 是markdown文件最上方以 --- 分隔的区域,用于指定个别文件的变量

  • Page Front-matter 用于页面配置
  • Post Front-matter 用于文章页配置
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
swiper_index: 1 //配置轮播图
top_group_index: 1 //最多可以放6篇文章,这个是排序!
background: "#fff"
---
写法 解释
title 【必需】页面标题
date 【必需】页面创建日期
type 【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated 【可选】页面更新日期
description 【可选】页面描述
keywords 【可选】页面关键字
comments 【可选】显示页面评论模块(默认 true)
top_img 【可选】页面顶部图片
mathjax 【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时,才需要配置,默认 false)
katex 【可选】显示 katex(当设置 katex 的 per_page: false 时,才需要配置,默认 false)
aside 【可选】显示侧边栏 (默认 true)
aplayer 【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink 【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)

14.文章置顶

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

15.文章封面

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

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

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

16. 图标的配置

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

icons:
ali_iconfont: # 阿里图标symbol 引用链接,主题会进行加载 symbol 引用,使用icon开头即可svg引入
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

社交图标,书写格式 图标名:url || 描述性文字 || hover 动画名

# social settings (社交图标设置)
# formal:
# icon: link || the description || Animation
social:
# Github: https://github.com/anzhiyu-c || icon-gitHub || faa-tada
# Email: https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2268025923@qq.com || icon-youxiang || faa-tada
# RSS: atom.xml || icon-rss || faa-tada
# BiliBili: https://space.bilibili.com/372204786 || icon-bilibili || faa-tada
# QQ: tencent://Message/?Uin=2268025923&websiteName=local.edu.com:8888=&Menu=yes || icon-QQ1 || faa-tada

如需 hover 动画生效需配置fontawesome_animation_css

icons:
ali_iconfont: # 阿里图标链接,主题会进行加载
fontawesome: true #是否启用fontawesome6图标
fontawesome_animation_css: https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@1.0.17/lib/assets/font-awesome-animation.min.css #fontawesome_animation 如果有就会加载

17.顶部图

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

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

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

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

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

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

配置中的值:

配置 解释
index_img 主页的 top_img
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 可配置以下值

tag_per_img:
aplayer: https://xxxxxx.png
android: ddddddd.png

category_per_img:
随想: hdhdh.png
推荐: ddjdjdjd.png
配置的值 效果
留空 显示默认的 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 都配置不同的顶部图,因为配置太多会拖慢生成速度

18. about.yml-关于配置文件

参数 备选值/类型 解释
class_name 关于页 【必须】页面类
subtitle string 【必须】副标题
avatarImg url 【必须】头像链接
name string 【必须 作者名称
description string 【必须】描述
aboutsiteTips object 【必须】站点关于提示相关配置
aboutsiteTips.tips string 【必须】站点关于提示性文字
aboutsiteTips.title1 string 【必须】站点关于标题文字 1
aboutsiteTips.title2 string 【必须】站点关于标题文字 2
aboutsiteTips.word list 【必须】站点关于标题滚动文字
helloAbout string 【必须】hello 文字
skillsTips object 【必须】技能相关配置
skillsTips.tips string 【必须】技能提示文字
skillsTips.title string 【必须】技能标题
careers object 【必须】生涯相关配置
careers.tips string 【必须】生涯提示性文字
careers.title string 【必须】生涯标题
careers.item list 【必须】生涯 item
careers.img string 【必须】生涯图片
statistic object 【必须】统计数据相关配置
statistic.link url 【必须】统计数据按钮前往链接
statistic.text string 【必须】统计数据按钮文字
map object 【必须】地图相关配置
map.title string 【必须】地图标题
map.StrengthenTitle string 【必须】地图大标题
map.background url 【必须】地图亮色模式背景
map.backgroundDark url 【必须】地图暗色模式背景
selfInfo object 【必须】作者相关信息配置
selfInfo.selfInfoTips1 string 【必须】作者相关提示文字 1
selfInfo.selfInfoContentYear number 【必须】作者生日年份
selfInfo.selfInfoTips2 string 【必须】作者相关提示文字 2
selfInfo.selfInfoContent2 string 【必须】作者相关内容 2
selfInfo.selfInfoTips3 string 【必须】作者相关提示文字 3
selfInfo.selfInfoContent3 string 【必须】作者相关内容 3
personalities object 【必须】作者性格相关配置
personalities.author_name string 【必须】作者性格名称
personalities.personality_type string 【必须】作者性格类型
personalities.photo_url url 【必须】作者自拍图片
personalities.personality_img url 【必须】作者性格表述图片
personalities.name_url url 【必须】点击性格跳转到链接
maxim object 【必须】座右铭相关配置
maxim.maxim_tips string 【必须】座右铭相关提示文字
maxim.maxim_top string 【必须】座右铭相关顶部文字
maxim.maxim_bottom string 【必须】座右铭相关底部文字
buff object 【必须】特长相关配置
buff.buff_tips string 【必须】特长相关提示文字
buff.buff_top string 【必须】特长相关顶部文字
buff.buff_bottom string 【必须】特长相关底部文字
game object 【必须】爱好游戏相关配置
game.game_tips string 【必须】爱好游戏提示文字
game.game_title string 【必须】爱好游戏标题
game.game_uid string 【必须】爱好游戏 uid
game.game_bg url 【必须】爱好游戏背景
comic object 【必须】追番相关配置,需要 5 条数据
comic.comic_tips string 【必须】追番相关提示文字
comic.comic_title string 【必须】追番相关标题
comic.comic_list list 【必须】追番相关列表
comic.comic_list.name string 【必须】追番 item 名称
comic.comic_list.href url 【必须】追番 item 链接
comic.comic_list.cover url 【必须】追番 item 的 cover
like object 【必须】关注偏好相关配置
like.like_tips string 【必须】关注偏好配置提示文字
like.like_title string 【必须】关注偏好配置标题
like.like_bg url 【必须】关注偏好配置背景
like.like_bottom string 【必须】关注偏好配置底部文字
music object 【必须】音乐偏好相关配置
music.music_tips string 【必须】音乐偏好提示性文字
music.music_title string 【必须】音乐偏好标题
music.music_bg url 【必须】音乐偏好背景
music.music_link url 【必须】音乐偏好按钮链接
reward_list object 【可选】打赏相关配置,如果不配置将没有打赏模块
reward_list.name string 【必须】打赏 item 名称
reward_list.amount number 【必须】打赏 item 金额
reward_list.datatime Date 【必须】打赏 item 时间
reward_list.suffix string/元 【可选】打赏 item 后缀(默认元)
extra boolean/false 【必须】开发字段,表示额外模块内容可通过修改主题themes/anzhiyu/layout/includes/anzhiyu/about-extra.pug自行开发,修改为 true 后会引入该 pug 内容。

19. album.yml-相册配置文件

参数 备选值/类型 解释
class_name string 【必须】页面类
path_name url 【必须】当前相册路径
description string 【必须】当前相册描述
cover url 【必须】当前相册 cover 图片
album_list list 【必须】当前相册内图片列表
album_list.date date 【必须】当前图片创建时间
album_list.content string 【必须】当前图片描述内容
album_list.image list 【必须】当前图片集,可以多张

由于==相册页面==需要很多的 page,所以在写数据的时候自行写入路径path_name,示例数据中有两个path_name,所以需要再创建两个页面,注意新建的页面必须与path_name一致。

  1. 页面中音乐没有配置好

侧导航栏设置

参数 解释
enable 是否启用 nav 左侧项目按钮,仅控制左侧项目按钮
travelling 是否启用 nav 开往按钮
clock 是否启用 nav 左侧和风天气
menu nav 左侧项目按钮内的菜单
menu.title nav 左侧项目按钮内的菜单标题
menu.item nav 左侧项目按钮内的菜单项
menu.item nav 左侧项目按钮内的菜单项
menu.item.name nav 左侧项目按钮内的菜单项标题
menu.item.link nav 左侧项目按钮内的菜单项链接
menu.item.icon nav 左侧项目按钮内的菜单项图标

20. 文章置顶

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

21. 文章封面

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

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

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

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

修改 主题配置文件

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

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

YAMLdefault_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

22. 左下角音乐

# 左下角音乐配置项
nav_music:
enable: false
id: 8152976493
server: netease

23. 追番

  1. hexo generatehexo deploy之前使用hexo bangumi -u命令更新追番数据,使用hexo cinema -u命令更新追剧数据!
  2. 删除数据命令:hexo bangumi -d/hexo cinema -d