Astro 添加 Twikoo 评论

今天一博友问起 Astro 添加 Artalk 评论的方法，虽然我没用 Artalk 这个评论，但是我曾经测试过。将评论添加到博客上的方法与 Twikoo 差不多，于是趁着中午休息时间简单修改与测试就将代码¹发给了博友，希望能帮他解决问题吧。

话不多说，在 src/components 组件目录新建一个 Comment.astro 组件，内容如下：

<div id="tcomment"></div>

<script>
  document.addEventListener('astro:page-load', () => {
    function loadTwikoo() {
      const commentsContainer = document.getElementById('tcomment');
      if (commentsContainer) {
        const script = document.createElement('script');
        script.src = 'https://cdn.staticfile.org/twikoo/1.6.32/twikoo.all.min.js';
        script.async = true;
        script.onload = () => {
          const initScript = document.createElement('script');
          initScript.innerHTML = `
            twikoo.init({
                envId: '您的环境id',
                el: '#tcomment',
            });
        `;
          document.body.appendChild(initScript);
        };
        document.body.appendChild(script);
      }
    }
    loadTwikoo();
  });
</script>

接下来在需要添加评论的页面添加组件即可。

---
  import Comment from '~/components/Comment.astro';
---

<!-- 引入评论组件 -->
<Comment />