Hugo博客公告弹窗

hugo部署twikoo评论

   
文章摘要
摘要小助理今天溜号啦……😜

1.申请 envId

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

2.添加代码

Hugo 的 PaperMod 主题添加 twikoo 代码的位置:layouts/partials/comments.html 推荐添加在自己博客站点下的 layouts 文件夹,不要添加到主题里的 layouts 文件夹,否则更新主题时会被覆盖

<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

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

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

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

完结!

CC BY-NC-SA 4.0 转载请注明
最后更新于 2024-11-20 16:13
clarity统计