在 Astro 框架中应用 Twikoo 评论系统 • Avery's Blog

简要#

为了在 Astro 框架中（特别是 Astro Theme Pure 主题）应用 Twikoo 评论系统，我们需要对三个文件“动刀子”，如下：

关闭 Waline 默认设置#

确保你已经在site.config.ts中关闭了该主题默认的 Waline 评论设置。

修改 integration-config.ts#

找到packages/pure/type/integration-config.ts，添加以下内容

    /** The Twikoo comment system */
    twikoo: z.object({
      /** Enable the Twikoo comment system. */
      enable: z.boolean().default(false),
      /** The environment ID or server URL for Twikoo */
      envId: z.string(),
      /** Optional region for Tencent Cloud */
      region: z.string().optional(),
      /** Additional Twikoo configs */
      additionalConfigs: z.record(z.string(), z.any()).default({})
    }).optional(),

修改 site.config.ts#

添加以下内容

twikoo: {
    enable: true,
    envId: 'https://example.top/',
    region: 'ap-shanghai',
    additionalConfigs: {
      lang: 'zh-CN'
    }
  }

新建 Comment.astro#

在src/components下新建Comment.astro

---
// comment.astro

import config from '../site.config';

const twikoo = config.integ.twikoo;

const twikooClientConfig = {
  envId: twikoo?.envId,
  region: twikoo?.region ?? '',
  additionalConfigs: twikoo?.additionalConfigs || {}
};
---

{twikoo && twikoo.enable && (
  <div id="twikoo-comment" class="twikoo-container"></div>
)}

{twikoo && twikoo.enable && (
  <script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.all.min.js" async></script>
)}

{twikoo && twikoo.enable && (
  <script is:inline define:vars={twikooClientConfig}>
    document.addEventListener('DOMContentLoaded', () => {

      const tryInitTwikoo = (attempt = 0) => {

        if (!window.twikoo) {
   
          if (attempt < 10) {
            setTimeout(() => tryInitTwikoo(attempt + 1), 300);
          } else {
            console.error('Twikoo CDN script failed to load.');
          }
          return;
        }

        window.twikoo.init({
          el: '#twikoo-comment',
          envId: envId,
          region: region,
          ...additionalConfigs 
        });
      };
      
      tryInitTwikoo();
    });
  </script>
)}

astro

修改 BlogPost.astro#

在src/components/layouts/BlogPost.astro中添加引用

import Comment from '@/components/Comment.astro'

plaintext

这样子就大功告成啦~