提示

根据文章评论模块-Young Kbt blog (opens new window)修改，部分内容来自Twikoo官网 (opens new window)。

这里介绍使用 MongeDB、Vercel、Github和Freenom 进行全免费评论系统的搭建，付费搭建具体看官网。支持同时开启Gitalk和Twikoo插件，显示双评论系统。

创建 MongoDB 免费数据库

视频教程（推荐） (opens new window)，注意：因为 MongoDB 新版本原因，视频第三步的 Clusters 位置发生改变，记得回来配合文字教程进行操作。 申请 MongoDB 账号，因为评论的数据都将放在 MongoDB 免费数据库里 创建免费 MongoDB 数据库和数据库用户，区域推荐选择 AWS / N. Virginia (us-east-1) 点击左侧菜单的 Databases 列表，找到 Clusters 并点击右侧的 CONNECT，按步骤设置允许所有 IP 地址的连接（为什么？ (opens new window)），然后点击第二个 Connect your application 并记录数据库连接字符串，请将连接字符串中的 修改为数据库密码（一定记得删除左右括号<>，否则报错{"code":1000,"message":"bad auth : authentication failed"}），其他不变

申请 Freenom 免费域名

具体步骤，请查看这篇博客

在 Vercel 上部署 Twikoo

做好以上两项准备工作之后，我们开始在 Vercel 上部署 Twikoo

注意

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

申请 Vercel 账号 点击 🔺Deploy 将 Twikoo 一键部署到 Vercel（确保登录了 Vercel，且网页未关闭） img(opens new window) 进入 Settings - Environment Variables，添加环境变量 MONGODB_URI，值为第 3 步的数据库连接字符串，然后 重新部署 deployed 进入 Overview，点击 Domains 下方的链接，如果环境配置正确，可以看到「Twikoo 云函数运行正常」的提示 Vercel Domains（包含 https:// 前缀，例如 https://xxx.vercel.app）即为您的环境 id

Vdoing 集成

打开 docs/.vuepress/config.js（新版是 config.ts），在 head 标签里添加如下内容

['script', { src: 'https://cdn.staticfile.org/twikoo/1.6.8/twikoo.all.min.js' }],

1.6.8 是版本号，当时我使用的最新版是 1.6.8，可以去官网查看最新版本：点击跳转 (opens new window)。 在 docs/.vuepress/components 目录下创建 Vue 组件：Twikoo.vue。如果不存在 components 目录，则请创建。 添加如下内容（你也可以直接下载我创建的Twikoo.vue）：

<template>
  <div id="tcomment"></div>
</template>
<script>
let waitTime = 700; // 页面加载后多少毫秒后加载评论区（如果是 0ms，可能会报错）
let archives = "/archives/"; // 归档页的 permalink
export default {
  data() {
    return {
      twikoo: "",
      firstLoad: true,
    };
  },
  mounted() {
    // 不初始化评论区的页面：frontmatter 的 comment: false 的文章页、首页、归档页、404 页面
    if (
      (this.$frontmatter.comment == undefined || this.$frontmatter.comment) &&
      this.$route.path != "/" &&
      this.$route.path != archives &&
      !this.isFourZeroFour(this.$route)
    ) {
      setTimeout(() => {
        this.twikooInit();
      }, waitTime);
    }
  },
  watch: {
    $route(to, from) {
      // 404 页面、不同的标题会触发路由，禁止掉
      if (
        this.$route.path == "/" ||
        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 == "/" ||
        from.path == archives ||
        !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: "你的 envId",
          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;
    },
  },
};
</script>

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

注意
67 行的 evnId 换成自己的，即 Vercel 部署 Twikoo 的地址 Vercel Domains，如 https://xxx.vercel.app

目前（2021-08-30）的 evnId 如果填写的是 Vercel 提供的地址（如 https://xxx.vercel.app），则评论区无法显示评论，原因是遭到国内的拦截 目前官方给的解决是 evnId 填写自己的域名，即填写的域名需要进行域名解析，映射到 Vercel 提供的地址。和配置域名访问博客一个道理，只不过换成配置域名访问 Twikoo。 写完 Vue 组件，接下来注册使用，在 config.ts 的 plugins 模块下，添加如下内容：

import { UserPlugins } from 'vuepress/config'
plugins: <UserPlugins>[
    [
    	{
        	name: 'custom-plugins',
        	globalUIComponents: ["Twikoo"] // 2.x 版本 globalUIComponents 改名为 clientAppRootComponentFiles
    	}
    ]
]

管理面板

下面来认识 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 + 腾讯云即可。 目前我没有使用过腾讯云开发环境，所以大家看官网的教程，自行研究。