fix: giscus theme and language display issues (#95)

* chore: minor update giscus template

* fix: theme toggle should select all

* chore: example configs for giscus

* fix: language code in giscus

exampleSite/hugo.yaml

@@ -26,6 +26,7 @@ languages:
     title: "Hextra テーマ"
   zh-cn:
     languageName: 简体中文
+    languageCode: zh-CN
     weight: 3
     title: Hextra
 
@@ -122,3 +123,20 @@ params:
   editURL:
     enable: true
     base: "https://github.com/imfing/hextra/edit/main/exampleSite/content"
+
+  comment:
+    enable: false
+    type: giscus
+
+    # https://giscus.app/
+    giscus:
+      repo: "imfing/hextra"
+      repoId: "R_kgDOJ9fJag"
+      category: "General"
+      categoryId: "DIC_kwDOJ9fJas4CY7gW"
+      # mapping: "pathname"
+      # strict: 0
+      # reactionsEnabled: 1
+      # emitMetadata: 0
+      # inputPosition: "top"
+      # lang: "en"

layouts/partials/components/giscus.html

@@ -1,6 +1,6 @@
-{{- with site.Params.comment.giscus -}}
+{{- $lang := site.Language.LanguageCode | default `en` -}}
 
-{{- $lang = site.Language.Lang | default `en` -}}
+{{- with site.Params.comment.giscus -}}
 <script>
   /*
    * "preferred color scheme" theme in giscus works using "prefers-color-scheme" in media query.
@@ -40,9 +40,6 @@
       "data-theme": getGiscusTheme(),
       "data-lang": "{{ .lang | default $lang }}",
       "crossorigin": "anonymous",
-      {{ if .lazyLoading -}}
-      "data-loading": "lazy",
-      {{ end -}}
       "async": "",
     };
 
@@ -52,11 +49,12 @@
     document.getElementById('giscus').appendChild(giscusScript);
 
     // Update giscus theme when theme switcher is clicked
-    const toggle = document.querySelector('.theme-toggle');
+    const toggles = document.querySelectorAll(".theme-toggle");
-    if (toggle) {
+    if (toggles) {
-      toggle.addEventListener('click', setGiscusTheme);
+      toggles.forEach(toggle => toggle.addEventListener('click', setGiscusTheme));
     }
   });
 </script>
+
 <div id="giscus"></div>
 {{- end -}}