cyan blog
2025-03-28
0
0
目录

评论区未完成

# 常见的评论区插件

Vssue：Vssue 简单来说就是 VuePress + issue，专门用来 VuePress 的评论功能。https://vssue.js.org/zh/guide/

GitTalk ：https://github.com/gitalk/gitalk

Gitment：https://imsun.net/posts/gitment-introduction/

Valine：https://valine.js.org/

ArtTalk：https://wiki.eryajf.net/pages/b74c2b/

安装参考：

# Twikoo的配置

本文将讲解如何在vuepress上配置Twikoo插件

# 创建mongoDB

根据MongoDB Atlas (opens new window)操作

# Vercel部署

根据vercel-部署 (opens new window)操作

配置完成后访问你的环境 idhttps://xxx.vercel.app）

显示{"code":100,"message":"Twikoo 云函数运行正常，请参考 https://twikoo.js.org/frontend.html 完成前端的配置","version":"1.6.41"} 表示成功

# Vdoing 集成

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

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

1.6.7 是版本号，当时我使用的最新版是 1.6.7，可以去官网查看最新版本：点击跳转 (opens new window) (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>

注意

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

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

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

写完 Vue 组件，接下来注册使用，在 config.js（新版是 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 默认安装的插件，其使用非常广泛，设计目标便是帮助博客网站来过滤垃圾留言。

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

反垃圾测试

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

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

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

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

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

解决：

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

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

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

# 邮件配置

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

# 可选的国外邮件服务商

以下是一些常用的国外邮件服务商，它们支持 SMTP 协议，并且适合用在 Vercel 部署的 Twikoo 中：

  1. Gmail
    • 如果使用 Gmail 账号，请确保启用了“低安全性应用访问”权限，或者生成一个应用专用密码。
    • Google 可能会限制每天发送的邮件数量。
  2. SendGrid
    • SendGrid 提供免费套餐，每月可发送 100 封邮件。
    • 注册后需要验证域名或邮箱地址。
  3. Mailgun
    • Mailgun 提供免费试用，但可能需要绑定信用卡。
    • 需要验证域名以解锁所有功能。
  4. Amazon SES (Simple Email Service)
    • Amazon SES 提供免费套餐，每月可发送一定数量的邮件。
    • 需要在 AWS 控制台中设置 SMTP 凭据。

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

# 关于显示头像

什么是 Gravatar？简单来说就是全球通用头像，只要你去 Gravatar 的网站上设置一个邮箱和头像，这样在其他支持 Gravatar 的网站上，你输入邮箱就能自动获取你的头像。读者可以去 https://cravatar.cn (opens new window) (opens new window)上注册邮箱，然后就可以了（由于 CDN 缓存的问题，可能得过几个小时才能正常显示）。

注意事项：

  • 每个页面加载评论区的时候，使用了 JS 的document.getElementById("twikoo") 方法来加载评论区（参考刚刚的“前端配置 Twikoo”小节）
  • 所以，在写博客的时候，文章的标题请不要取成单独的“Twikoo”，这样会导致评论区样式混乱。
  • 例如，本博客的小标题都不是单独的“Twikoo”，而是诸如“Twikoo 的安装”、“Twikoo 的目录结构”之类的。

参考

上次更新: 2025/4/3 15:36:15
代码私有
MoreMore

← MoreMore→

最近更新
01
Dream
04-02
02
Introduce
04-01
03
MoreMore 未完成
03-31
更多文章>
Theme by Vdoing | Copyright © 2025-2025 Cyan Blog