Hugo 设置不同页面共用一套 Twikoo 评论

@guole  |   2021-05-23T10:34:37+08:00  |  2 分钟阅读   |  更新于 2021-05-23T11:04:37+08:00

上周给本站接入了 Twikoo 评论系统,这次在两个页面共用同一个留言板(Twikoo)内容。

本站的留言板有个独立的.md文件,左上角 icon 点击会翻转展示个人信息。我希望这里展示的留言版,和菜单栏留言板是同一套内容。那怎么做呢?

好在发现了 Twikoo 支持path参数,折腾半天也没整上,Twikoo 作者,虹墨在群里指导了下,并且立即发了个简短教程,不胜感激。考虑到 Hugo 有些特别的地方,自己也研究了下才跑通,因此记录下来分享。

配置 Twikoo

首先搞个独立的模板文件comments.html,放在了/layouts/partials/目录,因为其他文章需要各自的 Twikoo,所以搞个特别的,专门在留言板页面引用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 <script>window.TWIKOO_MAGIC_PATH="留言板"</script>
    <div class="liuyan" >  <!--  自己加了个标题  --> 
        <p>留言板</p>
      </div>
    <div id="tcomment"></div>
      <script src="https://cdn.jsdelivr.net/npm/twikoo@1.3.1/dist/twikoo.all.min.js"></script>
      <script>
      twikoo.init({
        envId: '*******',// 你的环境id
        el: '#tcomment',
        // region: 'ap-guangzhou', // 环境地域,默认为 ap-shanghai,如果您的环境地域不是上海,需传此参数
        path: 'window.TWIKOO_MAGIC_PATH||window.location.pathname', // 用于区分不同文章的自定义 js 路径,如果您的文章路径不是 location.pathname,需传此参数
      })
</script>

重点是这个path设置为window.TWIKOO_MAGIC_PATH||window.location.pathname,同时在需要共用的页面加一个 <script>window.TWIKOO_MAGIC_PATH="留言板"</script>,因此我这个模板文件里也加了。注意这里的留言板名称要两处保持一致。

多个模板页面引用

我使用的是 Hugo-Dream 主题,因此还需要在 nave.html模板中,也加一句window.TWIKOO_MAGIC_PATH||window.location.pathname。大功告成!

创建一个菜单栏入口进入的留言板页面(与上面模板名称保持一致)hugo new comments.md戳这里查看我的留言板,再点击左上角第一个 icon 瞧瞧!

现在,两个页面 Twikoo 内容一致啦~~

  1. Hugo 国内腾讯云域名注册
  2. 使用 Hugo + Dream主题搭建个人Blog
  3. Hugo 启用 Twikoo 评论系统
  4. Hugo 设置不同页面共用一套 Twikoo 评论
  5. Hugo 实现 Coding + Github 自动化部署

评论区

avatar
关于我

Guo Le 的博客 ❤️❤️

你来到了一片知识的荒芜区 🏜🌵🏜🌵

心血来潮有此页面

  • 感谢 g1eny0ung 前人栽树
  • 一个喜欢瞎折腾的互联网打工人
  • 当前行业:人工智能 🤖🤖

免责声明 📢📢

  • 本站页面的部分内容,包括但不限于图片、音频、视频,来源于网络。由于无法深究其原作者,因此未曾署名。若您是部分内容原作者,且不希望本站使用,可联系本人删除。
其他

持续分享一些好玩的东西,或是美好的短文,又或者一段优美的文案。

欢迎与我交流,右边邮箱可联系到我。

斗胆放上乞讨码。😂😂
最好附加一下信息或者留言,十分感谢 💖💖

捐赠列表 💖💖

再次感谢以下朋友:

WeChat

  1. 2021.05.13 收到来自 浅浅 的 ¥8.88
  2. 2021.05.13 收到来自 宁哥 的 ¥8.88
  3. 2021.06.21 收到来自 浅浅 的 ¥1.88
  4. 2021.07.12 收到来自 。旧念 的 ¥8.88

留言板