Cloudflare Workers 和 Workers KV 开发的 CF-Blog 博客系统集成 Valine 第三方静态博客评论系统

噔噔噔…一灯不是和尚已经讲解了如何使用 Cloudflare Workers 和 Workers KV 开发的CF-Blog开源博客程序搭建免费网站,但是美中不足的是无法跟粉丝产生互动,所以我需要还需要增加评论系统,这样才算完美。由于咱这准静态博客只能集成第三方评论系统,所以我经过N多尝试,并查阅很多资料,使用了CF-Blog原作者大佬推荐的 Valine 静态博客评论系统,当然你也可以集成别的第三方评论系统。

1、为什么选择 Valine 评论系统?

Valine 诞生于2017年8月7日,是一款基于LeanCloud 的快速、简洁且高效的无后端评论系统。Valine 在理论上支持但不限于静态博客,目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。Valine 支持 MarkDown 全语法,而且支持Emoji表情,非常安全。除此之外,Valine 还有个国内社区版 Waline 评论系统,增加了“最近评论”和评论管理后台等功能。

最最重要的是,Valine 在国内可以正常打开,而且速度比较快,颜值也很不错,简洁、清爽,比较符合我的审美标准。另外,Valine 分为国内版和国际版,其中国内版需要实名,所以咱还是老老实实用国际版吧!(实名注册跟网站ICP备案差不多,连说句话的自由都没有了)

2、注册 Valine 国际版

您可以通过 Valine 国际版注册链接 注册账户,即注册一个 LeanCloud 账号。如下图所示:

 

温馨提醒:如果你第一次打开注册页面无法正常显示,请返回或重新打开官方网站,然后重新点击注册按钮即可正常打开。我也不知道具体原因,反正这么操作就对了。

填写注册 LeanCloud 账号所用的账号、注册邮箱、密码,并勾选同意协议,最后点击“注册 LeanCloud 账号”按钮,并去注册邮箱激活验证邮件。如下图所示:

3、设置 LeanCloud 并获取 Valine 评论系统的 AppID 和 Appkey

注册好 LeanCloud 账号并验证激活邮件后,我们就可以创建应用了。

1)创建 LeanCloud 应用开发版

我们在后台点击“创建应用”按钮,并填写“应用名称”,我这里命名为“CF-Blog”,最后点击“创建”按钮。如下图所示:

2)点击创建好的新应用左边的“存储”图标(第一次点击进入可能会出现异常提示,请无视,返回后重新点击进去),查看是否有Comment和 Counter,如没有则创建,权限设为所有用户。如下图所示:

点击“创建 Class”按钮,依次创建两个 Class 类别,分别名称为“Comment”和“Counter”。如下图所示:

3)当创建“Comment”和“Counter”两个Class完成后,请依次进入“设置”-“安全中心”,将“服务开关”仅保留“数据存储”开启,其他全部关闭。如下图所示:

4)依次进入“设置”-“应用 Keys”,复制保存 AppID 和 AppKey。如下图所示:

4、为 CF-Blog 添加 Valine 评论代码

这个CF-Blog需要设置<codeBeforHead>和<commentCode>处代码,具体如下:

"codeBeforHead":`<script src='//unpkg.com/valine/dist/Valine.min.js'></script>`,
"commentCode":`
<div id="vcomment" class="comments-area"></div>
<script>
new Valine({
el:'#vcomment',
appId: 'eWrOzSzYP1Fm8QDx96P0vKli-MdYXbMMI',//此处修改为您的AppID
appKey: 'jMF98EwbmKvdGnDLamPwsAk1',//此处修改为您的AppKey
avatar:'monsterid',
placeholder:"您的评论也可以一针见血..."
})
</script>
`,//评论区代码

然后将以上代码添加到你创建好的 Cloudflare Workers 里面,一定要把appId和appKey替换成你自己的,然后保存即可。当你完成以上配置后,你需要刷新缓存,或者新发表一篇文章即可看到效果。

appId 和 appKey 的具体配置方法,您可以参考 Valine 官方文档:https://valine.js.org/configuration.html

5、CF-Blog 集成 Valine 评论系统总结

Valine 静态博客评论系统不仅可以集成在 CF-Blog,也可以集成在其他的静态博客系统,使用体验很好,界面简洁清爽。

发表评论

邮箱地址不会被公开。 必填项已用*标注