在 Astro 博客中集成 Twikoo 评论系统

简介

Twikoo 是一个简单、安全、免费的评论系统。本文将介绍如何在 Astro 博客中集成 Twikoo

准备工作

1. 部署 Twikoo
2. 集成 Twikoo 到 Astro 博客

步骤一、Twikoo 采用 Vercel 部署

具体教程参考Twikoo官方教程，很详细

https://twikoo.js.org/backend.html#vercel-%E9%83%A8%E7%BD%B2

部署好后，Vercel Domains（包含 https:// 前缀，例如 https://xxx.vercel.app）即为您的环境 id

步骤二、将 Twikoo 部署到 Astro 博客

在 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.jsdelivr.net/npm/twikoo@1.6.41/dist/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>

将 评论组件添加到博客文章模板合适的位置中：

---
// src/layouts/PostDetails.astro
import Comment from "../components/Comment.astro";
---

<article>
  <slot />
  <Comment />
</article>