发表学习10 分钟读完 (大约1526个字) 次访问

通过cdn引入的方式为hexo增加评论功能

前段时间新搭了一个故事站，用来放一些碎碎念。因为选用了比较简单的没有自带评论的yuzu主题，于是如何加上评论系统成了一个问题。

我现在比较中意的是自部署后端的评论系统，目前了解的有俩：Waline和Twikoo。其中waline是我在博客里用的，next主题有一个插件适配，前端搭建起来很方便。

Waline

Waline是一款基于Valine衍生的简洁、安全的评论系统。风格和Valine基本上一样，并且数据保存在自部署的后端，相对安全一些。

Waline的数据库存在LeanCloud国际版，因此在部署服务端之前需要先注册一个账号。注册完毕后就可以去vercel部署了，部署成功之后编辑环境变量链接到LeanCloud国际版。跟着文档走基本上不会出什么问题，就不赘述了。

接下来才是比较麻烦的部分：引入客户端。我这段时间可以说是疯狂开成就了，Github上全是我改这改那然后改出问题再回滚的痕迹。为了把评论系统加入博客文章页中，我还是费了一些劲的。因为yuzu主题没有适配评论系统，所以我只能考虑从文章页模板下手。

根据hexo的文档，主题页的文章页模板是layout/_partial/目录下的article.ejs文件。ejs又是一个新的知识盲区，做起修改来又得靠我的第六感了（bushi）。

经过研究之后发现，其实看得眼花缭乱的部分主要就是.ejs的格式，拆开它们之后，实际上就是类似JavaScript的内容，这样的话只需要把cdn引入的代码塞进想要安放评论框框的地方就可以了。Waline的手册中给出了这样的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  ..
  <script src="//cdn.jsdelivr.net/npm/@waline/client"></script>
  <!--因为最近jsdelivr国内访问出了点问题，可以改成//unpkg.com/@waline/client-->
  ...
</head>
<body>
  ...
  <div id="waline"></div>
  <script>
    Waline({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',  //这里填部署在vercel的waline服务端的地址
    });
  </script>
</body>

为了做一定的个性化，我对它进行了一些修改，最后是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="waline"></div>
  <script>
    Waline({
      el: '#waline',
      serverURL: '多米诺的Waline服务端地址',  
      visitor: true,
      emoji: [   //这里加了一些表情
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tieba',
      ],
       avatar: 'robohash',   //自定义默认头像为随机的机器人
       placeholder: '要评论些什么吗？',   //占位符
    });
  </script>

至此，其实评论功能已经成功引入了，部署之后每个文章页都能够看见评论框框了。
但奈何我爱折腾，又不想我的博客和故事站都用同样的评论系统，于是我又将目光转向了Twikoo。

Twikoo

Twikoo是一个简洁、安全、免费的静态网站评论系统。实现原理好像和Waline差不太多，但是有一点我很喜欢：

Twikoo的管理系统是做在前端的，不需要单独开一个页面，便能够直接在当前页的覆盖层对评论进行管理，非常有意思。

管理端的搭建方式有四种，一键部署、手动部署、命令行部署和Vercel 部署。其中一键部署用的是腾讯云，但是我想搭建的时候发现已经没有额度了，不确定是不是我的问题。因此最后还是通过Vercel来搭。

搭建管理端和Waline差不太多，都是导入仓库一键搭起来的，但是Twikoo的数据库不用LeanCloud了，而是MongoDB，一个账号可以开一个免费数据库，而我的一个账号已经用来搭Qexo了，不得已又注册了一个账号。
不过我不准备详细记录Twikoo在Vercel的搭建流程，因为官方甚至有一个视频教程——
Twikoo Vercel 部署教程
就很手把手，简直小白友好。
搭完后端之后是没法在Vercel部署的页面看见管理页的，因为Twikoo通过前端的覆盖层对评论进行管理。因此接下来直接引入前端就可以了。官方提供的示例代码是这样的：

1
2
3
4
5
6
7
8
9
10
11
<div id="tcomment"></div>
<script src="https://unpkg.com/twikoo@1.4.14/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
  envId: '您的环境id',  //这里填Vercel的部署页
  el: '#tcomment',
  // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，如果您的环境地域不是上海，需传此参数
  // path: 'window.location.pathname', // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
  // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/imaegoo/twikoo/blob/dev/src/js/utils/i18n/index.js
})
</script>

其中注释的部分是腾讯云部署需要考虑的，如果是Vercel+mongoDB的话，就不用管这个了。
说起来，我在部署的时候还犯了个傻，忘记修改源码里的envID，结果半天不显示评论框，给我整懵了。

通过cdn引入的方式为hexo增加评论功能

https://blog.dominoh.com/e1a408f3.html

作者

多米诺

发布于

2021-12-17

更新于

2024-05-17

许可协议

#

投喂多米诺一杯奶茶！

评论

关注多米诺的B站账号

目录

最新文章

订阅更新 - follow.it

×