免费构建个人博客：Hexo + GitHub + Cloudflare
0. 前置准备
- US.KG: 用于注册免费域名。
- Cloudflare: 用于域名解析和加速。
- Node.js: 用于运行 Hexo。
- Git: 用于版本控制和部署。
- GitHub: 用于代码托管和静态站点部署。
一、注册域名
1. 注册 US.KG 帐号
打开 US.KG 注册帐号，电话地址等信息可以使用 身份生成器。
2. KYC 验证
重新登录 US.KG，选择 Github KYC 选项，然后点击 Proceed to GitHub。
在最下方填入以下信息，包括 us.kg 的用户名以及注册该网站的原因：
- Username: XXX
- Reason for Registering the .US.KG Domain Name (Why): Study and build website.
勾选五个方框，然后点击 Proceed to GitHub。
在仓库主页 FreeDomain 上给一个 Star。
3. 创建域名
登录 US.KG，我们可以创建三个域名，点击 Domain Registration 创建域名。
输入域名前缀，点击 Check。
显示可以创建。
4. Cloudflare 绑定域名
登录 Cloudflare，点击右上角 添加站点，输入在 us.kg 注册的域名。
套餐选择免费的，点击继续。
点击继续前往激活。
将 Cloudflare 提供的服务器地址复制到 us.kg。
点击 Register。
这样就完成了 us.kg 的域名设置。
回到 Cloudflare ，点击继续。
刷新一下，显示如下即表示成功。
二、安装 Hexo
1. 安装 Node.js
下载 Node.js，安装时除了修改安装目录为 D 盘，其余步骤都点击下一步。
安装完成后，使用 Win + R 输入 CMD 打开命令行，输入 node -v，如果出现版本号，则说明安装成功。
将 npm 源修改为阿里云镜像源，在 CMD 窗口运行以下命令：
npm install -g cnpm --registry=https://registry.npmmirror.com
2. 安装 Git
下载 Git，安装时除了修改安装目录为 D 盘，其余步骤都点击下一步。
Git CMD是 Windows 命令行风格。Git Bash是 Linux 系统命令行风格（推荐使用）。Git GUI是图形化界面（不建议新手使用）。
git config -l # 查看所有配置
git config --system --list # 查看系统配置
git config --global --list # 查看用户（全局）配置
3. 使用 SSH 连接 GitHub
打开 Git Bash。
配置用户名和邮箱，用户名为 GitHub 账号，邮箱为注册 GitHub 的邮箱。
git config --global user.name "用户名"
git config --global user.email "邮箱"
使用 git config -l 检查是否配置成功。
配置公钥 GitHub，执行以下命令生成 SSH 公钥，用于计算机连接 GitHub。
ssh-keygen -t rsa -C "邮箱"
在提示 Enter file in which to save the key 时，直接一路回车即可，不推荐设置密钥。
使用 Everything 搜索 id_rsa.pub 并打开路径。
id_rsa.pub 就是公钥，用记事本打开并复制内容，然后在 GitHub 中找到 Settings - SSH and GPG keys 配置 SSH 密钥。
名字随便填一个。
测试连接，输入以下命令：
ssh -T [email protected]
提示 Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入 yes 即可。
出现 You've successfully 则表示成功，完成了环境准备工作。
4. 创建 GitHub 仓库
打开 GitHub，点击右上角的 + 号，选择 New repository，创建一个 <用户名>.github.io 的仓库。
仓库名字的格式必须为：<用户名>.github.io，可见性选择 public，方便第一次部署检查问题，点击 Create repository 进行创建。
5. 初始化 Hexo 博客
创建一个文件夹保存博客源码，这里选的路径为 D:/Hexo-Blog，在文件夹内右键鼠标，选择 Open Git Bash here。
在 Git BASH 输入以下命令安装 Hexo：
npm install -g hexo-cli && hexo -v
完成安装后，输入 hexo -v 验证是否成功。
初始化 Hexo 项目并安装相关依赖：
hexo init blog-demo
cd blog-demo
npm i
初始化后，D 盘博客文件夹下会出现以下文件：
- node_modules：依赖包
- scaffolds：生成文章的一些模板
- source：用来存放文章
- themes：主题
- .npmignore：发布时忽略的文件（可忽略）
- _config.landscape.yml：主题的配置文件
- _config.yml：博客的配置文件
- package.json：项目名称、描述、版本、运行和开发等信息
输入 hexo cl && hexo s 启动项目。
打开浏览器，输入地址：http://localhost:4000/，看到以下效果，说明构建成功了。
6. 将静态博客挂载到 Github Pages
修改 _config.yml 文件，在 Blog-demo 目录下的 _config.yml，这是 Hexo 框架的配置文件，可以修改大部分配置，可参考官方wiki。
修改最后一行的配置，将 repository 修改为自己的 GitHub 项目地址，branch 要改为 main 代表主分支（注意缩进）。
deploy:
type: git
repository: [email protected]:你的用户名/你的用户名.github.io.git
branch: main
安装 hexo-deployer-git：
npm install hexo-deployer-git --save
部署到 GitHub，输入命令：
hexo clean && hexo generate && hexo deploy
如果出现 Deploy done，则说明部署成功了。
hexo clean：删除之前生成的文件，可以用hexo cl缩写。hexo generate：生成静态文章，可以用hexo g缩写。hexo deploy：部署文章，可以用hexo d缩写。
稍等两分钟，打开浏览器访问：https://<用户名>.github.io/，就可以看到博客内容了。
7. 配置 Cloudflare Pages
打开 Cloudflare，在 Workers 和 Pages 中选择 创建项目。
选择 Pages 的 连接到 Git。
保存并部署。
点击继续处理项目，在 Cloudflare 中，自定义域粘贴我们注册的 us.kg 复制的域名。
稍等一会。
这样域名就绑定了。
把 GitHub 中的仓库设置为私有仓库，点击 Settings。
在最下面找到 Danger Zone。
三、安装博客主题安知鱼
1. 安装博客主题
打开 VS Code，选择 文件 - 打开文件夹。
在终端输入命令：
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu
2. 应用主题
修改 Hexo 的配置文件 _config.yml，将主题修改为 anzhiyu。
安装 pug 和 stylus 渲染插件，在 VS Code 终端输入命令：
npm install hexo-renderer-pug hexo-renderer-stylus --save --registry=http://registry.npmmirror.com
3. 覆盖主题配置
将 /themes/anzhiyu/_config.yml 文件复制到 hexo 根目录，并重命名为 _config.anzhiyu.yml。以后修改任何主题配置，都只需修改 _config.anzhiyu.yml 的配置即可。
注意：
_config.anzhiyu.yml中的配置优先级最高，修改原_config.yml无效。- 每次更新主题，可能存在配置变更，请注意更新说明，可能需要手动对
_config.anzhiyu.yml同步修改。 - 可以使用
hexo g --debug查看命令行输出，确认配置是否生效。 - 如果想将某些配置覆盖为空，注意不要把主键删掉。
4. 本地启动 Hexo
# 本地预览
hexo cl; hexo g; hexo s
# 推送更新上线
hexo cl; hexo g; hexo d
5. Hexo 常用命令
以下是 Hexo 博客常用命令：
| 命令 | 描述 |
|---|---|
hexo new [layout] <title> |
创建一篇新的文章 |
hexo generate 或 hexo g |
生成静态文件 |
hexo server 或 hexo s |
启动本地服务器 |
hexo deploy 或 hexo d |
部署网站 |
hexo clean |
清除缓存文件和已生成的静态文件 |
hexo clean; hexo server |
清除缓存并启动本地服务器查看最新效果 |
hexo clean; hexo generate; hexo deploy |
清除缓存后生成新文件并把内容发布到自己的服务器 |
四、安知鱼主题设置
一、样式设置
1. nav 相关设置
修改 _config.anzhiyu.yml 中的代码：
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
# Site
title: 观形物语
subtitle: 欢迎来到我的博客，希望你在这里能有收获
description: ''
keywords:
author: Pythonahy
language: zh-CN
timezone: ''
3. 菜单栏设置
3.1 文章
menu:
文章:
文章: /archives/ || anzhiyu-icon-box-archive
分类: /categories/ || anzhiyu-icon-shapes
标签: /tags/ || anzhiyu-icon-tags
- 3.1.1 分类页设置
在 Hexo 博客根目录下打开终端，输入：
hexo new page categories
找到 source/categories/index.md 这个文件，修改添加 type: "categories"：
---
title: categories
top_img: false #是否显示顶部图
date: 2024-12-10 16:26:39
type: "categories" #页面类型，必须为 tags
comments: false #是否显示评论
aside: false #是否显示右侧作者栏
---
- 3.1.2 标签页设置
在 Hexo 博客根目录下打开终端，输入下面的命令生成标签页：
hexo new page tags
找到 source/tags/index.md 这个文件，修改添加 type: "tags"：
---
title: tags
date: 2024-12-10 16:34:02
type: "tags"
comments: false
aside: false
top_img: false
---
3.2 友链
_config.anzhiyu.yml，只设置友人帐：
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 博客根目录下打开终端，输入：
hexo new page link
找到 source/link/index.md 这个文件：
---
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 中输入：
- class_name: 框架
flink_style: flexcard
hundredSuffix: ""
link_list:
- name: anzhiyu主题
link: https://blog.anheyu.com/
avatar: https://npm.elemecdn.com/[email protected]/img/avatar.jpg
descr: 生活明朗，万物可爱
siteshot: https://npm.elemecdn.com/[email protected]/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/[email protected]/img/blog.anheyu.com.jpg
color: vip
tag: 技术
4. 搜索设置
安装插件 hexo-generator-search，并根据它的文档进行配置：
npm install hexo-generator-search --save
打开 _config.anzhiyu.yml，搜索 Local search，把 enable 的值改为 true。
设置主题配置文件：
local_search:
enable: true
preload: false
CDN:
| 参数 | 解释 |
|---|---|
enable |
是否开启本地搜索 |
preload |
预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件 |
CDN |
搜索文件的 CDN 地址（默认使用的本地链接） |
5. 首页顶部设置
# 首页随便逛逛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
创建 /source/_data/creativity.yml，输入以下内容：
- 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/[email protected]/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. 首页顶部设置
# 首页顶部相关配置
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. 非轮播显示
配置 _config.anzhiyu.yml：
swiper:
enable: false
swiper_css: https://npm.elemecdn.com/[email protected]/swiper/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/[email protected]/swiper/swiper.min.js #swiper js依赖
banner:
tips: xxx
title: xxx
image: https://xxx.jpg
link: https://hxxx.com
tips、title、image、link 自己填
8. 侧边栏设置
# 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 换成自己要说的话
社交链接：
# 要加社交帐号则自己添加
# social settings (社交图标设置)
# formal:
# name: link || icon
social:
Github: https://github.com/dodopoi || anzhiyu-icon-github
BiliBili: https://space.bilibili.com/37696304 || anzhiyu-icon-bilibili
侧边个人资料图像：
# 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 模板，仅供参考
---
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 模板，仅供参考
---
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: #【可选】部分页面的顶部模块背景图片
---
2. 文章设置置顶
配置置顶参数 top：
如果存在多个置顶文章，top 后的参数越大，越靠前：
3. 给文章设定密码
先安装 hexo-blog-encrypt：
npm install --save hexo-blog-encrypt
不需要将 password: 密码 添加到文章开头，在前面的自定义 post.md：新建文章模板中已经内置了，在需要的时候，设置 password 的值就行。
4. 字数统计
先安装插件：
npm install hexo-wordcount --save
将下面的 enable 修改为 true：
# wordcount (字数统计)
# see https://blog.anheyu.com/posts/c27d.html#字数统计
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true
地点显示日本修改 location 即可，把 expand 设置为 true，会展开全部目录。
# 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 订阅支持
npm install hexo-generator-feed --save
在 _config.yml 文件中配置：
# 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：
# 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 插件：
npm install hexo-abbrlink --save
配置 _config.yml 中的内容：
# # 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 为自己网易音乐的
# 左下角音乐配置项
# 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. 添加豆瓣看书电影到博客
1. 先安装插件 hexo-douban
npm install hexo-douban --save
2. 配置文件
打开 _config.yml 只要修改 id，其它默认：
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. 生成豆瓣页面
hexo douban
不知道为什么，获取的电影太慢
4. 配置生成目录
打开 _config.anzhiyu.yml，会在主题文件夹下的 public 目录生成一个 books 和 movies 文件夹。
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
上面的自定义图标：
阅读: /books/ || anzhiyu-icon-book-open
电影: /movies/ || anzhiyu-icon-play
安知鱼支持修改图标，打开 anzhiyu 主题图标，使用 anzhiyu-icon- + 图标的名字，比如 anzhiyu-icon-play。
9. 添加烟火特效
enable 设置为 true 即可：
fireworks:
enable: true
zIndex: 9999 # -1 or 9999
mobile: false
10. 配置 Twikoo 评论系统
1. 申请 MongoDB 账号
进邮箱验证激活账号。
填写问卷调查。
选择免费套餐，云服务商选择 aws，地区选择 N. Virginia (us-east-1)。
接下来会得到一个用户名和密码，先复制一份保存，等下会用到。
在 Database Access 页面点击 Add New Database User 创建数据库用户。
Authentication Method 选 Password，在 Password Authentication 下设置数据库用户名，点击 Autogenerate Secure Password 生成密码并复制密码。
选择 Atlas Admin，最后点击 Add User。
在 Network Access 页面点击 Add IP Address，点击 ALLOW ACCESS FROM ANYWHERE，点击 Confirm。
- 在 Database 页面点击 Connect，连接方式选择 Drivers。
复制如下数据库连接字符串，将连接字符串中的 <username>:<password> 修改为刚刚创建的数据库 用户名:密码，<> 不要保留。
2. Vercel 部署
打开 Vercel 注册账号，用 GitHub 登录。
点击 一键部署，填入项目名字，点击 Create。
点击 Continue to Dashboard。
点击设置。
点击 Domains，设置自定义域名。
不绑定自己的域名，会出现评论不显示，或者用不了的情况，所以需要绑定我们自己的域名。
输入自己的域名，复制下面的信息。
打开 Cloudflare 选择自己的服务器，点击，dns，记录。
在 Domains 中，出现打勾就行。
配置环境变量并调试配置，找到 Environment Variables，添加环境变量 MONGODB_URI，值为前面记录的数据库连接字符串。
找到 Deployment Protection，设置 Vercel Authentication 为 Disabled，然后点击 Save。
找到 Function，将 Function Region 修改为你需要的地区。
重新部署应用，点击 Deployments，点击三个点，点击 Redeploy。
勾选 Use existing Build Cache 然后点击下面的 Redeploy。
出现这个表示成功了。
接下来就是配置 _config.anzhiyu.yml，搜索 Twikoo：
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: Twikoo，lazyload: true。
再修改下面这里，重新部署即可：
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
envId: https:xxxxxx/ # 自己自定义的域名
region:
visitor: false
option:
运行命令：
hexo clean; hexo generate; hexo deploy
效果：
