🐛 Twikoo + Utterances 评论插件补丁

components/Utterances.js

@@ -1,5 +1,6 @@
+import { useEffect, useState } from 'react'
 import { siteConfig } from '@/lib/config'
-import { useEffect } from 'react'
+import { useGlobal } from '@/lib/global'
 
 /**
  * 评论插件
@@ -9,28 +10,48 @@ import { useEffect } from 'react'
  * @constructor
  */
 const Utterances = ({ issueTerm, layout }) => {
+  const { isDarkMode } = useGlobal()
+
+  const [isLoading, setLoading] = useState(true);
+
   useEffect(() => {
-    const theme =
-      siteConfig('APPEARANCE') === 'auto'
-        ? 'preferred-color-scheme'
-        : siteConfig('APPEARANCE') === 'light'
-          ? 'github-light'
-          : 'github-dark'
-    const script = document.createElement('script')
-    const anchor = document.getElementById('comments')
-    script.setAttribute('src', 'https://utteranc.es/client.js')
-    script.setAttribute('crossorigin', 'anonymous')
-    script.setAttribute('async', true)
-    script.setAttribute('repo', siteConfig('COMMENT_UTTERRANCES_REPO'))
-    script.setAttribute('issue-term', 'title')
-    script.setAttribute('theme', theme)
-    anchor.appendChild(script)
+    const script = document.createElement('script');
+    const anchor = document.getElementById('comments');
+    script.onload = () => setLoading(false);
+    script.setAttribute('src', 'https://utteranc.es/client.js');
+    script.setAttribute('crossorigin', 'anonymous');
+    script.setAttribute('async', true);
+    script.setAttribute('repo', siteConfig('COMMENT_UTTERRANCES_REPO'));
+    script.setAttribute('issue-term', 'title');
+    // 初始主题
+    script.setAttribute('theme', isDarkMode ? 'github-dark' : 'github-light');
+    anchor.appendChild(script);
+
     return () => {
-      anchor.innerHTML = ''
+      // anchor.innerHTML = ''
+    };
+  }, []);
+
+  useEffect(() => {
+    // 直接设置 iframe 的类来改变主题，不重新加载脚本
+    const iframe = document.querySelector('iframe.utterances-frame');
+    if (iframe) {
+      iframe.contentWindow.postMessage({
+        type: 'set-theme',
+        theme: isDarkMode ? 'github-dark' : 'github-light'
+      }, 'https://utteranc.es');
     }
-  })
-  return <div id="comments" className='utterances' >
-  </div>
+  }, [isDarkMode]);
+
+  return (
+    <div id="comments" className='utterances'>
+      {isLoading && (
+        <div className="flex justify-center items-center m-8">
+          <div className="animate-spin rounded-full h-8 w-8 border-2 border-indigo-400 border-t-transparent"></div>
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default Utterances

styles/globals.css

@@ -160,6 +160,11 @@ nav {
    @apply text-blue-700
 }
 
+/* twikoo 内置的 element-ui 加载样式 */
+.el-loading-spinner {
+  @apply flex justify-center items-center;
+}
+
 /* Webmention style */
 .webmention-block {
   background: rgba(0, 116, 222, .2);