虽然已经吹过很多次了不过还是要再吹一下
# 先有 Shoka 后有天！
# 前情提要
Shoka 本身是一个很完美的 Hexo 主题，MiniValine 也是一个足够使用的评论系统，不过，常说 Valine 防君子不防小人，这个评论系统的弊端出于安全问题的欠妥，其可定制和功能也稍显不足。
大约在撰写本文几天前，也就是 2022 年 3 月 3 日，本 Blog 遭到大量灌水式评论轰炸。临时开通了 Akismet 仍然无法避免在 LeanCloud 容器休眠期间的空窗期防御、以及大量评论的写入占用数据库。
似乎解决这种问题的唯一方法是启用登录评论 or 审核评论。
期间也尝试过 Valine-Admin，但，你懂的，这在机器面前实在无能为力。
# 呜呜怎么办
一个很显然的解决方式出现了：更换评论系统。
但是但是，Shoka 唯一支持的评论系统就是 MiniValine 诶，怎么办呢？
当然是让它变成你的形状（bushi
实际上，在 Shoka 主题的 Pull requests 中已经有大佬开发了 Gitalk 的支持。
所以所以，只需要 Gitalk 的小朋友可以去试试啦。
对于我来说 Gitalk 还是有些缺点的，我还是选择 Waline～
强大的安全性（内容校验、防灌水、保护敏感数据等）以及登陆支持，使 Waline 成为了完善本 Blog 的最优选。
那么，开始叭！
# Vercel 部署
这里默认你已经有 MiniValine 的基础，设置了 LeanCloud 数据库。
首先需要在 Vercel 上进行服务端的部署，这个步骤的具体在 Waline 的官网已经介绍得很详细了，只要填入相同的 APP ID, APP KEY, Master Key 就能使用你的 LeanCloud 数据库，Waline 评论的数据结构与 MiniValine 几乎相同，所以并不需要繁复的迁移。
依随官网的教程部署完成后，你应该会得到一条以 .vercel.app 为结尾的 URL，记下它吧。
记得访问 serverURL/ui/register 注册，第一个注册的人会被设定为管理员。
总之记下一条 URL，然后我们来到 Hexo 的修改。
# Shoka 引入
# 修改主题的_config.yml
首先把你原先的的 Valine 配置给注释掉 or 删掉，怎么样都行。
在下面添加 Waline 的配置，这里分享一下我的配置：
waline: | |
serverURL: https://xxxxxxx.vercel.app/ # 填入刚刚得到的后端 URL（必填） | |
visitor: true # 文章访问量统计 | |
lang: zh-CN # 语言，默认 zh-CN | |
login: enable # 登录模式状态，默认值 enable，force 可以强制登录 | |
wordLimit: 0 # 评论字数限制，0 为不限制，默认值为 0 | |
pageSize: 10 # 评论列表分页，数字为条数，默认值 10 | |
highlight: true # 代码高亮，默认 true | |
meta: ['nick', 'mail', 'link'] # 评论者相关属性，默认 ['nick', 'mail', 'link'] | |
requiredMeta: ['nick', 'mail'] #设置评论者属性必填项，默认 []（即匿名） | |
placeholder: '捧ぐる祈りの光~★' # 评论框占位提示符，默认 ' 欢迎评论' | |
copyright: false # 是否显示页脚版权信息 | |
emoji: [ | |
'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji', | |
'https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs', | |
'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili', | |
] # 自定义表情包 |
在 vendors 下加入 Waline 官方提供的 CDN 引入方式：
vendors: | |
js: | |
waline: npm/@waline/client/dist/Waline.min.js |
# 修改 comment.njk
找到 layout/_macro/comment.njk，
改成这样。
# 修改 layout.njk
找到 layout/_partials/layout.njk，
在 111 行改成这样。
# 修改 script.js
找到 scripts/generaters/script.js，
在每一个 valine 代码下添加相同的 waline 代码：
js: { | |
valine: theme.vendors.js.valine, | |
waline: theme.vendors.js.waline, | |
chart: theme.vendors.js.chart, | |
copy_tex: theme.vendors.js.copy_tex, | |
fancybox: theme.vendors.js.fancybox | |
}, | |
css: { | |
valine: theme.css + "/comment.css", | |
waline: theme.css + "/comment.css", | |
katex: theme.vendors.css.katex, | |
mermaid: theme.css + "/mermaid.css", | |
fancybox: theme.vendors.css.fancybox | |
}, | |
loader: theme.loader, | |
search : null, | |
valine: theme.valine, | |
waline: theme.waline, |
# 修改 pjax.js
找到 source/js/_app/pjax.js，
在找到 valine 的那串，并在下面添加：
if(CONFIG.waline.serverURL) { | |
vendorJs('waline', function() { | |
var options = Object.assign({}, CONFIG.waline); | |
options = Object.assign(options, LOCAL.waline||{}); | |
options.el = '#comments'; | |
options.pathname = LOCAL.path; | |
options.pjax = pjax; | |
options.lazyload = lazyload; | |
new Waline(options); | |
setTimeout(function(){ | |
positionInit(1); | |
postFancybox('.waline-container'); | |
}, 1000); | |
}, window.Waline); | |
} |
其实这个我也不知道怎么写就照抄了，错了请不要打我，不过反正跑得起来嘿嘿 OVO
# 试运行
接下来就是最常规的～
hexo clean | ||
Validating config | ||
Deleted database. | ||
Deleted public folder. | ||
hexo s -g | ||
Validating config | ||
Start processing | ||
Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop. |
# 修改样式
成功跑起来了吗～
我猜猜，在成功的喜悦过后，你的第一反应是：
怎么那么丑！！
是的，Waline 的默认样式和 Shoka 搭配起来就是很丑啦 ww
黑暗模式下更是惨不忍睹！千万别去看（bushi
这份丑已经达到必须去修正的地步了，
那么，再做一点小小的工作～
# 修改 comment.styl
找到 source/css/comment.styl，新增：
@import "_common/components/third-party/waline"; |
目的是在生成 comments.css 时引入 waline 自定义样式。
# 增加自定义 Waline 样式文件
在 source/css/_common/components/third-party/ 下，新增 waline.styl 文件。
关于 waline 可以自定义的样式，在官网已经全面地提供了可用的 CSS 变量，
如果你一股脑复制粘贴，会发现样式无法生效，原因是 Waline 注入的样式在你 CSS 的后面，意味着优先级较高。
为了覆盖注入的样式，你需要在自定义的样式后面添加！important，以获得最高的优先级让样式生效～
下面本人的样式以供参考：
# 日间模式
/* 日间模式 */ | |
:root { | |
/* 字体大小 */ | |
--waline-font-size: 16px; | |
/* 常规颜色 */ | |
--waline-white: #fff; | |
--waline-light-grey: #999; | |
--waline-dark-grey: #666; | |
/* 主题色 */ | |
--waline-theme-color: var(--primary-color) !important; /* 主题颜色 */ | |
--waline-active-color: #ff5c75 !important; | |
/* 布局颜色 */ | |
--waline-text-color: #444; | |
--waline-bgcolor: #fff; | |
--waline-bgcolor-light: #f8f8f8; | |
--waline-bgcolor-hover: #f0f0f0; | |
--waline-border-color: #ddd; | |
--waline-disable-bgcolor: #f8f8f8; | |
--waline-disable-color: #bbb; | |
--waline-code-bgcolor: #282c34; | |
/* 特殊颜色 */ | |
--waline-bq-color: #f0f0f0; | |
/* 头像 */ | |
--waline-avatar-size: 3.5rem; | |
--waline-mobile-avatar-size: calc(var(--waline-avatar-size) * 9 / 13); | |
/* 徽章 */ | |
--waline-badge-color: var(--primary-color) !important; | |
--waline-badge-font-size: 0.775em; | |
/* 信息 */ | |
--waline-info-bgcolor: #f8f8f8; | |
--waline-info-color: #999; | |
--waline-info-font-size: 0.625em; | |
/* 渲染选择 */ | |
--waline-border: 1px solid var(--waline-border-color); | |
--waline-avatar-radius: 50%; | |
--waline-box-shadow: none; | |
} |
# 夜间模式
自带的夜间模式搭配 Shoka 主题不但很丑，而且好像没有办法跟随主题进行切换，所以需要进行额外的配置以适配 Shoka 主题，即使用 [data-theme="dark"] 代码。这里我也分享改好的代码：
/* 夜间模式 */ | |
:root[data-theme="dark"] { | |
--waline-theme-color: var(--primary-color) !important; /* 主题颜色 */ | |
--waline-white: #ddd !important; /* 按键字体颜色 */ | |
--waline-active-color: #ff6680 !important; | |
--waline-light-grey: #666 !important; | |
--waline-dark-grey: rgba(140, 74, 85, 0.6) !important; /*ID 颜色 */ | |
--waline-badge-color: rgba(140, 74, 85, 0.6) !important; | |
/* 布局颜色 */ | |
--waline-text-color: #ccc !important; | |
--waline-bgcolor: #424242 !important; | |
--waline-bgcolor-light: #515151 !important;/* 行内代码块颜色 */ | |
--waline-border-color: #9B9C9C !important; | |
--waline-disable-bgcolor: #444; | |
--waline-disable-color: #272727; | |
/* 特殊颜色 */ | |
--waline-bq-color: #9B9C9C; /*quote*/ | |
/* 其他颜色 */ | |
--waline-info-bgcolor: rgba(140, 74, 85, 0.6); | |
--waline-info-color: #aaa; | |
} |
啊对了，因为我自定义过自己的 Blog 的颜色搭配，这里的代码是适应本 Blog 的，如有需要请自行改成你自己的颜色搭配～
# 输入框的文字大小
.v input, .v textarea { | |
font-size: 0.85em !important | |
} |
# 完成了
运行看看叭！
如果有问题欢迎在下面进行留言～
参考资料：
https://waline.js.org/
https://github.com/amehime/hexo-theme-shoka/pull/19
https://mantyke.icu/2021/comment/
