在静态博客里添加Twikoo评论系统，并配置邮箱和TG通知

为什么选择Twikoo

• 开源，免费，轻量无广告（吊打Disqus等一众评论服务）
• 匿名性好，不需要强制社交账号登录（重要‼️）
• 有新评论时可收到邮箱/即时消息通知
• 游客若留下邮箱，评论被回复时可收到邮件提醒（cusdis不支持）
• 数据支持导入导出

总之其他评论系统有的它都有，且更加灵活。

大致流程

以下是我作为一个后端程序员的浅显理解：

配置分三部分：数据库MangoDB（后端），deploy平台 vercel（后端），博客网页（客户端/前端）。 这类web app的配置思路大致是：数据库负责储存数据，deploy平台来执行代码、将其变为app，最后连接到博客，从而在网页显示出来。所以必须按顺序操作，每一步都需要前一步得到的信息从而连接到一起。

1. 设置数据库MongoDB

创建MongoDB账号

MongoDB官网地址: MongoDB登录 (opens new window)

• 在MangoDB创建账号,我这里使用的是google直接登录

• 登录好了以后创建数据库,选择如下图相同地区和商家的数据库,价格选择免费。由于我这里创建了,就只显示选择那个服务器

  

• 给数据库编辑账号密码,然后获取到MangoDB数据库,允许外部链接

​

• 最后获取MangoDB的链接URL然后将<password>替换为自己用户的密码

  

  

  复制出来替换即可

  mongodb+srv://violets007:<password>@cluster0.l10zsxq.mongodb.net/?retryWrites=true&w=majority

2. Deploy平台：Vercel部署

配置Vercel部署环境

• 首先github fork twikoo仓库地址

twikoo的github仓库地址 (opens new window)

• 访问vercel官网导入twikoo仓库地址

• 配置twikoo的环境变量

  

  

• 然后重新部署twikoo的项目访问效果如图就成功一半了

  

  

• 这里由于国内用户无法访问,所以需要通过二级域名方式解锁,可以通过cloudflare进行域名DNS的解析。这里就不过多的介绍了

  

3.博客配置twikoo

查看主题是否支持Twikoo

Twikoo文档里附有支持Twikoo的主题列表 (opens new window)，大部分是Hexo主题。

• 如果支持：那这一步就很简单，通常在设置文件内加入Railway链接即可。具体步骤可参考上面主题列表里的文档链接。以我的Hugo-Stack主题为例，在主题配置文件里修改评论服务为twikoo，然后把第二步最后的链接加上https前缀添加在envID里，如envID = "https://xxx.up.railway.app"

• 我这里使用的是vuepress博客,直接配置如下这些内容即可

  

// 评论插件
[
    {
        name: 'custom-plugins',
        globalUIComponents: ["Twikoo"] // 2.x 版本 globalUIComponents 改名为 clientAppRootComponentFiles
    }
]

• 需要再指定目录下创建Twikoo.vue

  

<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.violets007.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>

只需要把envId修改成自己的二级域名的twikoo就行了

4.配置twikoo

可能会遇到的问题

• 如果手动粘贴代码到html，可能效果不一定尽如人意（位置太高等等）。这是因为主题没有自带针对Twikoo的美化设置，需要自己鼓捣一下主题内的html/css
• 如果点击评论右下小齿轮时显示前端版本落后,如下图:

​

可能是由于主题内置的Twikoo版本没有更新，可在博客文件夹内全文搜索"twikoo”（请善用VS Code的全局搜索）并找到这一行代码：

<script src="//cdn.jsdelivr.net/npm/twikoo@1.6.30/dist/twikoo.all.min.js"></script>

将里面的twikoo@1.x.xx替换成上文提示内的最新版本号twikoo@1.6.30即可，如下图：

通用 REQUIRED_FIELDS: 默认昵称和邮箱为必填项。我修改成了nick，也即邮箱变为选填，游客能够完全匿名（当然不留邮箱就收不到回复提醒了）

隐私 SHOW UA: 默认会显示用户系统和浏览器，处于隐私因素我修改成了false

反垃圾 AKISMET_KEY：垃圾过滤器，可以帮忙过滤spam。设置也很简单，只需去Akismet官网 (opens new window)弄一个API key就可以了，选择Personal并把价格调到$0，下单之后把得到的Akismet API key填在这里

（可选）配置Telegram机器人提醒

通过设置Telegram机器人提醒，站长能够在新评论时得到Telegram消息提示。创建telegram机器人的教程网上挺多的（比如z-lib telegram bot），以下是精简无图版本：

1. 获取API Token 在Telegram@BotFather (opens new window)的聊天界面输入 /newbot - 创建机器人名称 - 创建机器人用户名 - 得到一长串的API token
2. 获取chat id 在@userinfobot (opens new window)内输入/start- 获得的id即为自己的chat_id。把从两个bot得到的东西拼到一起，中间用 “#” 号分隔，即api_token#chat_id。示例：5262***170:AAEzkaMjOayU13fFzcg9PI7_7*****p1iAs#11111111
3. 设置Twikoo 在Twikoo设置的“即时消息”选项下填入以下信息： PUSHOO_CHANNEL: telegram PUSHOO_TOKEN: api_token#chat_id

（可选）配置邮件通知提醒（Gmail邮箱示例）

配置邮箱通知提醒后，每当游客被博主或其他人回复时，他们就会收到邮箱提示。

在Twikoo设置的“邮件通知”选项下填入邮箱信息。以Gmail邮箱为例，以下为必填项：

SENDER_EMAIL: Gmail邮箱地址 SMTP_SERVICE: Gmail SMTP_USER: Gmail邮箱地址 SMTP_PASS: Gmail应用专用密码

注意SMTP_PASS这里不是填写自己的邮箱密码，而是应用专用密码(App password)。Google现在做了调整，必须要先开启邮箱的手机两步验证才能使用App password。入口比较隐蔽，我建议开启两步验证之后直接在设置里搜索关键词App password或应用密码。具体教程可参考官方问答 (opens new window)。

进入App password界面后，点Select app - Other，取个名字后就能得到16位的应用专用密码了。

Twikoo的邮箱设置保存后，可以点击设置最下方的“邮件通知测试”并输入测试邮箱的地址，能收到邮件的话，那就算成功啦。