Hugo博客添加Twikoo评论

因为 Hugo 博客的 PaperMod 主题是外国人开发的，国人用的不多，所以 PaperMod 主题没有自带 twikoo 评论系统，于是自己琢磨和查找资料，搞出来了

1. 申请 envId

请看 twikoo 官方文档，我选的是 vercel 部署方式，视频教程：Twikoo Vercel 部署教程 👇

2. 添加代码

Hugo 的 PaperMod 主题添加 twikoo 代码的位置：layouts/partials/comments. Html

推荐添加在自己博客站点下的 layouts 文件夹，不要添加到主题里的 layouts 文件夹，否则更新主题时会被覆盖

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<!-- Twikoo -->
<div>
    <div class="pagination__title">
        <span class="pagination__title-h" style="font-size: 20px;">💬评论</span>
        <hr />
    </div>
    <div id="tcomment"></div>
    <script src="https://cdn.staticfile.org/twikoo/{{ .Site.Params.twikoo.version }}/twikoo.all.min.js"></script>
    <script> twikoo.init({
            envId: "",  //这里填写自己的envId
            el: "#tcomment",
            lang: 'zh-CN',
            region: 'ap-guangzhou',  //我的区域是广州，可以不填，默认是ap-shanghai
            path: window.TWIKOO_MAGIC_PATH||window.location.pathname,
        }); </script>
</div>

调用上述 twikoo 代码的位置：layouts/_default/single. Html

1
2
3
4
5
6
7
8
9


<article class="post-single">

  // 这里是默认的其他代码
  
  // twikoo，一般只需要复制以下3行代码，加上其他代码是为了帮助读者确认代码添加的位置
  {{- if (.Param "comments") }}
    {{- partial "comments.html" . }}
  {{- end }}
</article>

在站点配置文件 config. Yml 的 params 中加上如下代码，版本号自己去 twikoo 的 github 看最新的版本

1
2
3


params:
	twikoo:
      version: 1.5.8 // 这个版本号要自己手动修改，和twikoo的版本号要对得上

3. 邮件提醒

Twikoo 比较方便，邮件提醒功能只需要在评论里设置就好了

会出现这个，里面的配置就不详细讲解了，自带的就讲的很清楚