Hugo | 为Blog增加评论区
一直蛮犹豫加不加Blog评论区的，但看到Hugo Stack主題添加Valine支援修改的样式，好好看哦。那来都来了，加一个试试。
安装Valine
说动手就动手，先读一遍Valine中文文档，掏出我一年多没用过的LeanCloud国际版，创建应用，拿到APP ID和APP Key，在layouts/partials/comments/provider/valine.html中写入上面上文作者给的代码，最后在config.yaml中进行配置。配置内容如下：
valine:
enable: true
appId:
appKey:
avatar: '' //头像
placeholder:
visitor: true //文章访问量统计
……理论上是这样的。
实际上呢，我发现，不管我怎么改avatar的值，头像都会坚持显示identicon这个很丑的抽象几何图形。
改了七八遍之后终于觉得不对了，怀疑是配置写进了html，搜索后发现确实如此，修改layouts/partials/comments/provider/valine.html
valine.init({
el: '#vcomments',
appId: '', //這裏填入你的appId
appKey: '', //這裏填入你的appKey
avatar: 'robohash',//头像默认显示随机小机器人
placeholder: placeholder, //评论区占位提示符
enableQQ: true,//填入QQ邮箱自动拉取QQ头像和昵称
lang:'zh-CN', //多语言支持
requiredFields: ['nick'], //设置必填项
recordIP: false, //是否记录评论者IP
visitor: true //文章阅读量统计
})
修改一些样式
以下修改都是在valine.html中实现
评论回复按钮颜色
默认的评论回复按钮是完全看不到的白色，改成灰色让它能够被观测到。
#vcomments .vmeta .vat {
background: 0 0;
cursor: pointer;
border: 0;
border-radius: 10px; //调一下圆角为10px
text-transform: uppercase;
color: DarkGray; //颜色为深灰色
回复框修改
#vcomments .vwrap {
background-color: var(--card-background);
border: 0px solid #f0f0f0;
border-radius: 10px; //圆角修改为10px
margin-bottom: 10px;
overflow: hidden;
position: relative;
padding: 0px 0px 0px 0px;
font-family: inherit;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-l2); //增加卡片阴影
}
评论卡片修改
#vcomments .vcards .vcard {
background-color: var(--card-background);
padding: 25px 25px 5px 25px;
border-radius: 10px; //圆角修改为10px
margin-bottom: 15px;
transition: all .3s
box-shadow: var(--shadow-l2); //增加卡片阴影
配置邮件提醒
使用了Valine Admin来实现邮件提醒服务。
遇到了很多坑，比如一开始完全不理解云引擎域名是怎么回事，尝试用了自己域名的二级域名，但又无论如何都只显示该网页不提供服务，然后是收不到邮件通知……
后来研究了一下，二级域名是LeanCloud会把Valine Admin的服务搭建到新域名上，我注册的是Valine.mantyke.icu，把这个填到环境变量里即可。收不到邮件通知……我也不知道哪里出了问题，实在没办法，一股脑把“博主通知收件地址”“发件邮箱”“SMTP登录用户”都填了同一个收件邮箱就成功了。嚯！
总之花了很多时间但是却没什么能写，想到这里还挺不甘心的。
解决LeanCloud休眠
LeanCloud限制了使用定时任务来唤醒实例，于是参考Gtihub Action｜一行命令解决 LeanCloud 流控问题，用Github Action来定时唤醒，防止无法收到评论邮件——但其实根本没有评论啊，所以就是做着玩儿。
流程很简单，只有以下三行，唯一值得注意的是第二行现在应该是点击New repository secret并创建Actions secrets。
- fork 此仓库
- 在 setting -> Secrets，添加一个 secret，Name 为 SITE，Value 为 评论后台网站的地址。
- star 自己的仓库，这样是为了手动触发一次定时任务。
说真的，看到Github Action顺利跑起来的一瞬间，心情还挺复杂的：我自动部署没跑起来，而且一直没跑起来……
导入Blobcat表情包
这里遇到了巨大的问题：我想引入本地JS的时候，写src='assets/Valine.min.js‘无论如何无法引用，和朋友研究了好长时间，发现可能是.min.js这个命名的原因，导致无法本地引用，改成assets/Valine.js就可以了。
太坑了吧！！！！
但最后也没有导入表情包成功，倒腾完了发现Valine只有1.4.5以上版本是支持自定义表情包的，而我不知道怎么升级> <
先把Blbocat表情包的相关链接放在这里，万一之后有用呢？
10.1更新：看了几篇文章，发现Valine的安全性比想象的还差，于是试图换成Waline——样式还不知道怎么改，可能过两天要么还是算了，和以前一样在页脚插个提问箱？
安装Waline
Stack主题事先就支持Waline，搭建很简单，参考Waline文档，在LeanCloud国际版中新建一个应用，再在Vercel上进行搭建，值得注意的只有看到Warning不要惊慌和它真的搭建起来很慢这两点。
之后再在config.yaml上参照前端配置，写入serverURL，把avatar改成随机小怪兽'monsterid'就OK了。
匿名情况下，昵称只支持三个及以上中文字符，Waline评论之修改记录里提到了如何修改，但太折腾了，用现成的似乎也不好更新，算了算了。
另外评论提醒也创建失败，研究未果，下回（下回）有精神的时候我会来搞定它的。现在就暂时用用后台，总之能用就行。
10.2更新：邮件评论提醒解决了！！原因是不知为何第一次在Vercel上部署的Waline无法使用环境变量，删除LeanCloud应用和Vercel项目， 重新再安装一次之后就好了，我好想打人啊！
修改Waline样式
配置了DISABLE_USERAGENT环境变量为true，用以隐藏用户UA
Waline支持自定义样式和无样式版本，我大概改了一下白天模式，夜晚模式暂时改了个透明背景色凑合着，实在不会改了，先放着吧。
位置在layouts\partials\comments\provider\waline.html，直接将文档中所提到的变量加到.waline-container {下方。
<style>
.waline-container {
background-color: var(--card-background);
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l2);
padding: var(--card-padding);
/* 主题色 */
--waline-theme-color: #34495e; //主题色，提交按钮和ID颜色
--waline-active-color: #bababa; //鼠标移到提交按钮上的颜色
/* 徽章 */
--waline-badge-color: #34495e; //博主徽章色
/* 背景设置为透明 */
--waline-bgcolor: transparent;
}
取消Waline本地加载
10.25更新：
之前在博客里讲过我喜欢一边本地预览一边写文章，但是Waline本地也会加载所以会导致LeanCloud那边的API请求飙涨（现在已经8k了，虽然也不是什么事儿，但看着很吓人嘛），Zero前段时间教了我解决办法，通过 Site 变量里的 IsServer 来判断是否为本地预览——也就是说，让它本地预览的时候不加载。
layout/partials/comments/provider中修改一下原来的代码。现在本地预览模式时Waline评论已经不显示了，过两天看看LeanCloud的API调用记录确定一下，应该是成功了。
{{ if not .Site.IsServer }}
<script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
<div id="waline" class="waline-container"></div>
{{- end -}}
以及：沮丧，弄明白了文档中暗黑模式的相关颜色参数怎么用，但显然我没写对——而且仔细研究了一下可能作者就没有考虑过暗黑模式下使用另一套主题颜色。
暂且还是这样凑合用用……
还有，用楼下Revi的办法给评论区添加了Blob猫猫表情包！！！Revi和Blob猫猫万岁！！！
（表情界面背景透明是因为我为了让黑暗模式勉强能用，把Waline的背景色改成了透明——救命啊——）
修改黑暗模式和表情包大小
10.27更新：根据Revi的教程修改了黑暗模式配色，并大受启发，照葫芦画瓢改了表情包的大小显示。
修改layouts\partials\comments\provider\waline.html，代码如下：
<style>
.waline-container {
background-color: var(--card-background);
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
padding: 3%; /*缩小边距*/
}
.waline-container .vcount {
color: var(--card-text-color-main);
}
/*日间模式*/
:root{
--waline-theme-color: #34495e; /*主题色，提交按钮*/
--waline-active-color: #bababa; /*鼠标移到提交按钮上的颜色*/
--waline-badge-color: #34495e; /*博主徽章色*/
--waline-avatar-size: 5rem;
--waline-dark-grey: #34495e; /*ID颜色*/
}
/*夜间模式*/
:root[data-scheme="dark"] {
--waline-theme-color: #acc6e0;
--waline-white: #34495e; /*按键字体颜色*/
--waline-active-color: #8ab1d8;
--waline-light-grey: #666;
--waline-dark-grey: #acc6e0; /*ID颜色*/
--waline-badge-color: #acc6e0;
/* 布局颜色 */
--waline-text-color: rgba(255, 255, 255, 0.7);
--waline-bgcolor: #515151;
--waline-bgcolor-light: #66696b;/*行内代码块颜色*/
--waline-border-color: #9B9C9C;
--waline-disable-bgcolor: #444;
--waline-disable-color: #272727;
/* 特殊颜色 */
--waline-bq-color: #9B9C9C; /*quote*/
/* 其他颜色 */
--waline-info-bgcolor: #acc6e0;
--waline-info-color: #9B9C9C;
}
.v[data-class=v] .vcontent .vemoji {
width:2.2em; /*表情包大小修改*/
margin:.25em
}
</style>