本站在刚建站完成时去除了模板中自带的twikoo评论，当时以为是属于第三方的评论插件，因此没有过多关注，本站也没有评论的需求，因此也懒得整理。最近在看了一些教程后，大致明白了原理，于是再试一下twikoo，练练手。

twikoo作为一个评论系统，它需要一个地方存储数据，教程推荐的是MongoDB，免费额度足够使用了。

注册MongoDB，创建免费集群

  • Cluster 类型：选择 Shared（免费版）。
  • 区域：推荐 AWS / N. Virginia (us-east-1)。
  • IP 白名单：设置为 0.0.0.0/0（允许所有 IP 访问）。
  • 创建数据库用户：记录用户名和密码（后续需替换到连接字符串中）。
  • 在 MongoDB 控制台点击 Connect → Drivers，复制生成的连接 URL，替换 <username> 和 <password> 为上面创建的数据库账号密码。

Vercel一键部署Twikoo

  • 打开Twikoo Vercel 部署页面，点击Create创建项目，项目名称：自定义（如 twikoo）。直接部署：无需修改代码，点击Deploy。
  • 部署完成后，进入 Vercel 项目后台，路径：Settings → Environment Variables，添加变量：变量名：MONGODB_URI，变量值为上面MongoDB最后一步生成的链接。
  • 在Deployments页面点击Redeploy使配置生效。
  • 验证部署成功。访问 Vercel 分配的域名（如 https://xxx.vercel.app），若显示Twikoo 云函数运行正常，则部署成功。记录此域名为envId。

hugo的修改

  • 主题的 single.html，将其复制到 Hugo 根目录下的 layouts/_default/single.html，在</article>标签前添加(后面也行)
{{- if (.Param "comments") }}
    {{- partial "comments.html" . }}
{{- end }}
  • 修改hugo配置文件config.yml，添加内容
params:
  comments: true  # 全局启用评论
  twikoo:
    version: 1.6.34  # 与部署Twikoo成功后显示的版本号一致
    envId: https://xxx.vercel.app # Vercel分配的域名
  • 增加评论模板，Hugo的layouts/partials/目录新建文件comments.html，写入以下内容
<div class="pagination__title">
    <span class="pagination__title-h">💬评论</span>
    <hr />
</div>
<div id="tcomment"></div>
<script src="https://cdn.jsdelivr.net/npm/twikoo@{{ .Site.Params.twikoo.version }}/dist/twikoo.all.min.js"></script>
<script>
    twikoo.init({
        envId: "your-env-id",  // 替换为 Vercel 分配的域名，带https://
        el: "#tcomment",
        lang: 'zh-CN',
        path: 'window.TWIKOO_MAGIC_PATH||window.location.pathname'
    });
</script>

配置邮件通知

deepseek有提到邮件通知功能，目前没有研究，以后再写。

本次还是在deepseek的指导下完成，但有两处deepseek没指导明白。导致配置不成功，后来我在网上找了他人的教程才配置成功，但总体过程是清晰完整的。

  • deepseek说envId:中的域名不带https://，但实际需要加https://。
  • deepseek没有提及config.yml中twikoo:标签下需要配置envId: https://xxx.vercel.app