update

src/components/Comment.astro

@@ -0,0 +1,26 @@
+<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.44/dist/twikoo.min.js';
+        script.async = true;
+        script.onload = () => {
+          const initScript = document.createElement('script');
+          initScript.innerHTML = `
+            twikoo.init({
+                envId: 'https://twikoo.hk.nvme0n1p.dev/',
+                el: '#tcomment',
+            });
+        `;
+          document.body.appendChild(initScript);
+        };
+        document.body.appendChild(script);
+      }
+    }
+    loadTwikoo();
+  });
+</script>

src/pages/about.astro

@@ -3,7 +3,7 @@ import Breadcrumbs from '@/components/Breadcrumbs.astro'
 import Link from '@/components/Link.astro'
 import PageHead from '@/components/PageHead.astro'
 import Layout from '@/layouts/Layout.astro'
-
+import Comment from '@/components/Comment.astro'
 ---
 
 <Layout class="max-w-3xl">
@@ -157,27 +157,7 @@ import Layout from '@/layouts/Layout.astro'
     <section class="rounded-lg border p-6">
       <p class="text-xs uppercase text-muted-foreground">comment</p>
       <h3 class="text-xl font-semibold mb-3">留言 / 评论</h3>
-      <div id="tcomment"></div>
-      <script
-        is:inline
-        src="https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js"
-      ></script>
-      <script is:inline>
-        const mountTwikoo = () => {
-          if (!window.twikoo) return
-          window.twikoo.init({
-            envId: 'https://twikoo.hk.nvme0n1p.dev/',
-            el: '#tcomment',
-          })
-        }
-
-        if (document.readyState === 'complete') {
-          mountTwikoo()
-        } else {
-          addEventListener('astro:page-load', mountTwikoo)
-          addEventListener('DOMContentLoaded', mountTwikoo, { once: true })
-        }
-      </script>
+      <Comment />
     </section>
   </section>
 </Layout>

src/pages/blog/[...id].astro

@@ -25,6 +25,7 @@ import {
   parseAuthors,
 } from '@/lib/data-utils'
 import type { TOCSection } from '@/lib/data-utils'
+import Comment from '@/components/Comment.astro'
 import { formatDate } from '@/lib/utils'
 import { Icon } from 'astro-icon/components'
 import { Image } from 'astro:assets'
@@ -245,28 +246,8 @@ export const prerender = false;
     </article>
 
     <div class="col-start-2">
-      <div id="tcomment"></div>
+      <Comment />
     </div>
-    <script
-      is:inline
-      src="https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js"
-    ></script>
-    <script is:inline>
-      const mountTwikoo = () => {
-        if (!window.twikoo) return
-        window.twikoo.init({
-          envId: 'https://twikoo.hk.nvme0n1p.dev/',
-          el: '#tcomment',
-        })
-      }
-
-      if (document.readyState === 'complete') {
-        mountTwikoo()
-      } else {
-        addEventListener('astro:page-load', mountTwikoo)
-        addEventListener('DOMContentLoaded', mountTwikoo, { once: true })
-      }
-    </script>
 
     {
       (hasChildPosts || isCurrentSubpost) && (

src/pages/friends.astro

@@ -4,11 +4,10 @@ import Link from '@/components/Link.astro'
 import PageHead from '@/components/PageHead.astro'
 import Layout from '@/layouts/Layout.astro'
 import {
-  FRIENDS_API_URL,
   getFriendLinks,
   type LinkEntry,
 } from '@/lib/data-utils'
-
+import Comment from '@/components/Comment.astro'
 const placeholderAvatar = '/avatar-placeholder.svg'
 const visibleLinks = await getFriendLinks()
 ---
@@ -82,26 +81,6 @@ link: https://nvme0n1p.dev
 avatar: https://gravatar.com/avatar/29d64df3ca2a9dac5a7fffa5372fb80fb3270ceb223de2af0c33cdc4b2cbe954?v=1687917579000&size=256&d=initials
 description: 醉后不知天在水，满船清梦压星河。
     </pre>
-    <div id="tcomment"></div>
-      <script
-        is:inline
-        src="https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js"
-      ></script>
-      <script is:inline>
-        const mountTwikoo = () => {
-          if (!window.twikoo) return
-          window.twikoo.init({
-            envId: 'https://twikoo.hk.nvme0n1p.dev/',
-            el: '#tcomment',
-          })
-        }
-
-        if (document.readyState === 'complete') {
-          mountTwikoo()
-        } else {
-          addEventListener('astro:page-load', mountTwikoo)
-          addEventListener('DOMContentLoaded', mountTwikoo, { once: true })
-        }
-      </script>
+    <Comment />
   </section>
 </Layout>