Astro的Astrofy模板集成Twikoo评论系统

为什么使用twikoo

twikoo是我目前了解到的最方便的博客系统了，不需要特殊的网络环境登陆github，也不需要注册别的网站再去接入。

Astro集成方案

首先是需要安装twikoo的npm依赖

npm i twikoo

安装完依赖后，编写astro组件，我这里是叫 TwikooComment.astro

<!-- Twikoo comment -->
<div id="tcomment"></div>
<script>
    // 引入 twikoo
    import twikoo from "twikoo";
    // 引入 twikoo 的样式
    import "twikoo/dist/twikoo.css";
    function initTwikoo() {
        // 初始化twikoo
        twikoo({
            envId: "<your-twikoo-envId>",
            el: "#tcomment",
            lang: "zh-CN",
        }).then(() => {
            // 这里主要用来调试
            console.log("comment loading success");
        });
    }

    // 这里两个事件绑定很重要，有时候就是路由的时候无法加载twikoo
    document.addEventListener("astro:after-swap", () => initTwikoo(), {
        once: false,
    });
    document.addEventListener("astro:page-load", () => initTwikoo(), {
        once: false,
    });

    initTwikoo();
</script>

由于我这里用的是 Astrofy 模板，组件的使用方式很简单，直接在 layouts/PostLayout.astro 中引入并使用就可以了。比如：

---
// ...
import Comments from '../components/TwikooComment.astro';
// ...
---
<!-- ... -->
      <slot />
      <div class="divider my-2"></div>
      <!-- comment, powered by twikoo -->
      <Comments/>
    </article>
  </main>
</BaseLayout>

说明

上面的 astro:after-swap 和 astro:page-load 这两个事件主要的作用就是为了防止路由切换的时候，评论不加载的问题。

这两个事件是 Astro 内置的视图切换（我这里理解为vue的路由）的生命周期事件，分别是：

• before-swap：在新文档（在准备阶段填充）替换当前文档之前触发的事件。
• page-load：在页面导航结束时触发的事件。

once 我理解为事件不是只触发一次。

具体的内容可以在 Astro视图切换生命周期事件 中找到。