添加Twikoo评论 - Write Here

之前使用 Typecho 和 WordPress 这些动态博客，都是默认带评论区的，换到 HUGO 虽然小站没多少访问量，但果然还是希望有一个评论区，能够和八分访客有些互动和交流

在众多评论插件中选择了 Twikoo 评论，原因如下：

文档详尽，部署简单
不强制使用社交账号/GitHub账号登录

这里简单记录配置过程。如有问题，以官方文档为准

注册 MongoDB 账号

在 Database Access 页面点击 Add New Database User 创建数据库用户，Authentication Method 选 Password，在 Password Authentication 下设置数据库用户名和密码，建议设置强密码并妥善保存。点击 Database User Privileges 下方的 Add Built In Role，Select Role 选择 Atlas Admin，最后点击 Add User

在 Network Access 页面点击 Add IP Address 添加网络白名单。Access List Entry 输入 0.0.0.0/0（允许所有 IP 地址的连接）

在 Database 页面点击 Connect，连接方式选择 Drivers，并记录数据库连接字符串，请将连接字符串中的 <username>:<password> 修改为刚刚创建的数据库 用户名:密码

使用 Netlify 部署

将 twikoo-netlify fork 到自己的 GitHub 仓库

在 Netlify 中选择 Add new site - Importing from an existing project

点击 Deploy with GitHub 并授权，之后选择刚刚 fork 的 twikoo-netlify 项目

点击 Add environment variables - New variable，Key 输入 MONGODB_URI ，Value 输入前面记录的数据库字符串，之后点击 Deploy twikoo-netlify

部署完成后，在 Domain management 中添加自定义域名，并到服务商处完成域名解析

访问域名，显示 “Twikoo 云函数运行正常” 即为部署成功

引入到 BlowFish 主题

在根目录 \layouts\partials 文件夹中新建 comments.html 文件，并粘贴这段代码：

<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.40/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
  envId: '您的环境id', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
  el: '#tcomment', // 容器元素
  // region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
  // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
  // lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
})
</script>

修改 envId 为自己的环境ID

⚠️注意： 使用 Netlify 部署的环境ID格式与注释不同

使用 Netlify 部署的环境 ID 包含 https://前缀和 /.netlify/functions/twikoo 后缀，例如 https://xxx.netlify.app/.netlify/functions/twikoo

完成上述操作后，修改根目录 \config\_default\params.toml 文件，在需要展示评论的地方添加 showComments = true 代码

至此，成功为 HUGO BlowFish 主题引入 Twikoo 评论