上周给 blog.guole.fun 接入了 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。大功告成!

1
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 自动化部署