2. hexo主题安知鱼主题设置

文档:https://docs.anheyu.com/initall.html

视频教程:https://www.bilibili.com/video/BV1Rs4y127hu/

安知鱼主题

需要使用npm安装主题

1
npm i hexo-theme-anzhiyu

需要使用npm安装插件,配置好后使用hexo s查看效果

  • 应用主题

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

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu
  • 安装 pug 和 stylus 渲染插件
1
npm install hexo-renderer-pug hexo-renderer-stylus --save

安知鱼主题设置

一、样式设置

1. nav 相关设置

安知鱼主题 nav 设置

修改 _config.anzhiyu.yml 中的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
nav:
enable: true # 设置为true
travelling: false
clock: false
menu:
- title: 网页
item:
- name: GitHub
link: https://github.com/pythonahy6
icon: https://pic.imgdb.cn/item/67574d30d0e0a243d4e0bd1a.jpg
- name: AI
link: https://free.share-ai.top/
icon: https://pic.imgdb.cn/item/6757f02ed0e0a243d4e0fc7c.png
- title: 项目
item:
- name: 图床
link: https://tgstate.ikun123.com/
icon: https://picgo-1.pages.dev//favicon.ico

2. 博客名称设置

修改 _config.yml 中tltle 和 subtitle 顺便把 language 为中文 zh-CN

1
2
3
4
5
6
7
8
# Site
title: 观形物语
subtitle: 欢迎来到我的博客,希望你在这里能有收获
description: ''
keywords:
author: Pythonahy
language: zh-CN
timezone: ''

3. 菜单栏设置

3.1 文章
1
2
3
4
5
menu:
文章:
文章: /archives/ || anzhiyu-icon-box-archive
分类: /categories/ || anzhiyu-icon-shapes
标签: /tags/ || anzhiyu-icon-tags
  • 3.1.1 分类页设置

在 Hexo 博客根目录下打开终端,输入:

1
hexo new page categories

找到 source/categories/index.md 这个文件,修改添加 type: "categories"

1
2
3
4
5
6
7
8
---
title: categories
top_img: false #是否显示顶部图
date: 2024-12-10 16:26:39
type: "categories" #页面类型,必须为 tags
comments: false #是否显示评论
aside: false #是否显示右侧作者栏
---

安知鱼主题分类页设置

  • 3.1.2 标签页设置

在 Hexo 博客根目录下打开终端,输入下面的命令生成标签页:

1
hexo new page tags

找到 source/tags/index.md 这个文件,修改添加 type: "tags"

1
2
3
4
5
6
7
8
---
title: tags
date: 2024-12-10 16:34:02
type: "tags"
comments: false
aside: false
top_img: false
---

安知鱼主题标签页设置

3.2 友链

_config.anzhiyu.yml,只设置友人帐:

1
2
3
4
5
6
7
8
9
10
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
  • 3.2.1 友人帐

在 Hexo 博客根目录下打开终端,输入:

1
hexo new page link

找到 source/link/index.md 这个文件:

1
2
3
4
5
6
7
8
---
title: link
top_img: false #是否显示顶部图
date: 2024-12-10 16:45:58
type: "link"
comments: false
aside: false
---

新建文件 source/_data/link.yml,如果没有 _data 文件夹,请自己新建。在 source/_data/link.yml 中输入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- class_name: 框架
flink_style: flexcard
hundredSuffix: ""
link_list:
- name: anzhiyu主题
link: https://blog.anheyu.com/
avatar: https://npm.elemecdn.com/anzhiyu-blog-static@1.0.4/img/avatar.jpg
descr: 生活明朗,万物可爱
siteshot: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg

- class_name: 推荐博客
flink_style: telescopic
hundredSuffix: ""
link_list:
- name: 亲自巡山的大王
link: https://dodopoi.github.io/
avatar: https://avatars.githubusercontent.com/u/118941122?v=4
descr: 夕晴照雪霁无瑕
siteshot: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg
color: vip
tag: 技术

Alt Text

4. 搜索设置

安装插件 hexo-generator-search,并根据它的文档进行配置:

1
npm install hexo-generator-search --save

打开 _config.anzhiyu.yml,搜索 Local search,把 enable 的值改为 true

Alt Text

设置主题配置文件:

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

5. 首页顶部设置

安知鱼主题首页顶部设置

1
2
3
4
5
6
7
8
9
10
11
# 首页随便逛逛people模式 而非技能点模式,关闭后为技能点模式需要配置creativity.yml
peoplecanvas:
enable: false
img: https://upload-bbs.miyoushe.com/upload/2023/09/03/125766904/ee23df8517f3c3e3efc4145658269c06_5714860933110284659.png
# 首页顶部相关配置
home_top:
enable: true # 开关
timemode: date #date/updated
title: 在纷繁中见本质
subTitle: 于平凡处觅真知
siteText: designai.us.kg

Alt Text

创建 /source/_data/creativity.yml,输入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 开启创造力
creativity_list:
- name: Docker
color: "#57b6e6"
icon: https://bu.dusays.com/2023/04/09/643293b0f0abe.png
- name: Photoshop
color: "#4082c3"
icon: https://bu.dusays.com/2022/12/15/639aa3a5c240e.png
- name: Node
color: "#333"
icon: https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg
- name: Python
color: "#fff"
icon: https://bu.dusays.com/2023/04/09/643293b1230f7.png
- name: JS
color: "#f7cb4f"
icon: https://bu.dusays.com/2023/04/09/643293b121f02.png
- name: Git
color: "#df5b40"
icon: https://bu.dusays.com/2023/04/09/643293b10ccdd.webp

6. 首页顶部设置

Alt Text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 首页顶部相关配置
home_top:
enable: true # 开关
timemode: date #date/updated
title: 在纷繁中见本质
subTitle: 于平凡处觅真知
siteText: designai.us.kg
category:
- name: 设计
path: /design/
shadow: var(--anzhiyu-shadow-blue)
class: blue
icon: anzhiyu-icon-dove
- name: AI
path: //
shadow: var(--anzhiyu-shadow-red)
class: green
icon: anzhiyu-icon-fire
- name: Python
path: /Python/
shadow: var(--anzhiyu-shadow-green)
class: red
icon: anzhiyu-icon-book

7. 非轮播显示

安知鱼主题首页 Banner 设置

配置 _config.anzhiyu.yml

1
2
3
4
5
6
7
8
9
10
  swiper:
enable: false
swiper_css: https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.js #swiper js依赖
banner:
tips: xxx
title: xxx
image: https://xxx.jpg
link: https://hxxx.com
tips、title、image、link 自己填

Alt Text

8. 侧边栏设置

安知鱼主题侧边栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# aside (侧边栏)
# --------------------------------------
aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: right # left or right
display: # 控制对应详情页面是否显示侧边栏
archive: true
tag: true
category: true
card_author:
enable: true
description: xxx # <div style="line-height:1.38;margin:0.6rem 0;text-align:justify;color:rgba(255, 255, 255, 0.8);">这有关于<b style="color:#fff">产品、设计、开发</b>相关的问题和看法,还有<b style="color:#fff">文章翻译</b>和<b style="color:#fff">分享</b>。</div><div style="line-height:1.38;margin:0.6rem 0;text-align:justify;color:rgba(255, 255, 255, 0.8);">相信你可以在这里找到对你有用的<b style="color:#fff">知识</b>和<b style="color:#fff">教程</b>。</div> # 默认为站点描述
name_link: /

description 这里把 xxx 换成自己要说的话

社交链接:

1
2
3
4
5
6
7
# 要加社交帐号则自己添加
# social settings (社交图标设置)
# formal:
# name: link || icon
social:
Github: https://github.com/dodopoi || anzhiyu-icon-github
BiliBili: https://space.bilibili.com/37696304 || anzhiyu-icon-bilibili

侧边个人资料图像:

安知鱼主题侧边栏头像设置

1
2
3
4
5
6
7
8
9
10
# Image (图片设置)
# --------------------------------------

# Favicon(网站图标)
favicon: /favicon.ico

# Avatar (头像)
avatar:
img: https://pic.imgdb.cn/item/675827bed0e0a243d4e1780a.jpg
effect: false

二、其它设置

1. 配置文章模板

/scaffolds 目录下有几个模板文件,其中:

  • post.md:新建文章模板
  • page.md:新建标签页模板
1.1 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
updated: #【可选】页面更新日期
tags: #【可选】文章标签
categories: #【可选】文章分类
cover: https://pic.imgdb.cn/item/675827bed0e0a243d4e1780a.jpg #【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图,可设为 false/图片地址/留空)
password: #密码,需要安装插件 hexo-blog-encrypt
top: # 1 置顶
keywords: #【可选】文章关键字
description: #【可选】文章描述
top_img: #【可选】文章顶部图片
comments: #【可选】显示文章评论模块(默认 true)
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,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside: #【可选】显示侧边栏 (默认 true)
swiper_index: 10 #【可选】首页轮播图配置 index 索引,数字越小越靠前
top_group_index: 10 #【可选】首页右侧卡片组配置, 数字越小越靠前
ai: #【可选】文章ai摘要
background: "#fff" #【可选】文章主色,必须是16进制颜色且有6位,不可缩减,例如#ffffff 不可写成#fff
---

<div class="video-container">
[up主专用,视频内嵌代码贴在这]
</div>

<style>
.video-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 * 100%) */
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
1.2 page.md 模板,仅供参考
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
type: #【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated: #【可选】页面更新日期
comments: #【可选】显示页面评论模块(默认 true)
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】页面顶部图片
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 的配置)
top_single_background: #【可选】部分页面的顶部模块背景图片
---

Alt Text

2. 文章设置置顶

配置置顶参数 top

安知鱼主题文章置顶设置

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

安知鱼主题多文章置顶

3. 给文章设定密码

先安装 hexo-blog-encrypt

1
npm install --save hexo-blog-encrypt

不需要将 password: 密码 添加到文章开头,在前面的自定义 post.md:新建文章模板中已经内置了,在需要的时候,设置 password 的值就行。

安知鱼主题文章密码设置

安知鱼主题文章密码保护

4. 字数统计

先安装插件:

1
npm install hexo-wordcount --save

将下面的 enable 修改为 true

1
2
3
4
5
6
7
# wordcount (字数统计)
# see https://blog.anheyu.com/posts/c27d.html#字数统计
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true

安知鱼主题字数统计设置

地点显示日本修改 location 即可,把 expand 设置为 true,会展开全部目录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# toc (目录)
toc:
post: true
page: false
number: true
expand: true #目录展开所有级别
style_simple: false # for post

post_copyright:
enable: true
decode: false
author_href:
location: 日本
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
avatarSinks: false # hover时头像下沉
copyright_author_img_back:
copyright_author_img_front:
copyright_author_link: /

5. 添加 RSS 订阅支持

1
npm install hexo-generator-feed --save

_config.yml 文件中配置:

1
2
3
4
5
6
7
8
9
10
11
12
# Site
title: Pythonahy
subtitle: ‘欢迎来到我的博客,希望你在这里能有收获'
description: ''
keywords:
author: Pythonahy
language: zh-CN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://xxx # 修改为你的实际网站地址

再配置 _config.anzhiyu.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# social settings (社交图标设置)
# formal:
# name: link || icon
social:
rss: https://designai.us.kg/atom.xml || anzhiyu-icon-rss
# Github: https://github.com/anzhiyu-c || anzhiyu-icon-github
# BiliBili: https://space.bilibili.com/372204786 || anzhiyu-icon-bilibili

feed:
enable: true
type: atom
path: atom.xml
limit: 20
hub:
content: true # 建议设为 true,这样订阅者可以看到完整内容
content_limit: 140
content_limit_delim: ' '
order_by: -date
icon: icon.png
autodiscovery: true

6. 博客永久链接设置

安装 hexo-abbrlink 插件:

1
npm install hexo-abbrlink --save

配置 _config.yml 中的内容:

1
2
3
4
5
6
7
8
9
10
11
# # URL
# ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://designai.us.kg # 修改为你的实际网站地址
permalink: posts/:abbrlink.html
abbrlink:
alg: crc32
rep: hex
permalink_defaults:
pretty_urls:
trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

7. 添加音乐

修改 _config.anzhiyu.yml:其它默认,修改 id 为自己网易音乐的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 左下角音乐配置项
# https://github.com/metowolf/MetingJS
nav_music:
enable: true
console_widescreen_music: false # 宽屏状态控制台显示音乐而不是标签 enable为true 控制台依然会显示
id: 517301810
theme: '#42b983'
server: netease
fixed: true # 开启吸底模式
autoplay: true # 是否自动播放
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
preload: 'auto' # 预加载,可选值: 'none', 'metadata', 'auto'
volume: 0.7 # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
listFolded: true # 列表默认折叠
hideLrc: true # 隐藏歌词
listMaxHeight: "525px" #列表最大高度

# 路径为 /music 的音乐页面默认加载的歌单 1. nav_music 2. custom
music_page_default: nav_music

8. 添加豆瓣看书电影到博客

Alt Text

1. 先安装插件 hexo-douban
1
npm install hexo-douban --save
2. 配置文件

打开 _config.yml 只要修改 id,其它默认:

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
douban:
id: 285338112
builtin: true
dynamic: true
item_per_page: 10
meta_max_line: 4
customize_layout: page
swup: false
book:
path: books/index.html
title: "无为书斋"
quote: "书在几上,道在心中"
actions:
- do
- wish
- collect
option:
movie:
path: movies/index.html
title: "坐忘影室"
quote: "万象皆为虚幻,悟道方见真常"
actions:
- do
- wish
- collect
option:
# game:
# path: games/index.html
# title: "This is my game title"
# quote: "This is my game quote"
# actions:
# - do
# - wish
# - collect
# option:
# song:
# path: songs/index.html
# title: "This is my song title"
# quote: "This is my song quote"
# actions:
# - do
# - wish
# - collect
# option:
3. 生成豆瓣页面
1
hexo douban

Hexo Douban 生成

不知道为什么,获取的电影太慢

4. 配置生成目录

打开 _config.anzhiyu.yml,会在主题文件夹下的 public 目录生成一个 books 和 movies 文件夹。

1
2
3
4
5
6
7
8
9
10
11
12
13
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
书影:
阅读: /books/ || anzhiyu-icon-book-open
电影: /movies/ || anzhiyu-icon-play

安知鱼主题豆瓣菜单栏设置

上面的自定义图标:

1
2
阅读: /books/ || anzhiyu-icon-book-open
电影: /movies/ || anzhiyu-icon-play

安知鱼支持修改图标,打开 anzhiyu 主题图标,使用 anzhiyu-icon- + 图标的名字,比如 anzhiyu-icon-play

9. 添加烟火特效

enable 设置为 true 即可:

1
2
3
4
fireworks:
enable: true
zIndex: 9999 # -1 or 9999
mobile: false

安知鱼主题烟花设置

10. 配置 Twikoo 评论系统

1. 申请 MongoDB 账号

MongoDB 注册

进邮箱验证激活账号。

MongoDB 激活邮箱

填写问卷调查。

Alt Text

选择免费套餐,云服务商选择 aws,地区选择 N. Virginia (us-east-1)。

Alt Text

接下来会得到一个用户名和密码,先复制一份保存,等下会用到。

在 Database Access 页面点击 Add New Database User 创建数据库用户。

Alt Text

Authentication Method 选 Password,在 Password Authentication 下设置数据库用户名,点击 Autogenerate Secure Password 生成密码并复制密码。

Alt Text

选择 Atlas Admin,最后点击 Add User。

MongoDB 添加用户权限

在 Network Access 页面点击 Add IP Address,点击 ALLOW ACCESS FROM ANYWHERE,点击 Confirm。

Alt Text

  1. 在 Database 页面点击 Connect,连接方式选择 Drivers。

Alt Text

复制如下数据库连接字符串,将连接字符串中的 <username>:<password> 修改为刚刚创建的数据库 用户名:密码,<> 不要保留。

[Alt Text

2. Vercel 部署

打开 Vercel 注册账号,用 GitHub 登录。

点击 一键部署,填入项目名字,点击 Create。

Vercel 一键部署

点击 Continue to Dashboard。

Vercel 进入 Dashboard

点击设置。

Vercel 设置

点击 Domains,设置自定义域名。

不绑定自己的域名,会出现评论不显示,或者用不了的情况,所以需要绑定我们自己的域名。

Vercel 自定义域名

输入自己的域名,复制下面的信息。

Vercel 添加自定义域名

打开 Cloudflare 选择自己的服务器,点击,dns,记录。

Cloudflare 添加 Vercel DNS

在 Domains 中,出现打勾就行。

Alt Text

配置环境变量并调试配置,找到 Environment Variables,添加环境变量 MONGODB_URI,值为前面记录的数据库连接字符串。

Alt Text

找到 Deployment Protection,设置 Vercel AuthenticationDisabled,然后点击 Save

Alt Text

找到 Function,将 Function Region 修改为你需要的地区。

重新部署应用,点击 Deployments,点击三个点,点击 Redeploy

Vercel 重新部署

勾选 Use existing Build Cache 然后点击下面的 Redeploy

Vercel 使用缓存重新部署

出现这个表示成功了。

Vercel 部署成功

接下来就是配置 _config.anzhiyu.yml,搜索 Twikoo:

1
2
3
4
5
6
7
8
9
10
comments:
# Up to two comments system, the first will be shown as default
# Choose: Valine/Waline/Twikoo/Artalk
use: Twikoo
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: true
count: false # Display comment count in post's top_img
card_post_count: false # Display comment count in Home Page

修改:use: Twikoolazyload: true

再修改下面这里,重新部署即可:

1
2
3
4
5
6
7
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
envId: https:xxxxxx/ # 自己自定义的域名
region:
visitor: false
option:

运行命令:

1
hexo clean; hexo generate; hexo deploy

效果:

[Twikoo 评论效果