hexo之anzhiyu主题安装
anzhiyu主题
参考教程文档:安知鱼博客
一、安装主题
先安装好hexo后,再安装安知鱼主题!
hexo文件夹内,单机鼠标右键,进入git bash终端,或者使用vscode打开文件夹,在终端中输入以下命令来安装anzhiyu主题!
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu |
//最新的dev分支 |
二、配置主题文件
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 |
4. 新建标签页
hexo new page 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 |
# 即刻页面配置 |
7. 新增链接页
hexo new page 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 |
在主题文件中,menu中/music/改为下面的
/music/?id=1708664797&server=tencent,支持id和server参数 |
12.开启404页面
error_404: |
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 | 【必需】页面创建日期 |
| 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: |
社交图标,书写格式 图标名:url || 描述性文字 || hover 动画名
# social settings (社交图标设置) |
如需 hover 动画生效需配置fontawesome_animation_css
icons: |
17.顶部图
如果不要显示顶部图,可直接配置 disable_top_img: true
顶部图的获取顺序,如果都没有配置,则不显示顶部图。
页面顶部图的获取顺序:
各自配置的 top_img > 配置文件的 default_top_img文章页顶部图的获取顺序:
各自配置的 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: |
| 配置的值 | 效果 |
|---|---|
| 留空 | 显示默认的 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一致。
- 页面中音乐没有配置好
侧导航栏设置
| 参数 | 解释 |
|---|---|
| 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-matter的cover>配置文件的 default_cover>false
修改 主题配置文件
cover: |
| 参数 | 解释 |
|---|---|
| index_enable | 主页是否显示文章封面图 |
| aside_enable | 侧栏是否显示文章封面图 |
| archives_enable | 归档页面是否显示文章封面图 |
| position | 主页卡片文章封面的显示位置 - left:全部显示在左边 - right:全部显示在右边 - both:封面位置以左右左右轮流显示 |
| default_cover | 默认的 cover, 可配置图片链接/顔色/渐变色等 |
当配置多张图片时,会随机选择一张作为 cover.此时写法应为
YAMLdefault_cover: |
22. 左下角音乐
# 左下角音乐配置项 |
23. 追番
- 在
hexo generate或hexo deploy之前使用hexo bangumi -u命令更新追番数据,使用hexo cinema -u命令更新追剧数据! - 删除数据命令:
hexo bangumi -d/hexo cinema -d





