feat: add twikoo & waline comments component (untested)

src/components/helper/comments/Twikoo.astro

@@ -0,0 +1,25 @@
+---
+import {siteConfig} from "../../../config";
+
+const twikooServer = siteConfig.comments.twikoo.envId;
+const twikooRegion = siteConfig.comments.twikoo.region || ''; // 默认为空
+---
+<div id="tcomment" data-region={twikooRegion} data-env={twikooServer}></div>
+<script>
+    import 'twikoo/dist/twikoo.min.js';
+    function initTwikoo() {
+        const twikooElement = document.querySelector('#tcomment');
+        if (!twikooElement) return;
+        twikoo.init({
+            envId: twikooElement.getAttribute('data-env'), // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
+            el: '#tcomment', // 容器元素
+            region: twikooElement.getAttribute('data-region'), // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
+            lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
+        })
+    }
+    initTwikoo();
+    // Re-initialize on view transitions, fix issues with Astro's ClientRouter
+    document.addEventListener('astro:page-load', () => {
+        initTwikoo();
+    });
+</script>

src/components/helper/comments/Waline.astro

@@ -0,0 +1,25 @@
+---
+import '@waline/client/style';
+import {siteConfig} from "../../../config";
+
+const walineServer = siteConfig.comments.waline.serverURL;
+---
+<div id="waline" data-server={walineServer}></div>
+<script>
+    import { init } from '@waline/client';
+    function initWaline() {
+        const walineElement = document.querySelector('#waline');
+
+        if (!walineElement) return;
+        init({
+            el: '#waline',
+            serverURL: `https://${walineElement.getAttribute('data-server')}` || '', // Replace with your Waline server URL
+            dark: 'auto', // Automatically switch between light and dark mode
+        });
+    }
+    initWaline();
+    // Re-initialize on view transitions, fix issues with Astro's ClientRouter
+    document.addEventListener('astro:page-load', () => {
+        initWaline();
+    });
+</script>

src/config.ts

@@ -44,7 +44,7 @@ export const siteConfig = {
     contentPassword: 'p1easeChangeMe!',
     // comments
     comments: {
-        type: 'artalk', // 'artalk','giscus','fediverse','email','hatsu','oom'
+        type: 'artalk', // 'artalk','giscus','fediverse','email','hatsu','oom','twikoo','waline'
         artalk: {
             instanceDomain: '', // the domain of your artalk instance
         },
@@ -88,6 +88,14 @@ export const siteConfig = {
         hatsu: {
             // use hatsu.cli.rs to get replies from the fediverse
             instanceDomain: '',
+        },
+        twikoo: {
+            // use twikoo to get comments
+            envId: 'your-env-id', // the env id/domain of your twikoo instance, see https://twikoo.js.org/backend.html
+            region: '' // the deployment region of your twikoo instance, can be 'ap-shanghai', 'ap-guangzhou', if you are not deploying twikoo on Tencent Cloud, leave it empty
+        },
+        waline: {
+            serverURL: '' // the domain of your waline instance, usually your-waline-instance.com
         }
     },
     // footer