感谢你来到本小站，如果这篇博客对你有帮助，欢迎在下方评论😘！

折腾了一整天，算是把基本的博客环境给搭建好了，页面效果还是挺不错的！后续对寒舍有什么新操作会对本文进行更新，可以多多关注一下哦

本博客修改过的 keep 主题文件可以在这里查看👉 musnows/hexo-theme-keep
本博客修改后的 keep 主题预览站点为 keep-hexo.musnow.top

1. 基本配置

我最开始使用的平台是 HEXO+Gitee，参考这篇博客👉基于 Gitee+Hexo 搭建个人博客

现在我不建议你使用 gitee pages，具体请看本文 4.1；

可以根据本文向导配置 github pages，有问题可以评论提出哦╰(*°▽°*)╯

操作之前，需要下载两个软件；先下载安装好 node.js 后再进行 git 操作

plaintext

1 2	node.js官网 https://nodejs.org/zh-cn/ git官网 https://git-scm.com/

1.1 安装 hexo

如果是 Centos 云服务器，安装 hexo 可以参考 https://www.myfreax.com/how-to-install-node-js-on-centos-8/

安装好这两个工具后，我们先打开 git bash（一般右键菜单里面就会有，如果找不到该软件请全局搜索）如果你安装的时候有选择添加到命令行 ADD TO PATH，那么是可以直接用 windows 的 cmd 来操作 git 的。这里避免你安装的时候没有选择此项，均用 git bash 来演示

【Git】在 Windows CMD 中和 VScode 中配置已经安装好的 git

打开之后的界面应该是这样的

我们 cd 进入你想要创建 hexo 本地文件的路径，比如我想在 D 盘里面创建我的 hexo 博客，那么就 cd 进入你想要的路径；如果你不知道如何填写路径，可以右键顶栏将路径复制为文本

然后在 git bash 中，使用 shift+insert(ins) 进行粘贴

plaintext

1	cd D:\example

这样我们就成功进入我们想要的文件夹了

输入 node -v 命令，测试 node.js 是否安装成功且可用；如果出现版本号，就是安装成功了（请确认 node.js 的版本大于 v16）

plaintext

1 2	$ node -v v16.13.1

随后在这里执行以下命令

bash

# 安装npm包管理器
npm -g install npm 
# 可以使用腾讯云镜像
npm -g install npm --registry=https://mirrors.cloud.tencent.com/npm/
# 如果安装npm失败，还可以使用镜像源安装淘宝的cnpm
npm -g install cnpm --registry=https://registry.npmmirror.com
# 如果安装了cnpm，注意后续所有npm命令要用cnpm代替

安装成功后，安装 hexo

bash

1	npm install -g hexo-cli

测试是否成功安装

plaintext

moth@LAPTOP-R9S2524B MINGW32 /d/example
$ hexo version
hexo-cli: 4.3.0
os: win32 10.0.22000
node: 16.13.1
v8: 9.4.146.24-node.14
uv: 1.42.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
modules: 93
nghttp2: 1.45.1
napi: 8
llhttp: 6.0.4
openssl: 1.1.1l+quic
cldr: 39.0
icu: 69.1
tz: 2021a
unicode: 13.0
ngtcp2: 0.1.0-DEV
nghttp3: 0.1.0-DEV

出现上面的字样，就是安装成功了；因为我是 2022 年 4 月操作的，这里安装的版本有点老，不过不影响使用，那就不升级了😶‍🌫️

温馨提示：这些都是依赖项，如果不影响你的使用，那就不要升级！
不要升级！不要升级！！不要升级！！！

1.1.1 报错本系统不支持运行脚本

在另外一台电脑上部署 hexo 的时候，安装完毕 hexo，遇到了这个报错

plaintext

1
2

hexo : 无法加载文件 C:\Users\moth\AppData\Roaming\npm\hexo.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:
/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解决办法，是进入 windows11 的设置页面，在隐私-开发者设置-终端中，允许本地 powershell 脚本在未签名的情况下运行

勾上选项后，点击应用。之后运行 hexo 就没有报错了

1.1.2 初始化博客文件夹

输入以下命令，我们会在当前文件夹创建一个 blog 文件夹，hexo 会在里面克隆基础 hexo 需要用的文件

plaintext

$ hexo init blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
fatal: unable to access 'https://github.com/hexojs/hexo-starter.git/': OpenSSL SSL_read: Connection was reset, errno 10054
WARN  git clone failed. Copying data instead
INFO  Install dependencies
INFO  Start blogging with Hexo!

使用 cd 命令进入 blog 文件夹

plaintext

cd blog

执行以下命令，安装一下依赖项

plaintext

1	npm install

随后输入下面三个命令

bash

1
2
3

hexo cl #hexo clean的缩写
hexo g #生成文件
hexo s #开启本地预览

输出的结果如下

plaintext

moth@LAPTOP MINGW32 /d/example/blog
$ hexo cl
INFO  Validating config

moth@LAPTOP MINGW32 /d/example/blog
$ hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 94 ms
INFO  Generated: archives/index.html
INFO  Generated: archives/2023/index.html
INFO  Generated: archives/2023/01/index.html
INFO  Generated: index.html
INFO  Generated: fancybox/blank.gif
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: js/script.js
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/style.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: 2023/01/10/hello-world/index.html
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  28 files generated in 232 ms

moth@LAPTOP MINGW32 /d/example/blog
$ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

浏览器打开 http://localhost:4000，看到下面的预览，那就 OK 了！

1.2 部署到 github pages

在 Github 创建一个新仓库，名字为 用户名.github.io

找到 blog 目录下会有一个_config.yml 文件，这是 hexo 的配置文件。在里面找到下面的字段，填入你的 github 仓库地址

yaml

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/musnows/musnows.github.io.git
  branch: master

如果你想同时部署到 gitee/github，可以这样写

yaml

deploy:
  type: git
  repo:
	  github: https://github.com/musnows/musnows.github.io.git
	  gitee: git@gitee.com:musnow/musnow.git
  branch: master

随后，我们执行 hexo d 部署到远程仓库

bash

1 2	hexo d #部署 hexo g --d #生成文件的同时部署，推荐使用这个

如果出现下面的错误，那是很正常的，因为我们没有安装部署的依赖项

plaintext

1	ERROR Deployer not found: git

安装 hexo-deployer-git

plaintext

1	npm install hexo-deployer-git --save

再次执行 hexo g --d，输入你的 github 账户（邮箱）和密码，进行部署。

可以看到 github 仓库多了一个 master 分支，其内部就是我们的远端文件。

进入仓库的设置，找到 github pages 的设置，选择 master 分支部署，按下图配置

等待部署成功后，就可以打开 https://你的名字.github.io 就可以访问了！

做完上面的步骤，此时就可以来安装一个主题了。毕竟默认的 landscape 主题还是不够好用的😘

ssh 免密部署操作，参考第 4 点

1.2 keep 主题

Hexo 下 keep 主题初始化操作是根据开发者大哥的帮助文档进行的

本文是对相关踩坑操作的一点说明，建议你先粗略浏览完本文，看看有啥坑🕳（挺多的）再进行 keep 主题的配置

Keep 快速开始

如果你想使用其他 hexo 主题，建议选择有中文帮助文档的 HEXO 主题，不然就得啃英语了。

后面本站样式可能会做其他的更改，待我搞清楚进阶操作再说。毕竟咱对 CSS 和 HTML 代码是完全不懂（这是前端的内容，目前没有自学计划）

前人栽树后人乘凉，在 keep 开发者博客的友链中找到了魔改了主题的老哥，直接学习起来😍！hexo 主题魔改汇总和总结
更多魔改 keep 主题的内容详见本文第 8 点

当前你看到的主页已经是修改 keep 主题过后的啦！感觉如何？keep 主题魔改后的预览站点

1.3 keep 主题安装目录在哪？

如果你根据 keep 的官方文档用 npm 安装，你可能发现在 themes 里面没有 keep 主题的文件夹，那它到哪儿去了呢？

找一找就能发现，其实在这里 blog\node_modules\hexo-theme-keep。这是因为我的主题是用 npm 安装的，node_modules 是在当前目录安装的包的位置，所以会出现这种情况

需要注意，后续修改_config.yml 的时候，有的时候需要修改的是主题的配置文件，有些是 HEXO 官方的配置文件，不要把二者弄混了！

建议在 hexo 根目录中创建一个_config.keep.yml，修改配置文件只需要修改这里的_config.keep.yml 即可，方便以后进行平滑升级 ;

重点：如果你想魔改主题，请不要用 npm 方式安装主题，否则修改后的内容在 npm 操作的时候会被直接覆盖！应该采用 git 方式安装主题，将主题文件夹放入 hexo 目录的 themes 文件夹下。

1.4 主题页面设置成中文

keep 主题默认的页面是英文的按钮，需要在 HEXO 配置文件_config.yml 中修改语言为 zh-CN 然后页面就变成中文啦！

2. 如何添加博客文章

HEXO 采用的是 markdown 语法，只需要在本地的 source/_posts 文件夹添加 md 源文件，就能在个人博客中显示

以 keep 模板为例，我们需要在 md 源文件的正文之前添加如下语句，来设置博客的标题、上传时间、tag、分类，以及是否置顶

如果要设置多个 tag，样式为 [Hexo,typora,博客]
多个分类 categories 同理
更推荐用列表方式来添加多个 tag 或者分类，避免和子分类混淆

yaml

---
title: 使用hexo+gitee搭建个人博客
date: 2022-04-23 13:30:14
tags: 
    - Hexo
categories: 
    - 差生文具多
    - [主分类,子分类,子子分类] # 部分主题支持嵌套分类
sticky: 999
---

不同 hexo 主题的 front-matter 可能不同，请根据主题文档来进行配置。

2.1 首页置顶

举个例子，本文的 sticky 我设置成了 999，你看到的就是本文在我的首页置顶了。如果不设置 sticky，首页默认是以时间降序排列文章（后发布的在前头）

2.2 搭建图床（必做）

本操作必做！为了保证你上传的 md 文件中的图片能在个人博客上正常显示，请先配置你的个人图床👉图床搭建教程

如果你开启了阿里云 OSS 的 bucket 防盗链，还需要将你的站点加入白名单！

2.3 如何导出 CSDN 的博客

如果你之前的博客是在 CSDN 上写的，可以在 markdown 编辑器的文章管理面板中导出为 md 文件

为了避免图片后续无法访问，建议上传一下 csdn 的图片到自己的图床（可以通过 obsidian 的插件快捷上传全文图片）

3. 图片无法显示问题

3.1 解决：设置空 referrer

我们的博客网站向其他站点访问图片的时候，会发送一个 referrer 。有些站点是会 block 掉你的博客访问的，比如 CSDN 的图片链接。

这部分是我在设置友链的时候发现的，有些朋友给我的头像链接是 CSDN 的图片链接，但是设置完毕后头像图片不显示。

包括你的图床图片不显示，也可能是因为 referrer 问题；比如我就发现我的阿里云 OSS 图片，在本地 HEXO S 的时候，博客中的图片无法加载

解决办法参考这篇博客👉Hexo 博客不显示图床图片的解决方法

具体操作是打开 HEXO 主题中包含全局网页 head 信息的文件（不同主题可能不一样，需要你找到主题的安装路径）keep 主题是 hexo-theme-keep\layout\_partial\head.ejs

打开后在里面添加这个语句，设置 referrer 为空

plaintext

1	<meta name="referrer" content="no-referrer">

设置完毕后，应该就可以正常访问图床图片和 CSDN 的图片外链了

3.2 关于 oss 安全 (CDN)

设置空 referrer 需要在 oss 的防盗链设置中开启 允许空referrer，这能让用户直接在浏览器中访问你的图片资源，某种意义上来说，是不安全的！

但是关闭允许空referrer 的功能，无法让 typora 显示出图片。这是因为 markdown 软件在请求的时候不会带上 referrer 的，本质上和直接用浏览器请求是一样的。

所以，为了避免被人 “一晚上抓走一套房” 的 oss 流量盗用问题，建议为你的阿里云 oss 添加上 cdn（或者使用又拍云 oss 作为图床，又拍云的 oss 自带访问控制）

以又拍云 cdn 为例，在 cdn 设置里面，可以配置访问控制

这里有如下一些配置项，注释里面说明了它们对应的作用

bash

IP黑白名单 # 白名单：允许的ip,黑名单：不允许的ip
# 如果发现某一个ip的请求次数过多，有恶意请求嫌疑，可以暂时将这个ip设置为黑名单
CORS 跨域共享 # 参考http://ruanyifeng.com/blog/2016/04/cors.html
地区访问限制 # 禁止或允许特定地区的限制
Referer 防盗链 # 重点，建议开启白名单，只将自己的域名添加到白名单中（建议开启）
User-Agent 防盗链 # 限制只有某种类型的客户端、浏览器可以访问资源
Token 防盗链 # 有些麻烦，请自行了解。对于静态博客而言，并不方便
回源鉴权 # 如果源站服务器有鉴权操作，可以在这里配置
IP 访问限制 # 对单个ip的请求速率进行限制（建议开启）
CC 防护 # 防护cc攻击
WAF 保护 # Web Application Firewall

对于 hexo 静态博客而言，建议配置 Referer 的防盗链，和 IP 的访问限制。同一个 ip 如果访问速率过高，直接禁止其访问。

如果你的 hexo 站点是部署在自己的服务器上，cdn 还有一个非常棒的功能，那就是隐藏你服务器的真实 ip，避免被打

4.ssh 免密部署

bash

1 2	hexo cl # 清除已有格式 hexo g --d # 应用更改，并push到git仓库

git 本地用命令行操作的时候，可能每一次 hexo g --d 操作都会让你输入一次账户和密码，我们只需要生成一个 SSH 公钥给 git 仓库，就能跳过这个操作

具体生成操作可以查看这个博客👉如何使用 ssh 密钥配置 git

在设置好后，记得把 hexo 的_config.yml 文件中 git 仓库的 https 链接更换为 ssh 链接！

yaml

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:musnow/musnows.github.io.git
  branch: master

4.1 关于 gitee 和 github 的优劣

咳咳，gitee 的一些 ex 操作让我不得不换到了 github！而且说句实话，虽然 gitee 服务器在国内，其 gitee pages 的访问速度真不见得比 github 快多少

github 无审查（光是这一点已经赢了😂）gitee 说我写的技术博客有问题，不给我部署。又不告诉用户问题在哪，只能是一脸懵逼😥
github 在 hexo g --d 部署了之后能自动更新；gitee 还需要你自己点一下更新按钮，很烦
github 可以免费绑定你自己的域名；gitee 只有企业版才行

hexo 从 gitee 切换到 github 非常方便，在 github 中创建一个用户名.github.io 的仓库，将你的 hexo 中_config.yml 的远端仓库路径一改，部署了之后，直接就能正常访问！这一点的具体操作，前文 1.2 就已经介绍过了。

yaml

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:musnows/musnows.github.io.git
  branch: master

不管用什么博客平台，平台只是一个载体，分享技术才是重要的！

4.2 netlify

netlify 的部署非常容易，其访问速度比 github pages 快多了！实测 netlify 的延迟只有 80ms，而 github pages 是 200ms

部署参考🦋Hexo+Github+Netlify 部署个人博客

最最最棒的一点是，netlify 的部署速度很快，几乎是你 hexo d 刚刚上传到仓库，没过几秒他就部署成功了！

你可以主要使用 netlify，将 github.io 作为镜像站；不过这样的话，评论系统可能会出现一些问题，要注意设置主站的 url，别把评论系统弄 boom 了！

操作很简单，github 登陆后，选择你的 github 仓库

再选择对应的分支，点击底部的 deploy site，就大功告成了！

等待这里出现 published 的字样，就可以访问你的站点了。域名在 domain settings 里面设置就 OK

4.3 vercel

vercel 同理，也是选择 musnows.github.io，注意模板不能选择 hexo，否则会部署失败。

模板选择 other，过一会就能部署成功；这样就相当于一个站点有 3 个备份了，完美！

4.4 进阶：netlify 和 vercel 完全自动部署 hexo

上文的 netlify 和 vercel 的介绍都是让它们直接使用了 github.io 的静态文件仓库，并没有把这两个平台的真正功能发挥出来。

netlify 和 vercel 可以设置 hexo 源配置仓库，设置了之后，只要仓库有 push，它们就会自动执行 hexo g 功能，将更新应用到站点里面。不再需要本地的 hexo 手动操作了。

配置成功了之后，即便是在没有 nodejs 环境下的电脑中，你也只需要修改 hexo 博客 source/_posts 里面的 md 文件，push 到仓库里就能更新你的博客！

【教程】netlify 或 vercel 完全自动部署 hexo | 慕雪的寒舍

5. 关于 hexo 文内 toc 问题

keep 模板已经自带了边栏 toc，可以在右上角打开

实际上，我们可以通过 hexo-toc 插件实现类似 CSDN 和 typora 的文章内 toc（这个功能很多 markdown 编辑器都不支持，比如 obsidian）

文内 toc 插件安装参考了这篇知乎文章👉传送门

在 git bash 里面输入以下命令

plaintext

1	npm install hexo-toc --save

插件安装完毕后，就可以在 md 文件的头部插入  来生成目录（在 typora 和 csdn 中是 [TOC] 格式）

但是这个插件有一个问题，就是无法和 keep 主题的边栏 toc 同时使用。即使用了该插件后，边栏 toc 无法跳转，就只能二选一了。

无奈只能卸载这个插件了，个人感觉还是边栏 toc 重要一点

plaintext

1	npm remove hexo-toc --save

6. 自定义首页文章预览内容

hexo 本身支持自定义文章预览（简介），在 md 文件中添加  就可以自定义文章预览显示的内容

效果如下👇 建议不要在需要预览的内容中设置标题，不然看起来会非常怪异

部分 hexo 主题不支持该方式设置预览内容，请参考主题设置文档。

7. 评论系统

7.1 Valine 评论系统后台如何查看评论

在配置好 Valine 评论系统后，可以在 leancloud 后台管理中看到评论的 html 源码。

但默认的排序的问题是，看不到用户是在那一篇文章下面评论的。我们可以通过调整内容排序（右上角那个带橙色圆点的按钮），把 url 往前移动，这样就能更方便地看到是谁评论了自己的博客，以及评论文章的位置

7.1.1 leancloud 邮箱提醒

你可以利用 valine 插件 admin 来实现邮箱提醒

Github 项目地址：DesertsP/Valine-Admin

但是这个插件需要你有一个备案过的域名！！！！

然后我就在 22-04-27 这天发现，其实我设置的邮箱提醒已经生效了！😂真是一波三折（然后又挂了，参看 7.2 😥）

大家根据这篇博客的教程进行邮件提醒的配置就 OK 了！valine 评论系统使用

7.1.2 关于云引擎 500 报错

本部分更新于 2023-01-05，今天更新了博客的 url 地址，然后就发现 leancloud 的邮箱提醒挂掉了，看后台会有一个这样的报错

plaintext

[2023-01-06T03:20:03.518063400Z][instance:web1] LeanEngine: /self_wake: 500: Error: undefined is not a valid uri or options object.
[2023-01-06T03:20:03.518111500Z][instance:web1]     at request (/home/leanengine/app/node_modules/request/index.js:44:11)
[2023-01-06T03:20:03.518117400Z][instance:web1]     at /home/leanengine/app/cloud.js:54:5
[2023-01-06T03:20:03.518121000Z][instance:web1]     at /home/leanengine/app/node_modules/leanengine/lib/leanengine.js:202:14
[2023-01-06T03:20:03.518124500Z][instance:web1]     at processTicksAndRejections (internal/process/task_queues.js:97:5)

最终我百度到了这个 issue，里面提到的和我的情况一模一样：邮件提醒报错，不知道为什么 Error: undefined is not a valid uri or options object. #138

简单说来，就是云引擎需要绑定域名

而我最开始选择的 leadcould 是在国内，域名必须要 ipc 备案才能正常绑定；如果需要用独立 IP，那还得额外掏钱，50 一个月实在是负担不起😥

至于之前为啥邮箱提醒能用呢？我也不知道；我猜是 leancloud 最近更新了策略，就需要强制绑定才能用了……

解决方法，使用国际版 leancloud！

7.2 使用 Waline 评论系统

这部分可以参考 Waline 的帮助文档，本站的评论系统也于 2023-01-06 从 valine 更换为了 waline，keep 版本 3.4.5->3.5.2

配置好了 vercel 的自定义的域名之后，就可以通过下面两个方式来快捷管理

plaintext

1 2	评论系统：example.yourdomain.com 评论管理：example.yourdomain.com/ui

下图为更新前的 valine 评论界面

以下为更新后的 waline 界面，其支持上传图片！可惜 waline 考虑到页面加载速度，图片默认只支持 128kb；

对于我来说，waline 最大的优势就是邮箱提醒功能可以很方便地用 vecel 的环境变量搞定，效果也很不错！同时，waline 有一个后端地址，能隐藏掉 leancloud 的 key，避免别人刷你的 leancloud 用量！

7.2.1 自定义 waline 邮箱提醒模板

参考👉waline 邮件通知模板样式一览

为了避免源站无法访问，这里贴出当前我使用的邮件通知模板；

注意，我是用 vercel 部署的，所以只需要修改环境变量就行了。如果你是其他部署方式，请参考上面博客中的详细教程！

MAIL_SUBJECT

plaintext

1	{{parent.nick \| safe}}，您在『{{site.name \| safe}}』上的评论收到了来自 {{self.nick \| safe}} 的回复

MAIL_SUBJECT_ADMIN

plaintext

1	『{{site.name \| safe}}』上有新评论了

MAIL_TEMPLATE

html

<div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffffff repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);"><div style="width:100%;background:#49BDAD;color:#ffffff;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));background-image: -webkit-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;"><p style="font-size:15px;word-break:break-all;padding: 23px 32px;margin:0;background-color: hsla(0,0%,100%,.4);border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #ffffff;" href="{{site.url}}" target="_blank">{{site.name}}</a>上的留言有新回复啦！</p></div><div style="margin:40px auto;width:90%"><p>Hi, {{parent.nick}}，您曾在文章上发表评论：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{{parent.comment | safe}}</div><p><strong>{{self.nick}}</strong> 给您的回复如下：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:14px;color:#555555;">{{self.comment | safe}}</div><p>您可以点击<a style="text-decoration:none; color:#12addb" href="{{site.postUrl}}" target="_blank">查看回复的完整內容</a>，欢迎再次光临<a style="text-decoration:none; color:#12addb" href="{{site.url}}" target="_blank">{{site.name}}</a>。<hr /><p style="font-size:12px;color:#b7adad">本邮件为系统自动发送，请勿直接回复邮件哦，可到博文内容回复。</p></p><style type="text/css">a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none}</style></div></div>

MAIL_TEMPLATE_ADMIN

html

<div style="background-image: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/bg.jpg);;padding:20px 0px 20px;margin:0px;background-color:#ded8ca;width:100%;"><div style="background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/leisi-714x62.png) repeat-y scroll top;"><div style="border-radius: 10px 10px 10px 10px;font-size:14px;color: #555555;width: 666px;font-family:'Century Gothic','Trebuchet MS','Hiragino Sans GB',微软雅黑,'Microsoft Yahei',Tahoma,Helvetica,Arial,'SimSun',sans-serif;margin:50px auto;border:1px solid #eee;max-width:100%;background: #ffe8dd61;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);margin:auto"><img class="headerimg no-lightbox entered loaded"src="https://npm.elemecdn.com/sarakale-assets@v1/bg/bg3.jpg"style="width:100%;overflow:hidden;pointer-events:none"data-ll-status="loaded"><div style="width:100%;color:#9d2850;border-radius: 10px 10px 0 0;background-image: -moz-linear-gradient(0deg, rgb(67, 198, 184), rgb(255, 209, 244));height: 66px;background: url(https://npm.elemecdn.com/sarakale-assets@v1/Article/email/line034_666x66.png) left top no-repeat;"><p style="font-size:16px;font-weight: bold;text-align:center;word-break:break-all;padding: 23px 32px;margin:0;border-radius: 10px 10px 0 0;">您在<a style="text-decoration:none;color: #9d2850;"href="{{site.url}}"target="_blank">{{site.name}}</a>上的文章有了新的评论</p></div><div style="margin:40px auto;width:90%;"><p><strong>{{self.nick}}</strong>回复说：</p><div style="background: #fafafa repeating-linear-gradient(-45deg,#fff,#fff 1.125rem,transparent 1.125rem,transparent 2.25rem);box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);margin:20px 0px;padding:15px;border-radius:5px;font-size:15px;color:#555555;">{{self.comment|safe}}</div><p>您可以点击<a style="text-decoration:none; color:#cf5c83"href="{{site.postUrl}}"target="_blank">查看回复的完整內容</a></p></div></div></div></div>

7.2.2 163 邮箱自定义发件人名字

这里需要注意，官方给出了两个自定义邮箱发件人和发件邮箱的环境变量，其对于网易的 163 和 126 邮箱来说，你必须要设置成你的登录邮箱才可以，否则会报错，没办法发送邮箱

plaintext

1 2	SENDER_EMAIL 用来自定义发件邮箱，但是网易邮箱不支持 SENDER_NAME 自定义发件人

而且还有一点，就是这两个环境变量需要都加上，邮箱自定义发件人才能生效；

如果你只设置了 SENDER_NAME 环境变量，而没有设置 SENDER_EMAIL，那么发件人是不会生效的，此时发件人会是你的邮箱，很难看；

7.2.3 强制用户填写昵称和邮箱

在 waline 的组件里面，可以配置用户必须填写的信息。比如为了让我对用户的回复能通过邮箱提醒到对方，我需要开启强制用户填写邮箱的功能

https://waline.js.org/reference/client/props.html#requiredmeta

如果你用的 hexo 主题有对这一项进行定制化，那就可以直接在主题配置文件里面加上（具体请参考你所用 hexo 主题的文档）

keep 主题并没有对此项进行配置，修改配置文件是没有用的。需要我们修改源码

plaintext

1	themes/keep/layout/_partial/comment/waline.ejs

找到下面的部分（第 37 行左右）

plaintext

Waline.init({
    el: '#waline-comment',
    serverURL: '<%= waline_env_server_url %>',
    lang: '<%= config.language %>' || 'zh-CN',
    comment: '.post-comments-count',
    reaction: '<%= waline_reaction %>' === 'true'
 })

在最后加上

plaintext

1	requiredMeta: ['nick','mail']

添加之后的完整代码如下

plaintext

Waline.init({
    el: '#waline-comment',
    serverURL: '<%= waline_env_server_url %>',
    lang: '<%= config.language %>' || 'zh-CN',
    comment: '.post-comments-count',
    reaction: '<%= waline_reaction %>' === 'true',
    requiredMeta: ['nick','mail']
})

此时，用户想评论的时候，就必须填写昵称和邮箱了

8. 部分 keep 主题魔改记录

目前本博客已经修改为 butterfly 主题。为了保证以下教程的可用性，我部署了一个不再更新的 keep 主题博客，大家可以查看该站点，参考 keep 主题魔改后的效果

plaintext

1	https://keep-hexo.musnow.top

突出的就是一个可持续性发展👻

8.0 开始

除了本文第一点里面提到的魔改 keep 参考教程，我还修改了其他一些内容，并对 keep v3.5.2 更新了的配置文件进行说明；以下是各个框的标号

以下是不同框对应的配置文件路径和对应的类，帮助你找到他们的配置文件路径；更详细的介绍参考 hexo-keep 首页样式自定义

plaintext

1  Hexo\themes\keep\source\css\layout\_partial\header.styl
   .header-wrapper {}
2  Hexo\themes\keep\source\css\layout\page.styl
   .page-container {}
3  Hexo\themes\keep\source\css\layout\_partial\first-screen.styl
   .description {}
4  Hexo\themes\keep\source\css\layout\_partial\first-screen.styl
   .s-icon-list {}
5  Hexo\themes\keep\source\css\layout\page.styl
   .page-main-content {}
6  Hexo\themes\keep\source\css\layout\home-content.styl
   .home-content-container {}
7  Hexo\themes\keep\source\css\layout\home-content.styl
   .home-article-item {}

版本基于 KEEP V3.5.2，基本兼容 V3.6.1，如果你发现配置文件位置有变动，请在下方留言告知。

备注：keep 不支持深层次的自定义页面，所有的修改都是针对 npm 包进行的，会在你更新 keep 的时候丢失！所以想折腾，建议做好不再更新 keep 的准备哦（除非你愿意每次都改一遍）🤣

blog/node_modules/hexo-theme-keep

如果觉得本站修改过后的样式很不错，那可以去我的 Github 仓库，直接把 keep 的模组下载后放到你的本地就可以了；这样就只需要修改 keep/source/css/layout/page.styl 里面的两个背景图 url 就可以了！

8.1 雪花飘飘

我的主页有飘动的雪花，想知道怎么弄的？那就往下看吧！

雪花代码来自博客👉hexo+next 添加雪花飘落背景效果

在 Hexo-themes-keep\source\js 下新建文件 snow.js

/*样式二*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200; /* 最多片数 */
    this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */
    this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function (callback) {
        setTimeout(callback, 1000 / 60);
    };

cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function () {
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
    /* 添加Dom结点 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改变的处理 */
    window.onresize = function () {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */
    }
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
    this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
    this.size = Math.random() * flakeSize + 2; /* 形状 */
    this.maxSize = flakeSize; /* 最大形状 */
    this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
    this.fallSpeed = fallSpeed; /* 坠落速度 */
    this.velY = this.speed; /* Y方向速度 */
    this.velX = 0; /* X方向速度 */
    this.stepSize = Math.random() / 30; /* 步长 */
    this.step = 0 /* 步数 */
}
flakeMove.prototype.update = function () {
    var x = this.x,
        y = this.y;
    /* 左右摆动(余弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* 飞出边界的处理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function (width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function (ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/* 画雪 */
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /*  一帧一帧的画 */
    this.loop = requestAnimationFrame(function () {
        drawSnow.apply(that);
    });
}
/* 调用及控制方法 */
var snow = new snowFall({
    maxFlake: 60
});
snow.start();

添加完成后，在 hexo-theme-keep\layout\layout.ejs 中添加如下引用

plaintext

1	<script type = "text/javascript" src="/js/snow.js"></script>

添加完成后的 layout.ejs 文件示例如下

html

<!DOCTYPE html>
<html lang="<%= config.language %>">
<%- partial('_partial/head') %>
<body>
<%- body %>
<%- partial('_partial/scripts') %>

<script type = "text/javascript" src="/js/snow.js"></script>

</body>
</html>

重新部署，就 OK 啦！

8.2 首页描述字体的背景框和透明度

这里对应的是 3 号框的文字

修改 hexo-theme-keep\source\css\layout\_partial\first-screen.styl 中以下部分，有注释的地方就是我修改了的地方

.description {
  /*color $first-screen-font-color*/
  color: rgb(255 250 250) /*字体颜色*/
  font-weight bold
  font-size $first-screen-font-size
  line-height 1.8
  text-align center

  background: rgba(50,50,50,0.3); /*字体背景颜色和透明的*/
  padding: 3px 15px; /*字体背景框的大小*/
  border-radius: 5px; /*圆角*/

  .desc-item {
    /*color $first-screen-font-color*/
    color: rgb(255 250 250) /*字体颜色*/
  }

  +keep-tablet() {
    font-size $first-screen-font-size * 0.9
  }
}

修改了之后，首页居中的介绍文字就会变成当前的模样（之前的样式没有背景框，在自定义背景后很容易就看不清）

同时我们还需要修改 4 号框，给它也添加一个能够让它看得清的背景框（图标颜色没有办法修改，只能修改背景框颜色）

4 号框所在配置文件和 3 号框相同，找到.s-icon-list 字段，添加以下内容

.s-icon-list {
  background: rgba(220 220 220,0.3); /*字体背景颜色和透明的*/
  padding:4px 11px 4px 11px; /*字体背景框的大小*/
  border-radius: 5px; /*圆角*/
  ...
}

8.3 顶部字体加粗

hexo 顶部底部透明度渐变

参考这篇博客的 1-2, 修改 keep\source\css\layout\_partial\header.styl

找到以下代码

plaintext

.menu-item {
	float: left;
	position: relative;
	margin-left: 30px;
	font-size: 1rem;
	cursor: pointer;
	color: var(--default-text-color);
	......

加一条 font-weight: bold，修改结果：

plaintext

.menu-item {
	float: left;
	position: relative;
	margin-left: 30px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	color: var(--default-text-color);
	......

顶栏和底栏透明度渐变修改参考 8.5，我更新过后的方法可以让顶栏和底栏的透明度渐变随着明暗模式变化

8.4 文章侧边栏 toc

更新了之后的侧边栏变到了页面的右边，且默认下是没有背景的（因为默认在文章页面也是纯白的，没有背景也能看得清）

但是当下我已经设置了全局背景，所以就需要修改一下！

keep 更新 3.5.2 之后的侧边栏配置文件变了，现在是在 keep/source/css/layout/_partial/ 中的 toc.styl

stylus

.post-toc-wrap {
  position relative
  box-sizing border-box
  width 100%
  height 100%
  overflow-y auto
  font-size 0.92rem
  font-weight: bold /*字体加粗*/
  border-radius: 5px; /*圆角*/
  ...
}

添加我注释了的这几项就 OK 了，如果你想要旧版样式（固定在左侧）可以尝试将 position 修改为 fixed

8.5 明暗模式适配

修改完背景颜色和背景图之后，就会出现下面的情况：如果有用户的电脑是暗色模式，进入博客的时候，就会发现字完全看不清，整个界面都很难看

解决办法那就是需要让我们的背景颜色能根据明暗自动切换！

我们要做的，就是在 hexo-theme-keep\source\css\ 中添加一个 my 文件夹，并在内部添加一个 user-style.styl

stylus

// 全局背景的的颜色切换
.dark-mode{
    --content-background-color:#37383fe6;
}
.light-mode{
    --content-background-color:#ffffffe6;
}

// toc栏大小
.post-toc-wrap .post-toc .nav{
  padding:21px
}

// 使toc能够更具明暗模式自动切换颜色
.light-mode .post-toc-wrap {
    background-color: #ffffffe6;
}
.dark-mode .post-toc-wrap {
    background-color: #37383fe6;
}

// 顶部背景透明度渐变，明暗变化
.light-mode .header-wrapper {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4));
}
.dark-mode .header-wrapper {
    background: linear-gradient(to bottom, rgba(30, 30, 30, 1), rgba(30, 30, 30, 0.4));
}

// 底部背景透明度渐变，明暗变化
.light-mode .page-main-content-bottom {
  background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4))/*透明度设置*/
}
.dark-mode .page-main-content-bottom {
  background: linear-gradient(to top, rgba(30, 30, 30, 0.9), rgba(30, 30, 30, 0.4));
}

写完后，在 css/style.styl 中引用这个文件就可以了

stylus

1	@import "my/user-style.styl"

刚开始我用的办法太蠢了，浪费了好多时间，而且经常失效。后来请教了一位会前端的朋友，他一下就帮我搞定了，呜呜呜呜😫

按照上面修改了顶栏和底栏样式后，请不要开启 keep 配置文件中的 header_transparent，否则两个效果叠加，主页顶栏会变得有些难看

plaintext

1 2	# Set transparent background for header. header_transparent: false # Option values: true \| false

8.6 页脚自定义

8.6.1 添加站点运行时间

2023-01-09 添加了站点运行时间，删除了 hexo 主题的提示。

要想添加网站运行时间，keep 主题修改 keep/layout/_partial/footer.ejs，找到如下代码

plaintext

<% if (f_upyun) { %>
    <div class="ypyun-info info-item">
        <a target="_blank" rel="nofollow" href="<%= f_upyun %>">
        <%- __('footer_upyun', '<img src="/images/upyun.png" height="20">') %>
        </a>
    </div>
<% } %>

在下方添加如下代码，来自👉hexo+yilia 添加网站运行时间

源站的代码有点问题，详见该页面评论（有人指出，但作者没有更新正文）

plaintext

<!-- 添加网站运行时间 -->
        <% if (theme.running_time && theme.running_time.enable && theme.running_time.create_time) { %>
            <div class="timerun-info info-item">
                <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
                <script>
                var now = new Date();
                function createtime() {
                    //此处修改你的建站时间或者网站上线时间
                    var create_time = '<%- theme.running_time.create_time %>';
                    var grt = new Date(create_time);
                    now.setTime(now.getTime() + 250);
                    days = (now - grt) / 1000 / 60 / 60 / 24;
                    dnum = Math.floor(days);
                    hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
                    hnum = Math.floor(hours);
                    if (String(hnum).length == 1) {
                        hnum = "0" + hnum;
                    }
                    minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
                    mnum = Math.floor(minutes);
                    if (String(mnum).length == 1) {
                        mnum = "0" + mnum;
                    }
                    seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
                    snum = Math.round(seconds);
                    if (String(snum).length == 1) {
                        snum = "0" + snum;
                    }
                    document.getElementById("timeDate").innerHTML = "本站已安全运行 " + dnum + " 天 ";
                    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
                }
                setInterval("createtime()", 250);
                </script>
            </div>
        <% } %>
        <!-- 添加网站运行时间 -->

这里修改完毕后，还需要在 keep 的配置文件里面添加下面这一项；如果后续不想要了，可以直接设置为 false 禁用这一栏

yaml

# 网站运行时间，格式形如：“本站已安全运行 101 天 12 小时 13 分 41 秒”
# Runing Time
running_time:
  enable: true
  create_time: '01/01/2021 00:00:00' #此处修改你的建站时间

如果你想删除 hexo 的提示，那就注释掉 footer.ejs 的这些代码

plaintext

<!--注释掉这里的代码，就可以取消底部的hexo标识-->
<!-- <div class="theme-info info-item">
    <%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %>&nbsp;|&nbsp;<%- __('theme') %>&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.5.2</a>
</div> -->

8.6.2 修改页脚内容到底部的距离

如图，这个页脚到底部的距离实在有点宽，弄得背景图都被挡住了好大一部分；对于强迫症来说，这谁受得了，改了！

找到 hexo-theme-keep\source\css\layout\_partial 修改 footer.styl 的 padding-bottom

css

.info-container {
  padding-bottom 1rem
  text-align center
}

默认是 1rem，这里我直接改成 0 看看是不是修改对地方了；hexo s 一看，直接靠底了，说明我们改对地方了！

随后我就修改成了 0.3rem，还是需要留一点边距的

8.6.3 修改页脚字体颜色

配置了背景图之后，页脚的字体颜色不那么容易看清楚，这时候应该怎么办？改他丫的！

在浏览器按 F12 进入开发者模式，用截图软件（qq 截图或者 sanipaste）选取到这个框上，就能看到颜色的色值

复制该色值，在 F12 所打开的开发者面板中的页面一栏，粘贴搜索，可以看到 --text-color-4 正好就对应了这个颜色

改成黑夜模式，重复上述步骤，可以看到，此时颜色依旧对应的是 --text-color-4 那么就实锤了该变量即为页脚字体颜色的变量

直接在 8.5 中配置好的 user-style.styl 里面添加，自定义一个颜色；我们的需求是让黑夜模式的字体更亮，白天模式的字体更黑

stylus

.dark-mode{
    --content-background-color:#37383fe6;
    --text-color-4:	#F5F5F5; //黑夜模式底部字体颜色
}
.light-mode{
    --content-background-color:#ffffffe6;
    --text-color-4: #242424; //白天模式底部字体颜色
}
//...

大功告成！

8.6.4 页脚添加 shields.io 的图标

为了更好的展示一部分内容，我们可以在页脚加上一些图标，并让这些图标可以点击跳转到指定页面！

https://shields.io/

修改 hexo-theme-keep\source\css\layout\_partial\footer.ejs，在中间部分添加如下代码（直接跟在 8.6.1 配置的站点运行时间之后）

如果你不知道具体的位置，还请移步我的 Github 仓库查看更改后的文件

plaintext

<div class="shields-info info-item">
	<a href="link for click" >
        <img src="img url" height="20px">
     </a>
</div>

这里的 href 后跟随的是点击图标会跳转的网页，img src 后面跟随的是图片的 url；

比如我这样配置了之后，页脚就会出现一个这样的图标，用于标识我的 hexo 主题版本

点击这个图标，会跳转到 keep 主题的 Github 仓库；

为了方便配置，写成下面的循环 + if 判断的形式；并且将图标的搞定锁定为 20px，避免不同图标大小导致不统一，很难看

plaintext

<!-- 添加底部的shields io图片 -->
      <% if (theme.shields && theme.shields.enable) { %>
          <div class="shields-info info-item">
              <% for (var i in theme.shields.data){ %>
                  <% if (theme.shields.data[i].img) { %>
                      <a href="<%= theme.shields.data[i].link%>" >
                          <img src="<%= theme.shields.data[i].img%>" height="20px">
                      </a>
                  <% } %>
              <% } %>
          </div>
      <% } %>

这样就可以直接在配置文件中添加新的图标和 url，不需要来这里修改源码了！😁

转到我们 keep.yml 配置文件，在最底部添加如下代码

yaml

# Add shields.io in footer
shields:
  enable: true # Option values: true | false
  data:
    hexo:
      link: https://github.com/XPoet/hexo-theme-keep
      img: https://img.shields.io/badge/hexo-keep%20v3.5.2-brightgreen

这样就能在底部添加一个上面提到过的 hexo 主题图标

要想追加，那就继续在后面以相同格式填写

yaml

# Add shields.io in footer
shields:
  enable: true # Option values: true | false
  data:
    hexo:
      link: https://github.com/XPoet/hexo-theme-keep
      img: https://img.shields.io/badge/hexo-keep%20v3.5.2-brightgreen
    travelling:
      link: https://www.travellings.cn/go.html
      img: https://img.musnow.top/i/2023/05/647563ddab0fb.gif

代码会自动判断 img 是否为空，如果 img 为空，则不会添加该模块；link 项可以为空，此时点击图标不会跳转到其他页面。

效果还是不错哒！您可以在本页页脚查看😶‍🌫️

8.7 点击头像跳转关于页面

这个操作就是把没有多少人看的关于页面给藏起来，这样就不需要占用顶栏的一个 menu 了

修改方法很简单，在 keep 主题中，默认点击头像的操作是跳转到当前页面（可以理解为啥都不做）

我们只需要把链接改成跳转到关于页面就行了！

plaintext

1	themes/keep/layout/_partial/header.ejs

修改以下字段

plaintext

<% if (s_logo || bi_logo_img) { %>
    <a class="logo-image" href="/">
        <%- image_tag(s_logo || bi_logo_img) %>
    </a>
<% } %>

修改之后

plaintext

<% if (s_logo || bi_logo_img) { %>
    <a class="logo-image" href="/about/">
        <%- image_tag(s_logo || bi_logo_img) %>
    </a>
<% } %>

如果你想让点击网站标题也跳转到关于页面，那就把下面的 logo-title 也给改掉

plaintext

1
2
3

<a class="logo-title" href="/about/">
   <%= bi_title || config_title || 'Keep Theme' %>
</a>

随后进入 keep 的 config 文件，注释掉 memu 中的 about 页面，这并不代表 about 页面会被删除，只是不显示在 menu 上

yaml

menu:
  Home: /
  Archives: /archives
  Categories: /categories
  Tags: /tags
  留言: /qa
  Links: /links
  #About: /about

搞定！

未完待续…

期待后续的更新，亦或者是我能从折腾中走出来，别再瞎搞了……

今天的升级部署就花了几乎一整天的时间😥

1. 基本配置

1.1 安装 hexo

1.1.1 报错本系统不支持运行脚本

1.1.2 初始化博客文件夹

1.2 部署到 github pages

1.2 keep 主题

1.3 keep 主题安装目录在哪？

1.4 主题页面设置成中文

2. 如何添加博客文章

2.1 首页置顶

2.2 搭建图床（必做）

2.3 如何导出 CSDN 的博客

3. 图片无法显示问题

3.1 解决：设置空 referrer

3.2 关于 oss 安全 (CDN)

4.ssh 免密部署

4.1 关于 gitee 和 github 的优劣

4.2 netlify

4.3 vercel

4.4 进阶：netlify 和 vercel 完全自动部署 hexo

5. 关于 hexo 文内 toc 问题

6. 自定义首页文章预览内容

7. 评论系统

7.1 Valine 评论系统后台如何查看评论

7.1.1 leancloud 邮箱提醒

7.1.2 关于云引擎 500 报错

7.2 使用 Waline 评论系统

7.2.1 自定义 waline 邮箱提醒模板

7.2.2 163 邮箱自定义发件人名字

7.2.3 强制用户填写昵称和邮箱

8. 部分 keep 主题魔改记录

8.0 开始

8.1 雪花飘飘

8.2 首页描述字体的背景框和透明度

8.3 顶部字体加粗

8.4 文章侧边栏 toc

8.5 明暗模式适配

8.6 页脚自定义

8.6.1 添加站点运行时间

8.6.2 修改页脚内容到底部的距离

8.6.3 修改页脚字体颜色

8.6.4 页脚添加 shields.io 的图标

8.7 点击头像跳转关于页面

未完待续…

微信扫一扫：分享