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

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

image-20230106175729272

1.基本配置

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

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

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

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

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

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

image-20230110081629876

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

image-20230110082009338

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

1
cd D:\example

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

image-20230110082203430

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

1
2
$ node -v
v16.13.1

随后在这里执行以下命令

1
2
3
4
5
6
7
# 安装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

1
npm install -g hexo-cli

测试是否成功安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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，遇到了这个报错

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

image-20230315163145077

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

image-20230315163508124

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

image-20230315163516139

1.1.2 初始化博客文件夹

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

1
2
3
4
5
6
$ 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文件夹

1
cd blog

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

1
npm install

随后输入下面三个命令

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

输出的结果如下

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
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了！

image-20230110085731688

1.2 部署到github pages

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

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

1
2
3
4
5
6
# 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，可以这样写

1
2
3
4
5
6
deploy:
  type: git
  repo:
	  github: https://github.com/musnows/musnows.github.io.git
	  gitee: git@gitee.com:musnow/musnow.git
  branch: master

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

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

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

1
ERROR Deployer not found: git

安装 hexo-deployer-git

1
npm install hexo-deployer-git --save

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

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

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

image-20230110090933516

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

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

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

1.2 keep主题

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

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

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

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

前人栽树后人乘凉，在keep开发者博客的友链中找到了魔改了主题的老哥，直接学习起来😍！hexo主题魔改汇总和总结

更多魔改keep主题的内容详见本文 第8点

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

1.3 keep主题安装目录在哪？

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

image-20220425190003370

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

image-20220425190030819

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

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

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

1.4 主题页面设置成中文

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

image-20220425185741259

2.如何添加博客文章

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

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

  • 如果要设置多个tag，样式为[Hexo,typora,博客]
  • 多个分类categories同理
  • 更推荐用列表方式来添加多个tag或者分类，避免和子分类混淆
1
2
3
4
5
6
7
8
9
10
---
title: 使用hexo+gitee搭建个人博客
date: 2022-04-23 13:30:14
tags: 
    - Hexo
categories: 
    - 差生文具多
    - [主分类,子分类,子子分类] # 部分主题支持嵌套分类
sticky: 999
---

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

2.1 首页置顶

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

image-20220425125158418

image-20220425125245992

2.2 搭建图床（必做）

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

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

2.3 如何导出CSDN的博客

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

image-20220425125515437

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

image-20230106110917169

3.图片无法显示问题

3.1 解决：设置空referrer

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

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

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

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

image-20220425130834933

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

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

image-20220425130921492

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

3.2 关于oss安全(CDN)

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

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

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

image-20230310130225082

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

image-20230310130546902

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

1
2
3
4
5
6
7
8
9
10
11
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免密部署

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

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

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

1
2
3
4
5
6
# 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就已经介绍过了。

1
2
3
4
5
6
# 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

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

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

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

image-20230128220505152

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

image-20230128220600534

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

image-20230128220738530

4.3 vercel

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

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

image-20230128221709813

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，可以在右上角打开

image-20220424211602810

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

image-20220425132216854

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

在git bash里面输入以下命令

1
npm install hexo-toc --save

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

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

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

1
npm remove hexo-toc --save

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

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

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

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

7.评论系统

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

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

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

image-20220426150705775

7.1.1 leancloud邮箱提醒

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

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

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

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

image-20220427102221832

7.1.2 关于云引擎500报错

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

1
2
3
4
5
[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一个月实在是负担不起😥

图片来自waline帮助文档

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

QQ图片20220419102802

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

7.2 使用 Waline评论系统

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

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

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

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

image-20230106114515409

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

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

image-20230106115820595

7.2.1 自定义waline邮箱提醒模板

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

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

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

MAIL_SUBJECT

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

MAIL_SUBJECT_ADMIN

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

MAIL_TEMPLATE

1
<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

1
<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邮箱来说，你必须要设置成你的登录邮箱才可以，否则会报错，没办法发送邮箱

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

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

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

image-20230109091525771

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

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

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

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

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

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

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

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

在最后加上

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

添加之后的完整代码如下

1
2
3
4
5
6
7
8
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']
})

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

image-20230310233931817

8.部分keep主题魔改记录

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

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

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

8.0 开始

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

image-20230106142423406

image-20230106173943295

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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-themes-keep\source\js下新建文件snow.js

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/*样式二*/
/* 控制下雪 */
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 中添加如下引用

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

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

1
2
3
4
5
6
7
8
9
10
11
<!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中以下部分，有注释的地方就是我修改了的地方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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号框，给它也添加一个能够让它看得清的背景框（图标颜色没有办法修改，只能修改背景框颜色）

image-20230106175019101

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

1
2
3
4
5
6
.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

找到以下代码

1
2
3
4
5
6
7
8
.menu-item {
	float: left;
	position: relative;
	margin-left: 30px;
	font-size: 1rem;
	cursor: pointer;
	color: var(--default-text-color);
	......

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

1
2
3
4
5
6
7
8
9
.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

1
2
3
4
5
6
7
8
9
10
11
.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 明暗模式适配

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

image-20230106173804969

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

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

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
// 全局背景的的颜色切换
.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 中引用这个文件就可以了

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

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

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

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，找到如下代码

1
2
3
4
5
6
7
<% 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添加网站运行时间

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

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
<!-- 添加网站运行时间 -->
        <% 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禁用这一栏

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

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

1
2
3
4
<!--注释掉这里的代码，就可以取消底部的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 修改页脚内容到底部的距离

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

image-20230109103746001

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

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

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

image-20230109103906106

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

8.6.3 修改页脚字体颜色

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

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

image-20230109192733387

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

image-20230109192832517

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

image-20230109192939536

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

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

大功告成！

image-20230109193218185

8.6.4 页脚添加shields.io的图标

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

https://shields.io/

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

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

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

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

image-20230109193939327

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

image-20230109194011115

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

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

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 添加底部的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配置文件，在最底部添加如下代码

1
2
3
4
5
6
7
# 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主题图标

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

1
2
3
4
5
6
7
8
9
10
# 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主题中，默认点击头像的操作是跳转到当前页面（可以理解为啥都不做）

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

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

修改以下字段

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

修改之后

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

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

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

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

1
2
3
4
5
6
7
8
menu:
  Home: /
  Archives: /archives
  Categories: /categories
  Tags: /tags
  留言: /qa
  Links: /links
  #About: /about

搞定！

未完待续…

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

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