⚡ Perf: complete giscus comment system (#130)

exampleSite/config.toml

@@ -929,20 +929,17 @@ enableEmoji = true
         lightgallery = false
       [params.page.comment.giscus]
         enable = true
-        repo = "giscus/giscus"
-        repoId = "MDEwOlJlcG9zaXRvcnkzNTE5NTgwNTM="
-        category = ""
-        categoryId = "MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyNzk2NTc1"
-        mapping = "specific"
-        term = "Welcome to giscus!"
+        repo = "Lruihao/FixIt"
+        repoId = "R_kgDOGihPtQ"
+        category = "General"
+        categoryId = "DIC_kwDOGihPtc4CApHX"
+        mapping = "title"
         reactionsEnabled = "1"
-        emitMetadata = "1"
-        inputPosition = "top" # top, bottom
-        theme = "light"
-        lang = "en"
-        loading = "lazy"
-        nscript = "afterInteractive"
-        crossorigin = "anonymous"
+        emitMetadata = "0"
+        inputPosition = "bottom" # top, bottom
+        lightTheme = "light"
+        darkTheme = "dark"
+        lazyLoad = true
     # Third-party library config
     # 第三方库配置
     [params.page.library]

layouts/partials/single/comment.html

@@ -236,7 +236,30 @@
     {{- $giscus := $comment.giscus | default dict -}}
     {{- if $giscus.enable -}}
       {{- with $giscus -}}
-        <script src="https://giscus.app/client.js" data-repo="{{ .Repo }}" data-repo-id="{{ .RepoId }}" data-category="{{ .Category }}" data-category-id="{{ .CategoryId }}" data-mapping="{{ .Mapping }}" data-term="{{ .Term }}" data-theme="{{ .Theme }}" data-reactions-enabled="{{ .ReactionsEnabled }}" data-emit-metadata="{{ .emitMetadata }}" data-input-position="{{ .inputPosition }}" data-lang="{{ .Lang }}" data-nscript="{{ .Nscript }}"></script>
+        {{- $commentConfig = .lightTheme | default "light" | dict "lightTheme" | dict "giscus" | merge $commentConfig -}}
+        {{- $commentConfig = .darkTheme | default "dark" | dict "darkTheme" | dict "giscus" | merge $commentConfig -}}
+        <div id="giscus">
+          <script
+            src="https://giscus.app/client.js"
+            data-repo="{{ .Repo }}"
+            data-repo-id="{{ .RepoId }}"
+            data-category="{{ .Category }}"
+            data-category-id="{{ .CategoryId }}"
+            data-mapping="{{ .Mapping }}"
+            data-theme="preferred_color_scheme"
+            data-reactions-enabled="{{ .ReactionsEnabled }}"
+            data-emit-metadata="{{ .emitMetadata }}"
+            data-input-position="{{ .inputPosition }}"
+            data-lang="{{ $.Site.LanguageCode }}"
+            {{ if ne .LazyLoad false }}data-loading="lazy"{{ end }}
+            crossorigin="anonymous"
+            async
+            defer
+          ></script>
+          <noscript>
+            Please enable JavaScript to view the comments powered by <a href="https://giscus.app/" rel="external nofollow noopener noreffer">giscus</a>.
+          </noscript>
+        </div>
       {{- end -}}
     {{- end -}}
   </div>

src/js/theme.js

@@ -763,8 +763,7 @@ class Theme {
           type: 'set-theme',
           theme: this.isDark ? utterancesConfig.darkTheme : utterancesConfig.lightTheme
         };
-        const iframe = document.querySelector('.utterances-frame');
-        iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+        document.querySelector('.utterances-frame')?.contentWindow.postMessage(message, 'https://utteranc.es');
       });
       this.switchThemeEventSet.add(this._utterancesOnSwitchTheme);
       return;
@@ -793,6 +792,24 @@ class Theme {
       }
       return;
     }
+    if (this.config.comment.giscus) {
+      const giscusConfig = this.config.comment.giscus;
+      this._giscusOnSwitchTheme = this._giscusOnSwitchTheme || (() => {
+        const message = { setConfig: { theme: this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme }};
+        document.querySelector('.giscus-frame')?.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+      });
+      this.switchThemeEventSet.add(this._giscusOnSwitchTheme);
+      const _this = this;
+      _this.giscus2parentMsg = window.addEventListener('message', (event) => {
+        const $script = document.querySelector('#giscus>script');
+        if ($script){
+          _this._giscusOnSwitchTheme();
+          $script.parentElement.removeChild($script);
+        }
+        window.removeEventListener('message', _this.giscus2parentMsg);
+      });
+      return;
+    }
   }
 
   initCookieconsent() {