comment

public/js/twikoo-loader.js

@@ -0,0 +1,52 @@
+(function () {
+  var TWIKOO_SRC =
+    'https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js'
+  var TARGET_SELECTOR = '#tcomment'
+  var state = { loading: false, loaded: false }
+
+  function init() {
+    var container = document.querySelector(TARGET_SELECTOR)
+    if (!container) return
+
+    function runInit() {
+      if (state.loaded) return
+      state.loaded = true
+      if (window.twikoo) {
+        window.twikoo.init({
+          envId: 'https://twikoo.hk.nvme0n1p.dev/',
+          el: TARGET_SELECTOR,
+        })
+      }
+    }
+
+    if (window.twikoo) {
+      runInit()
+      return
+    }
+
+    if (state.loading) return
+    state.loading = true
+
+    var script = document.createElement('script')
+    script.src = TWIKOO_SRC
+    script.async = true
+    script.onload = runInit
+    script.onerror = function (err) {
+      console.error('Failed to load Twikoo:', err)
+    }
+    document.head.appendChild(script)
+  }
+
+  function onLoad() {
+    init()
+  }
+
+  if (document.readyState === 'complete') {
+    onLoad()
+  } else {
+    window.addEventListener('load', onLoad, { once: true })
+  }
+
+  document.addEventListener('astro:page-load', onLoad)
+  document.addEventListener('astro:after-swap', onLoad)
+})()

src/components/Comment.astro

@@ -1,52 +1,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>
-  (() => {
-    const TWIKOO_SRC =
-      'https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js'
-    const TARGET_SELECTOR = '#tcomment'
-    const state = { loading: false, loaded: false }
-
-    const initTwikoo = () => {
-      const container = document.querySelector(TARGET_SELECTOR)
-      if (!container) return
-
-      const runInit = () => {
-        if (state.loaded) return
-        state.loaded = true
-        window.twikoo?.init({
-          envId: 'https://twikoo.hk.nvme0n1p.dev/',
-          el: TARGET_SELECTOR,
-        })
-      }
-
-      if (window.twikoo) {
-        runInit()
-        return
-      }
-
-      if (state.loading) return
-      state.loading = true
-
-      const script = document.createElement('script')
-      script.src = TWIKOO_SRC
-      script.async = true
-      script.onload = runInit
-      script.onerror = (err) => {
-        console.error('Failed to load Twikoo:', err)
-      }
-      document.head.appendChild(script)
-    }
-
-    const onLoad = () => initTwikoo()
-
-    if (document.readyState === 'complete') {
-      onLoad()
-    } else {
-      window.addEventListener('load', onLoad, { once: true })
-    }
-
-    document.addEventListener('astro:page-load', onLoad)
-    document.addEventListener('astro:after-swap', onLoad)
-  })()
-</script>
+<script src="/js/twikoo-loader.js" defer></script>

src/pages/about.astro

@@ -155,8 +155,6 @@ import Comment from '@/components/Comment.astro'
     </section>
 
     <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>
       <Comment />
     </section>
   </section>