本站 - 评论模块原创

笔记

本站使用过 Gitalk、Valine、Twikoo 三个评论系统，目前在使用 Twikoo 评论系统。

2021-10-29 @Young Kbt

前言
Gitalk 搭建
Valine 搭建
Twikoo 搭建
结束语

# 前言

本站使用过 Gitalk、Valine、Twikoo 三个评论系统，目前在使用 Twikoo 评论系统。

Gitalk 评论系统基于 GitHub 的 Issue
Valine 评论系统基于 LeanCloud
Twikoo 评论系统是我目前正在使用的评论系统，也是功能性非常强大的评论系统，我看重的第一点是读者评论后会通过邮箱发送给博主，博主回复后也会通过邮箱发送给读者；其次博主的评论是标识的

Gitalk、Valine 通过使用 vuepress-plugin-comment (opens new window) 进行搭建。它既支持 Gitalk 应用也支持 Valine。

Twikoo 的搭建比较麻烦，根据官网介绍，如果想搭建免费的评论系统，则需要注册 MongoDB、Vercel、Akismet、国外邮箱四大账号（前提你都没有）。

# Gitalk 搭建

Gitalk 是一个基于 Github Issue 和 Preact 开发的评论插件。所以你需要创建一个 GitHub 库，利用该库的 issues 存储评论信息。

如果你已经有一个 GitHub 的仓库存储你的博客文件。那么可以直接使用该库的 issues 存储评论信息。毕竟分类就是把关联的东西放在一起，更好管理。

建议先把自己的博客部署到 Github Actions 下，不然本地运行的话，评论区只能自己评论，自己看哦~~~ 😸部署传送门

记得关闭其他评论系统的插件，下面让我们一起搭建评论区吧。

# 安装

yarn add vuepress-plugin-comment -D

npm install vuepress-plugin-comment -D

// Make sure to add code blocks to your code group

# Gitalk 使用

插件需要 GitHub Application，即权限。如果没有，点击这里申请 (opens new window)

如图：

参数说明

Application name：你授权时对外的应用名字
Homepage URL：你应用的根url地址，类似于首页地址，不带任何参数
Application description：应用的描述
Authorization callback URL：对你的应用进行了操作后的回调地址，因为评论区绑定了博客，评论后的信息存储在博客的issues里

申请完成就会得 Client ID 和 Client Secret

前往配置文件，填入你的两个参数和其他信息，如下：

module.exports = {
  plugins: [
    [
      'vuepress-plugin-comment',
      {
        choosen: 'gitalk', 
        options: {
          clientID: 'c042********01c7',  // 你的client ID
          clientSecret: 'b77b38cf72**********45d0a0',  // 你的client secret
           repo: 'notes-blog', // GitHub 仓库
            owner: 'Kele-Bingtang', // GitHub仓库所有者
            admin: ['Kele-Bingtang'], // 对仓库有写权限的人
            // distractionFreeMode: true,
            pagerDirection: 'last', // 'first'正序 | 'last'倒序
            // 下面的不用修改，默认这些即可
            id: '<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>', //  页面的唯一标识,长度不能超过50
            title: '「评论」<%- frontmatter.title %>', // GitHub issue 的标题
            labels: ['Gitalk', 'Comment'], // GitHub issue 的标签
            body:
              '页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>', // GitHub issue 的内容
        }
      }
    ]
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

配置好后，重启项目，然后打开某个文档，滑到最下方

可以看到

点击使用 GitHub 登录，然后会要求授权，确定后评论功能实现啦

# 问题

评论区出现 Error: Validation Failed.

分析：可能页面的链接过长，超过 50，请求 Issues 失败。所以手动设置 id 取值，限制长度不超过 50

切换页面后评论区内容还是上一个页面的评论

分析：frontmatter.to.path 没有即时获取 path

两个问题的解决：

{
 choosen: 'gitalk', 
 options: {
   ...
   id: "<%- (window.location.origin + (frontmatter.to.path || window.location.pathname)).slice(-50) %>", //  页面的唯一标识,长度不能超过50
   title: "「评论」<%- document.title %>", // GitHub issue 的标题
   labels: ["Gitalk", "Comment"], // GitHub issue 的标签
   body:"<%- document.title %>：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>" // GitHub issue 的内容
 }
}

1
2
3
4
5
6
7
8
9
10

笔记

其实上方代码在前面的参数配置时，已经加上，这里只是演示问题

点击使用 GitHub 登录，跳转别的页面

分析：申请 GitHub Application 时候，填错了Authorization callback URL地址，点击使用 GitHub 登录其实就是跳转到Authorization callback URL的填写地址。

解决:Authorization callback URL 地址填好自己的博客链接

# Valine 搭建

Valine 诞生于 2017 年 8 月 7 日，是一款基于 LeanCloud (opens new window) 的快速、简洁且高效的无后端评论系统。官网：https://valine.js.org/ (opens new window)。

Valine 相比较 Gitalk 的优势：

Valine 是基于 LeanCloud 构建，Gitalk 是基于 Github 的 Issue 构建
Valine 使用简单，可以自定义名字、头像后发表评论，无需登录任何账户，Gitalk 必须登录自己的 Github 账号才能发表评论
Valine 支持自定义 emoji，如 B 站，微博等的表情

......

我开始使用 Valine 的时间（2022-01-04），目前使用 Twikoo（2022-02-16）

记得关闭其他评论系统的插件。

注册或登录 LeanCloud

请先注册一个 LeanCloud 的账号，然后创建应用，填写基本信息，然后进入应用，点击设置，点击应用凭证，如图：

获取你的 AppID 和 AppKey，然后在使用 comment 评论插件：

module.exports = {
    plugins: [
        [
            'vuepress-plugin-comment',
            {
                // 具体参数请看官网：https://valine.js.org/
                choosen: 'valine',
                // options 选项中的所有参数，会传给 Valine 的配置
                options: {
                    el: '#valine-vuepress-comment',
                    appId: '你的 AppID',
                    appKey: '你的 AppKey',
                    placeholder: '请留下你的足迹 ~~',
                    // 有 URL、''、mp、identicon、monsterid、wavatar、retro、robohash、hide 头像选择，具体头像是什么样子，请访问 https://valine.js.org/avatar.html
                    avatar: 'mp',	// 默认头像
                    pageSize: 10,   // 评论列表分页，每页条数
                    visitor: true,    // 文章访问量统计
                    recordIP: false,   // 是否记录评论者 IP
                    enableQQ: true,   // 是否启用昵称框自动获取 QQ 昵称和 QQ 头像, 默认关闭
                }
            }
        ]
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

更多配置参数请访问 Valine 官网。

# Twikoo 搭建

官网地址：https://twikoo.js.org/。

本搭建内容一部分来自官网。

这里直接介绍使用 MongeDB、Vercel、Akismet 进行评论系统搭建（官方提供的免费版），如果想要付费的则是 MongeDB、腾讯云开发环境，付费搭建具体看官网。

记得关闭其他评论系统的插件。

# Vercel 部署

注意

Vercel 部署的环境需配合 1.4.0 以上版本的 twikoo.js 使用

视频教程（推荐） (opens new window)，注意：因为 MongoDB 新版本原因，视频第三步的 Clusters 位置发生改变，记得回来配合文字教程进行操作。

文字教程

申请 MongoDB (opens new window) 账号，因为评论的数据都放在 MongoDB 数据库里
创建免费 MongoDB 数据库和数据库用户，区域推荐选择 AWS / N. Virginia (us-east-1)
点击左侧菜单的 Databases 列表，找到 Clusters 并点击右侧的 CONNECT，按步骤设置允许所有 IP 地址的连接（为什么？ (opens new window)），然后点击第二个 Connect your application 并记录数据库连接字符串，请将连接字符串中的 <password> 修改为 数据库密码，其他不变（如 myFirstDatabase）
申请 Vercel (opens new window) 账号
点击以下按钮将 Twikoo 一键部署到 Vercel（确保登录了 Vercel，且网页未关闭） (opens new window)
进入 Settings - Environment Variables，添加环境变量 MONGODB_URI，值为第 3 步的数据库连接字符串，然后 重新部署 deployed
进入 Overview，点击 Domains 下方的链接，如果环境配置正确，可以看到「Twikoo 云函数运行正常」的提示
Vercel Domains（包含 https:// 前缀，例如 https://xxx.vercel.app）即为您的环境 id

看不懂？如果想看有图文字教程，可以看其他博客，如：https://blog.csdn.net/weixin_58068682/article/details/122770936

# Vdoing 集成

打开 docs/.vuepress/config.js（新版是 config.ts），在 head 里添加如下内容（在 <head> 引入在线 script）：

['script', { src: 'https://fastly.jsdelivr.net/npm/twikoo@1.4.18/dist/twikoo.all.min.js' }],

1.4.18 是版本号，当时我使用的最新版是 1.4.18，可以去官网查看最新版本：点击跳转 (opens new window)。

在 docs/.vuepress/components 目录下创建 Vue 组件：Twikoo.vue。如果不存在 components 目录，则请创建。

添加如下内容：

<template>
    <div id="tcomment"></div>
</template>
<script>
let waitTime = 700; // 页面加载后多少毫秒后加载评论区（如果是 0ms，可能会报错）
export default {
  data() {
    return {
      twikoo: "",
      firstLoad: true,
    };
  },
  mounted() {
    // 不初始化评论区的页面：frontmatter 的 comment: false 的文章页、首页、归档页、404 页面
    if (
      (this.$frontmatter.comment == undefined || this.$frontmatter.comment) &&
      this.$route.path != "/" &&
      !this.otherPage(this.$route) &&
      !this.isFourZeroFour(this.$route)
    ) {
      setTimeout(() => {
        this.twikooInit();
      }, waitTime);
    }
  },
  watch: {
    $route(to, from) {
      // 404 页面、不同的标题会触发路由，禁止掉
      if (
        this.$route.path == "/" ||
        this.otherPage(this.$route) ||
        this.$route.hash != "" ||
        this.isFourZeroFour(to)
      ) {
        return;
      }
      // 进入首页、进入 frontmatter 的 comment: false 页面，删除评论区
      if (to.path == "/" || this.getCommentByFrontmatter(to) == false) {
        this.deleteComment();
        return;
      }
      // 初始化评论条件：来自首页，来自归档页、来自 frontmatter 的 comment: true 的文章页
      if (
        from.path == "/" ||
        this.otherPage(from) ||
        !this.getCommentByFrontmatter(from)
      ) {
        this.firstLoad
          ? setTimeout(() => {
              this.twikooInit();
              this.firstLoad = false;
            }, waitTime)
          : this.twikooInit(); // 如果加载过一次评论区，则直接获取
      } else if (this.$route.path != "/" && this.$route.hash == "") {
        // 文章页之间跳转，重新获取评论
        setTimeout(() => {
          this.updateComment();
        }, waitTime);
      }
    },
  },
  methods: {
    twikooInit() {
      twikoo
        .init({
          // envId 要切换成自己的，这是评论区的 ID，一个博客只能有一个评论区 ID，用别人的评论区 ID，导致读者评论时或发送到别人的评论区里
          envId: "https://twikoo.youngkbt.cn/",
          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
          // onCommentLoaded: function () {
          // console.log("评论加载或评论成功");
          // },
        })
        .then(() => {
          this.loadTwikoo();
        });
    },
    // 初始化加载或者跳转新页面重新加载 Twikoo 评论区
    loadTwikoo() {
      let page = document.getElementsByClassName("page")[0];
      let comment = document.getElementById("twikoo");
      // comment 不存在代表曾初始化过，后面被删除
      comment ? (this.twikoo = comment) : (comment = this.twikoo);
      page
        ? comment
          ? page.appendChild(comment)
          : page.appendChild(this.twikoo)
        : "";
      this.updateComment();
    },
    // 跳转新页面，重新获取当前页面的评论信息
    updateComment() {
      let tk_icon = document.getElementsByClassName("tk-icon")[0];
      tk_icon ? tk_icon.click() : undefined;
    },
    // 删除 frontmatter:comment: false 页面的数据
    deleteComment() {
      let comment = document.getElementById("twikoo");
      comment ? comment.parentNode.removeChild(comment) : "";
    },
    // 获取 frontmatter 的 comment
    getCommentByFrontmatter(route) {
      let comment = true;
      this.$site.pages.forEach((item) => {
        if (item.path == route.path) {
          comment = item.frontmatter.comment;
        }
      });
      return comment;
    },
    // 判定当前页面是不是 404
    isFourZeroFour(route) {
      let flag = true;
      this.$site.pages.forEach((item) => {
        if (item.path == route.path) {
          flag = false;
        }
      });
      return flag;
    },
    // 其他页面
    otherPage(route) {
      if(
        route.path == "/archives/" ||
        route.path == "/categories/" ||
        route.path == "/tags/"
      ) {
        return true;
      }else {
        return false;
      }
    }
  },
};
</script>

<style>
.twikoo .tk-comments {
    margin-top: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

注意

67 行的 evnId 换成自己的，即 Vercel 部署 Twikoo 的地址 Vercel Domains，如 https://xxx.vercel.app
目前（2021-08-30）的 evnId 如果填写的是 Vercel 提供的地址（如 https://xxx.vercel.app），则评论区无法显示评论，原因是遭到国内的拦截
目前官方给的解决是 evnId 填写自己的域名，即填写的域名需要进行域名解析，映射到 Vercel 提供的地址。和配置域名访问博客一个道理，只不过换成配置域名访问 Twikoo。

2022-08-30 @Young Kbt

如果你不想在某个页面出现评论区，有两种方法：

文档里的 frontmatter 里设置 comment 为 false

修改源码，位于 126 - 128 行那里（参考），route.path 需要强制判断某个页面的 premilink，等于则评论区不出现在该页面里

写完 Vue 组件，接下来注册使用，在 config.js（新版是 config.ts）的 plugins 模块下，添加如下内容：

# 管理面板

下面来认识 Twikoo 的管理面板，配置好上面的内容，就可以启动项目，然后看看效果。在评论区的右边发现有一个「蓝色小齿轮」，这就是管理面板，第一次 点击小齿轮后会让你注册 登录密码，请记住它，如果忘记了密码，请去直接的 MongoDB 数据库修改。

管理面板的用处：

可以查看、删除、隐藏、显示、置顶任意的评论
配置你的个人信息，登录管理面板后评论系统能识别你的身份（博主）
配置反垃圾模块，防止别人发送不雅的评论
配置邮件通知，别人的评论会通过邮件发送给你

......

到了这一步，就能实现 Gitalk 和 Valine 的评论功能，也就是别人评论 + 你回复，但是这并不是我们选择 Twikoo 的原因。

Twikoo 吸引人的地方在于 反垃圾评论 和 邮件功能提醒，往下看。

# 反垃圾配置

这里使用 Akismet 反垃圾服务（免费）。

Akismet (Automattic Kismet) 是应用广泛的一个垃圾留言过滤系统，其作者是大名鼎鼎的 WordPress 创始人 Matt Mullenweg，Akismet 也是 WordPress 默认安装的插件，其使用非常广泛，设计目标便是帮助博客网站来过滤垃圾留言。

注册 akismet.com (opens new window)
选择 Akismet Personal 订阅，复制得到的 Akismet API Key，到 Twikoo 管理面板「反垃圾」模块中配置

反垃圾测试

请填写 viagra-test-123 作为昵称，或填写 akismet-guaranteed-spam@example.com 作为邮箱，发表评论，这条评论将一定会被视为垃圾评论。

需要注意的是，由于 Akismet 服务响应速度较慢（大约 6 秒），影响用户体验，Twikoo 采取「先放行，后检测」的策略，垃圾评论会在发表后短暂可见。

垃圾评论不会被删除，只是把评论状态变成 审核中。

审核中 的评论，代表只有发言人和博主能看到，其他人无法看到，原因：

被 Akismet 认为是垃圾评论
博主隐藏了发言人的评论，所以只能发言人和博主看到

解决：

让博主在管理面板显示自己的评论

如何在新的客户端（浏览器）进行登录

博主：在管理面板进行登录
读者：输入曾发表评论时用到的昵称和邮箱

# 邮件配置

如果是 Vercel 部署的 Twikoo，请配置国外邮件服务商，避免被邮件服务商判定为垃圾邮件行为，也就是别人的评论不会通过国内的邮箱发送给你，因为 Vercel 位于国外。

PS：邮箱记得开启 POP3、IMAP/SMTP 服务，否则无法通过第三方如 Twikoo 进行登录。

# 其他

更多的配置请自行查看管理面板的文字提示，如果想要支持公式、图片之类的（默认支持的空间大小有限制），请看官网的教程。

如果你觉得配置免费版的 Twikoo 很麻烦，那么可以考虑腾讯云开发环境配置（6.9元/月），因为腾讯云自带反垃圾（代替 Akismet）、部署（代替 Vercel）、支持国内邮箱的功能，所以只需要 MongoDB + 腾讯云即可。

目前我没有使用过腾讯云开发环境，所以大家看官网的教程，自行研究。

# 结束语

如果你还有疑惑，可以去我的 GitHub 仓库或者 Gitee 仓库查看源码。

如果你有更好的方式，评论区留言告诉我，或者加入 Vdoing 主题的 QQ 群：694387113。谢谢！

编辑此页

#本站

更新时间: 2024/11/02, 09:43:06

← 本站 - 服务器部署本站 - 站点信息模块→