# Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章 ## 前言 本博客使用的是Hugo的LoveIt主题,本文也是基于该主题而写的,不过Hugo的美化步骤应该大同小异,版本如下: ``` hugo: v0.74.2/extended windows/amd64 BuildDate: unknown LoveIt: v0.2.10 ``` **请注意,本文的所有功能都离不开两个新增加的文件:`_custom.scss`和`custom.js`,部分功能还需要`jquery`,在第一章中会提及如何引入。** 另外本文篇幅太长,阅读体验不好,将其进行分章如下: * [Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章](/posts/hugo-3.html/) * [Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章](/posts/hugo-3.1.html/) * [Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章](/posts/hugo-3.2.html/) * [Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章](/posts/hugo-3-3/) ## Valine评论系统添加邮件通知和QQ提醒 LoveIt主题自带的Valine没有邮件通知和QQ提醒功能,所以需要额外使用Valine的增强版`Valine-Admin`来进行功能增强。网上有好几个版本,我这里选择了目前由@W4J1e维护的`Hexo-Valine-ASPush`项目,由于我需要自定义部分改动,所以自己fork了一份:[valine-admin-custom](https://github.com/lewky/valine-admin-custom)。如果需要进行自定义改动的,可以继续fork我的这个项目。 下面开始教程。这里默认你已经使用了Valine作为评论系统,如果还没有对应的LeanCloud应用请自行移步Valine的官方文档: [Valine快速开始](https://valine.js.org/quickstart.html)。 ### 部署LeanCloud云引擎 登陆你的LeanCloud账号,进入你的应用,选择:`云引擎 -> 部署 -> Git部署`,然后输入下面的仓库地址: ``` https://github.com/lewky/valine-admin-custom.git ``` 然后点击部署按钮,等待云引擎将上面的仓库代码克隆下来。接下来需要设置环境变量。 ### 设置环境变量 点击`云引擎 -> 设置`,选择添加新变量,将下列变量一一加入。 变量 | 示例 | 说明 --- | ------ | --------- SITE_NAME | xxx | [必填] 网站名称 SITE_URL | https://xxx.com | [必填] 网站首页地址,地址末尾不要加/ SMTP_USER | xxxxxx@qq.com | [必填] SMTP登录用户,一般为邮箱地址 SMTP_PASS | ccxxxxxxxxch | [必填] SMTP授权码,不是邮箱的登陆密码,请自行查询对应邮件服务商授权码的获取方式 SMTP_SERVICE | QQ | [必填] 邮件服务提供商,支持 QQ、163、126、Gmail 以及 [更多](https://nodemailer.com/smtp/well-known/#supported-services) SENDER_NAME | xxx | [必填] 发件人 SENDER_EMAIL | xxxxxx@qq.com | [必填] 发件邮箱 ADMIN_URL | https://xxx.leanapp.cn/ | [建议] Web主机二级域名(云引擎域名),用于自动唤醒 BLOGGER_EMAIL | xxxxx@gmail.com | [可选] 博主通知收件地址,默认使用SENDER_EMAIL AKISMET_KEY | xxxxxxxx | [可选] Akismet Key 用于垃圾评论检测,设为MANUAL_REVIEW开启人工审核,留空不使用反垃圾 TEMPLATE_NAME | default | [可选] 设置提醒邮件主题,目前内置了多款主题:default、rainbow、custom1、custom2 COMMENT | #post-comment | [可选] 评论 div 的 ID 名,直接跳转到评论位置 设置好变量后,需要重启实例。在部署页面点击重启按钮即可,每次更改变量后都需要重启才能生效。如果对应的Git仓库代码发生变更,需要清除部署,重新克隆代码才能生效。 ### 后台评论管理 首先需要设置管理员信息。在部署云引擎成功后,访问管理员注册页面https://云引擎域名/sign-up,注册管理员登录信息,如:https://cloud.lewky.cn/sign-up 注册成功后可以在`存储 -> 结构化数据 -> _User`里看到多出来一条数据,正是刚刚我们注册成功的用户。 >注:使用原版Valine如果遇到注册页面不显示直接跳转至登录页的情况,请手动删除_User表中的全部数据。 注册成功后,就可以通过这个注册的用户访问后台评论管理页面:https://云引擎域名 ### 配置QQ提醒 1. 前往[Qmsg酱官网](https://qmsg.zendee.cn/),点击管理台登陆账号,选择其中任意一个你想使用的Qmsg酱(QQ机器人),并加其为QQ好友 2. 点击菜单栏里`Qmsg酱`旁边的`QQ号码`,添加你想要接收信息推送的QQ号码 3. 点击 4. 菜单栏里的`KEY`,这里有一串字符串等下要添加到LeanCloud的环境变量里 官网里提供了所有的接口文档,你可以先行通过一个简单的测试来验证你的QQ能不能接收到推送,如下: 1. 在浏览器新打开一个页面,在地址栏里输入`https://qmsg.zendee.cn/send/`,然后把你管理台里的`KEY`添加到地址栏末尾,然后在末尾继续加上`?msg=test`,接着按下回车键,这里表示让Qmsg酱发送`test`给你的QQ号码 2. 如果发送成功,你会发现浏览器页面内容变成: ``` {"success":true,"reason":"操作成功","code":0,"info":{}} ``` 3. 与此同时,你的QQ号码会收到你加的那个`Qmsg酱`QQ好友的消息。这表明推送正常,可以往下走了。 前面我们已经在LeanCloud云引擎里配置了一部分必须的环境变量,为了使用QQ提醒功能,还想要额外配置两个变量: 变量 | 示例 | 说明 --- | ------ | --------- QMSG_KEY | xxxxxxx | [必填] Qmsg酱的KEY QQ | xxxxxxx | [必填] Qmsg酱发送的 qq,支持多个,用英文逗号分隔即可 ### 解决云引擎休眠 LeanCloud云引擎有自动休眠机制,这是官方的说法:[点击查看](https://leancloud.cn/docs/leanengine_plan.html#hash633315134) 目前实现了两种云函数定时任务来解决云引擎休眠的问题: - 自动唤醒,定时访问Web APP二级域名防止云引擎休眠; - 每天定时检查过去24小时内漏发的邮件通知。 进入`云引擎 -> 定时任务`,创建两个定时任务: 1. 选择self-wake云函数,Cron表达式为`0 */25 7-23 * * ?`,表示每天早7点到晚12点每隔25分钟访问云引擎。 2. 选择resend-mails云函数,Cron表达式为`0 10 7 * * ?`,表示每天7点10分检查过去24小时内漏发的通知邮件并补发。 云引擎还有个国际版的,要注意表达式的时区问题,不过表达式填写后会显示每天几点操作,应该不会有人填错吧。 ## 解决免费版云引擎流控问题 免费版云引擎会在达到最大启动时长限制(好像是持续运行18个小时),进入强制休眠状态。在休眠状态时无法通过我们定义的自动唤醒函数来自动重启,可以在日志里看到报错如下: ``` {"error":"因流控原因,通过定时任务唤醒体验版实例失败,建议升级至标准版云引擎实例避免休眠 https://url.leanapp.cn/dwAEksv"} ``` 但是如果在休眠期间,云引擎又受到外界的一次访问,就可以再次激活进入启动状态,这时候就可以通过自动唤醒函数来每隔半小时自我唤醒一次了。也就是说,当云引擎进入强制休眠状态后,我们通过外部的定时任务,来每天定时访问云引擎绑定好的域名(**也就是你的后台评论管理页面地址**),就可以继续白嫖了。 那么去那里弄免费的外部定时任务呢?实现方案有不少,比如: ### 方案一:`GitHub + Actions` 借助`GitHub + Actions`,自动部署也是用这种方案,不过这种方案有个缺点,就是每次执行action都会生成一次对应的commit,对我来说不是理想方案,这里就不介绍了。有兴趣的可以参考[这篇文章](https://www.antmoe.com/posts/ff6aef7b#开始尝试) ### 方案二:借助国内其他的免费云函数或定时任务 利用国内的云函数,自己写一个脚本。然后定时监控即可。或者宝塔、自己服务器的定时任务都是可以的。说穿了,就是用其他的类似于LeanCloud云引擎类似的免费容器的云函数或者定时任务来唤醒LeanCloud的云引擎,那如果其他的免费容器也有类似的强制休眠机制怎么办呢? 很简单,互相套娃即可。让一个免费的容器A通过定时任务在非休眠期间去唤醒另一个强制休眠中的容器B,如果容器A强制休眠了就让另一个非休眠的容器B去唤醒。只要两个免费容器的强制休眠时间错开即可完成这一白嫖循环`O(∩_∩)O~` ### 方案三:`cloudflare`的`Workers` `cloudflare`的`Workers`可以在线定义脚本,通过链接即可触发脚本,具体做法请参考[这篇文章](https://www.antmoe.com/posts/ff6aef7b#方案三) ### 方案四:借助`cron-job`平台进行每日定时唤醒 通过`cron-job`平台进行监控,这是[官方地址](https://cron-job.org/) 本人使用的方案四,该方案其实和方案二是一回事。这里简单介绍下怎么用,注册该平台可能需要`tī zi`,请自行解决。 * 注册时,`Time zone`(也就是时区)请选择`Asia/Shanghai`,否则后续在定义cron表达式时需要自己换算时区时间。如果注册页面最下面的谷歌人机验证出不来,你懂的,请自行解决。 * 注册后需要登录邮箱通过邮件激活账号,没收到邮件的请检查你的垃圾箱,邮件可能在垃圾箱里。 * 激活账号后登录你的账号,访问这个地址:https://cron-job.org/en/members/jobs/ * 点击页面上的`Create cronjob`按钮,创建你的定时任务,各个必填配置项如下表: 变量 | 示例 | 说明 --- | ------ | --------- Title | xxx | 定时任务名称 Address | https://xxx.com | 访问的地址,请填写LeanCloud云引擎绑定的域名地址,也就是那个后台评论管理页面地址`https://云引擎域名` Schedule | 按需选择 | 定时任务的执行时间和频率,这里建议使用第二种:`Every day at 6 : 50 `。具体每天几点执行请自行决定。 Notifications | 按需选择 | 执行失败时的通知提醒 Save responses | 按需选择 | 保存执行定时任务的日志 ## 使用Waline替代Valine评论系统 鉴于Valine的安全问题,以及LeanCloud云引擎的限流问题,改用Waline + Vercel来作为评论系统,Waline是基于Valine进行开发的,所以迁移成本较低。这是Waline的[官方文档](https://waline.js.org/),有很详细的配置、迁移等教程。 由于LoveIt主题没有引入Waline,所以这里记录下如何引入Waline,以及遇到的相关问题的解决方法。 ### 站点配置文件添加相关变量 打开站点配置文件,找到Valine相关变量`[params.page.comment.valine]`,在该节点下面添加Waline相关的变量 : ``` # Waline comment config (https://waline.js.org/) # Waline 评论系统设置 (https://waline.js.org/) [params.page.comment.waline] enable = true #js = "https://cdn.jsdelivr.net/npm/@waline/client@latest" js = "https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js" meta = ['nick','mail','link'] # 评论者相关属性 requiredMeta = ['nick','mail'] # 设置必填项,默认匿名 login = "force" # 评论必须先登录,用于防护恶意攻击 placeholder = "为防恶意灌水攻击,评论前需注册并登录,望见谅~" # 评论框占位提示符 serverURL = "" # Waline的服务端地址(必填) #imageHosting = # 图床api,如果允许评论框上传图片 uploadImage = false # 评论上传图片功能 avatar = "retro" # Gravatar头像 avatarCDN = "https://sdn.geekzu.org/avatar/" # Gravatar头像CDN地址,不建议使用loli源 pageSize = 20 # 评论列表分页,每页条数 lang = "zh-CN" # 多语言支持 visitor = true # 文章访问量统计 highlight = true # 代码高亮 ``` 记得把原本的评论系统的`enable`设置为false,改用新加的Waline。 ### 修改comment.html模板文件 将`\themes\LoveIt\layouts\partials\comment.html`拷贝到`\layouts\partials\comment.html`,打开拷贝后的文件,找到Valine相关的代码部分,然后在其下方添加Waline的代码,如下: ``` {{- /* Waline Comment System */ -}} {{- $waline := $comment.waline | default dict -}} {{- if $waline.enable -}}
{{- end -}} ``` Waline内置微博表情,如果想自定义表情包的,可以继续添加两个属性`emoji`到上面的代码里,具体做法可以参考[官方文档 - 自定义表情](https://waline.js.org/guide/client/emoji.html#%E9%A2%84%E8%AE%BE)。 这里顺便介绍下@小康大佬整理的一个很方便的表情包站点:[表情速查](https://emotion.xiaokang.me/),里面有很多类别的表情包,还有对应的快速引入语法链接,以及用于配置Valine、Waline等评论系统表情包映射的JSON! 这里还有一个专门爬取b站表情包的项目仓库:[lrhtony / BiliEmoji](https://github.com/lrhtony/BiliEmoji) ### 添加评论统计到文章元数据 将`/themes/LoveIt/layouts/posts/single.html`拷贝到`/layouts/posts/single.html`,打开拷贝后的文件,找到如下: ``` ``` 将上面的代码改为如下代码: ``` ``` ### 添加样式 在`_custom.scss`里添加如下样式: ```css /* 文章元数据meta */ .post-meta .post-meta-line:nth-child(2) i:nth-child(1) { margin-left: 0; } .post-meta .post-meta-line:nth-child(2) i { margin-left: 0.3rem; } .post-meta .post-meta-line:nth-child(2) span i { margin-left: 0.3rem !important; } .post-meta a#post-meta-vcount { color: #a9a9b3; &:hover { color: #2d96bd; } } ``` ### 部署到Vercel 这个部分直接参考[官方文档 - Vercel 部署](https://waline.js.org/quick-start.html#vercel-%E9%83%A8%E7%BD%B2)。实际上就是在GitHub上帮你创建了一个仓库,仓库里只有简单的几个文件,用于Vercel的部署。Vercel那边会和刚刚创建的GitHub仓库关联,然后部署到Vercel自己的服务器。 这里有个坑,之前用Valine的时候只需要用到LeanCloud的两个变量`APP ID`和`APP KEY`。但是对于Waline,必须要再用到第三个变量`Master Key`。也就是说,**对于Waline + Vercel,必须配置三个变量`LEAN_ID`、`LEAN_KEY`和`LEAN_MASTER_KEY`才能算部署成功。** 否则你会发现就算Vercel显示部署成功,一旦访问部署页面却会发现页面一片空白,具体可参考GitHub上的一个issue:[Vercel初始化后打开网址页面内容为空 #82](https://github.com/lizheming/waline/issues/82) Waline还带有简单的后台,可以实现对评论的管理。部署完成后访问`