feat(giscus): standardize configuration, support i18n and add lazyLoading config

23 files changed, 156 insertions, 61 deletions

diff --git a/assets/js/theme.js b/assets/js/theme.js
index d5175f8b..6f2f730d 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -865,6 +865,43 @@ var Theme = /*#__PURE__*/function () {
 
           this.switchThemeEventSet.add(this._utterancesOnSwitchTheme);
         }
+
+        if (this.config.comment.giscus) {
+          var giscusConfig = this.config.comment.giscus;
+          var giscusScript = document.createElement('script');
+          giscusScript.src = 'https://giscus.app/client.js';
+          giscusScript.type = 'text/javascript';
+          giscusScript.setAttribute('data-repo', giscusConfig.repo);
+          giscusScript.setAttribute('data-repo-id', giscusConfig.repoId);
+          giscusScript.setAttribute('data-category', giscusConfig.category);
+          giscusScript.setAttribute('data-category-id', giscusConfig.categoryId);
+          giscusScript.setAttribute('data-lang', giscusConfig.lang);
+          giscusScript.setAttribute('data-mapping', giscusConfig.mapping);
+          giscusScript.setAttribute('data-reactions-enabled', giscusConfig.reactionsEnabled);
+          giscusScript.setAttribute('data-emit-metadata', giscusConfig.emitMetadata);
+          giscusScript.setAttribute('data-input-position', giscusConfig.inputPosition);
+          if (giscusConfig.lazyLoading) giscusScript.setAttribute('data-loading', 'lazy');
+          giscusScript.setAttribute('data-theme', this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme);
+          giscusScript.crossOrigin = 'anonymous';
+          giscusScript.async = true;
+          document.getElementById('giscus').appendChild(giscusScript);
+
+          this._giscusOnSwitchTheme = this._giscusOnSwitchTheme || function () {
+            var message = {
+              setConfig: {
+                theme: _this11.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme,
+                reactionsEnabled: false
+              }
+            };
+            var iframe = document.querySelector('iframe.giscus-frame');
+            if (!iframe) return;
+            iframe.contentWindow.postMessage({
+              giscus: message
+            }, 'https://giscus.app');
+          };
+
+          this.switchThemeEventSet.add(this._giscusOnSwitchTheme);
+        }
       }
     }
   }, {
diff --git a/config.toml b/config.toml
index 21fa1394..e7b2d0c7 100644
--- a/config.toml
+++ b/config.toml
@@ -418,6 +418,8 @@
         avatar = "mp"
         meta= ""
         pageSize = 10
+        # automatically adapt the current theme i18n configuration when empty
+        # 为空时自动适配当前主题 i18n 配置
         lang = ""
         visitor = true
         recordIP = true
@@ -442,6 +444,8 @@
         width = "100%"
         numPosts = 10
         appId = ""
+        # automatically adapt the current theme i18n configuration when empty
+        # 为空时自动适配当前主题 i18n 配置
         languageCode = ""
       # Telegram comments config (https://comments.app/)
       # Telegram comments 评论系统设置 (https://comments.app/)
@@ -468,25 +472,26 @@
         label = ""
         lightTheme = "github-light"
         darkTheme = "github-dark"
+      # giscus comment config (https://giscus.app/)
+      # giscus comment 评论系统设置 (https://giscus.app/zh-CN)
       [params.page.comment.giscus]
-        # To enable giscus, the github discussions based comment section,
-        # Follow the steps described to enable giscus and get the values
-        # needed to populate the below information.
-        # https://www.joelnitta.com/posts/2021-11-24_using-giscus/
+        # You can refer to the official documentation of giscus to use the following configuration.
+        # 你可以参考官方文档来使用下列配置
         enable = false
-        category = "Announcements" # Announcements, Comments
-        lang = "en" # 保持 en, 只需要控制每篇文章的 url 不一样即可
-        repo = "" # Entering repo will enable giscus
-        repo_id = "" # query by GraphQL API, https://docs.github.com/en/graphql/overview/explorer
-        category_id = "" # query by GraphQL API, https://docs.github.com/en/graphql/overview/explorer
+        repo = ""
+        repoId = ""
+        category = "Announcements"
+        categoryId = ""
+        # automatically adapt the current theme i18n configuration when empty
+        # 为空时自动适配当前主题 i18n 配置
+        lang = ""
         mapping = "pathname"
-        reactions_enabled = "0"
-        emit_metadata = "0"
-        input_position = "top"
-        lightTheme = "light" # github theme
-        darkTheme = "dark" # github theme
-        crossorigin = "anonymous"
-        label = "Comment" # Label applied to issue by utteranc.es bot
+        reactionsEnabled = "1"
+        emitMetadata = "0"
+        inputPosition = "bottom"
+        lazyLoading = false
+        lightTheme = "light"
+        darkTheme = "dark"
     # Third-party library config
     # 第三方库配置
     [params.page.library]
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index efbd9223..83d7c147 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -500,6 +500,8 @@ enableEmoji = true
         avatar = "mp"
         meta= ""
         pageSize = 10
+        # automatically adapt the current theme i18n configuration when empty
+        # 为空时自动适配当前主题 i18n 配置
         lang = ""
         visitor = true
         recordIP = true
@@ -524,6 +526,8 @@ enableEmoji = true
         width = "100%"
         numPosts = 10
         appId = ""
+        # automatically adapt the current theme i18n configuration when empty
+        # 为空时自动适配当前主题 i18n 配置
         languageCode = ""
       # Telegram comments config (https://comments.app/)
       # Telegram comments 评论系统设置 (https://comments.app/)
@@ -550,25 +554,26 @@ enableEmoji = true
         label = ""
         lightTheme = "github-light"
         darkTheme = "github-dark"
+      # giscus comment config (https://giscus.app/)
+      # giscus comment 评论系统设置 (https://giscus.app/zh-CN)
       [params.page.comment.giscus]
-        # To enable giscus, the github discussions based comment section,
-        # Follow the steps described to enable giscus and get the values
-        # needed to populate the below information.
-        # https://www.joelnitta.com/posts/2021-11-24_using-giscus/
-        # enable = true
-        category = "Announcements" # Announcements, Comments
-        lang = "en" # 保持 en, 只需要控制每篇文章的 url 不一样即可
-        repo = "" # Entering repo will enable giscus
-        repo_id = "" # query by GraphQL API, https://docs.github.com/en/graphql/overview/explorer
-        category_id = "" # query by GraphQL API, https://docs.github.com/en/graphql/overview/explorer
+        # You can refer to the official documentation of giscus to use the following configuration.
+        # 你可以参考官方文档来使用下列配置
+        enable = false
+        repo = ""
+        repoId = ""
+        category = "Announcements"
+        categoryId = ""
+        # automatically adapt the current theme i18n configuration when empty
+        # 为空时自动适配当前主题 i18n 配置
+        lang = ""
         mapping = "pathname"
-        reactions_enabled = "0"
-        emit_metadata = "0"
-        input_position = "top"
-        lightTheme = "light" # github theme
-        darkTheme = "dark" # github theme
-        crossorigin = "anonymous"
-        label = "Comment" # Label applied to issue by utteranc.es bot
+        reactionsEnabled = "1"
+        emitMetadata = "0"
+        inputPosition = "bottom"
+        lazyLoading = false
+        lightTheme = "light"
+        darkTheme = "dark"
     # Third-party library config
     # 第三方库配置
     [params.page.library]
diff --git a/i18n/ar.toml b/i18n/ar.toml
index ca9d22f6..043a4c4b 100644
--- a/i18n/ar.toml
+++ b/i18n/ar.toml
@@ -51,13 +51,16 @@ other = "يعمل الموقع بنظام {{ .Hugo }} | التصميم مقدم
 
 # === partials/comment.html ===
 [valineLang]
-other = "ar"
+other = "en"
 
 [valinePlaceholder]
 other = "تعليقك..."
 
 [facebookLanguageCode]
 other = "ar_AR"
+
+[giscusLang]
+other = "en"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/ca.toml b/i18n/ca.toml
index 097b05cd..3a695cca 100644
--- a/i18n/ca.toml
+++ b/i18n/ca.toml
@@ -52,13 +52,16 @@ other = "Impulsat per {{ .Hugo }} | Tema - {{ .Theme }}"
 
 # === partials/comment.html ===
 [valineLang]
-other = "ca"
+other = "en"
 
 [valinePlaceholder]
 other = "El teu comentari ..."
 
 [facebookLanguageCode]
 other = "ca_ES"
+
+[giscusLang]
+other = "en"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/de.toml b/i18n/de.toml
index 4781eb43..6bfaa504 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -59,6 +59,9 @@ other = "Ihr Kommentar ..."
 
 [facebookLanguageCode]
 other = "de_DE"
+
+[giscusLang]
+other = "de"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/en.toml b/i18n/en.toml
index 6f5a428a..47d8e73d 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -58,6 +58,9 @@ other = "Your comment ..."
 
 [facebookLanguageCode]
 other = "en_US"
+
+[giscusLang]
+other = "en"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/es.toml b/i18n/es.toml
index 0c93dd50..7c6d0186 100644
--- a/i18n/es.toml
+++ b/i18n/es.toml
@@ -59,6 +59,9 @@ other = "Tu comentario ..."
 
 [facebookLanguageCode]
 other = "es_MX"
+
+[giscusLang]
+other = "es"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/fr.toml b/i18n/fr.toml
index 541f68c5..fd9d2823 100644
--- a/i18n/fr.toml
+++ b/i18n/fr.toml
@@ -59,6 +59,9 @@ other = "Votre commentaire ..."
 
 [facebookLanguageCode]
 other = "fr"
+
+[giscusLang]
+other = "fr"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/id.toml b/i18n/id.toml
index 537ab56f..2bebaac8 100644
--- a/i18n/id.toml
+++ b/i18n/id.toml
@@ -59,6 +59,9 @@ other = "Komentar Anda ..."
 
 [facebookLanguageCode]
 other = "id_ID"
+
+[giscusLang]
+other = "id"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/it.toml b/i18n/it.toml
index 2a8ea99f..b3381d00 100644
--- a/i18n/it.toml
+++ b/i18n/it.toml
@@ -59,6 +59,9 @@ other = "Il tuo commento ..."
 
 [facebookLanguageCode]
 other = "it"
+
+[giscusLang]
+other = "it"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/pl.toml b/i18n/pl.toml
index b9aa2f72..fd200763 100644
--- a/i18n/pl.toml
+++ b/i18n/pl.toml
@@ -59,6 +59,9 @@ other = "Twój komentarz ..."
 
 [facebookLanguageCode]
 other = "pl"
+
+[giscusLang]
+other = "pl"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/pt-BR.toml b/i18n/pt-BR.toml
index 6af59258..9267dc51 100644
--- a/i18n/pt-BR.toml
+++ b/i18n/pt-BR.toml
@@ -59,6 +59,9 @@ other = "O seu comentário ..."
 
 [facebookLanguageCode]
 other = "pt_BR"
+
+[giscusLang]
+other = "en"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/ro.toml b/i18n/ro.toml
index 7584dc6f..5ec072b2 100644
--- a/i18n/ro.toml
+++ b/i18n/ro.toml
@@ -59,6 +59,9 @@ other = "Comentariul dvs ..."
 
 [facebookLanguageCode]
 other = "ro_RO"
+
+[giscusLang]
+other = "ro"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/ru.toml b/i18n/ru.toml
index 82a01851..d97029d4 100644
--- a/i18n/ru.toml
+++ b/i18n/ru.toml
@@ -59,6 +59,9 @@ other = "Ваш комментарий ..."
 
 [facebookLanguageCode]
 other = "ru_RU"
+
+[giscusLang]
+other = "ru"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/sr.toml b/i18n/sr.toml
index 09b7d049..5810f9d6 100644
--- a/i18n/sr.toml
+++ b/i18n/sr.toml
@@ -52,13 +52,16 @@ other = "Покреће {{ .Hugo }} | Тема - {{ .Theme }}"
 
 # === partials/comment.html ===
 [valineLang]
-other = "sr"
+other = "en"
 
 [valinePlaceholder]
 other = "Ваш коментар ..."
 
 [facebookLanguageCode]
 other = "sr_RS"
+
+[giscusLang]
+other = "en"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/te.toml b/i18n/te.toml
index 0005ca11..f61e7dc8 100644
--- a/i18n/te.toml
+++ b/i18n/te.toml
@@ -52,13 +52,16 @@ other = "{{ .Hugo }} ద్వారా ఆధారితం | నేపథ్�
 # === partials/comment.html ===
 [valineLang]
 # not supported
-other = "te"
+other = "en"
 
 [valinePlaceholder]
 other = "మీ వాఖ్యనం ..."
 
 [facebookLanguageCode]
 other = "te_IN"
+
+[giscusLang]
+other = "en"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/th.toml b/i18n/th.toml
index d79ecf26..58fab433 100644
--- a/i18n/th.toml
+++ b/i18n/th.toml
@@ -52,13 +52,16 @@ other = "เว็บนี้สร้างโดย {{ .Hugo }} | ธีม -
 
 # === partials/comment.html ===
 [valineLang]
-other = "th"
+other = "en"
 
 [valinePlaceholder]
 other = "ความคิดเห็นของคุณ ..."
 
 [facebookLanguageCode]
 other = "th_TH"
+
+[giscusLang]
+other = "en"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/vi.toml b/i18n/vi.toml
index 04ac1ca6..aa7ade0c 100644
--- a/i18n/vi.toml
+++ b/i18n/vi.toml
@@ -58,6 +58,9 @@ other = "Bình luận của bạn ..."
 
 [facebookLanguageCode]
 other = "vi"
+
+[giscusLang]
+other = "vi"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml
index a96a0b24..d45c89ea 100644
--- a/i18n/zh-CN.toml
+++ b/i18n/zh-CN.toml
@@ -52,13 +52,16 @@ other = "由 {{ .Hugo }} 强力驱动 | 主题 - {{ .Theme }}"
 
 # === partials/comment.html ===
 [valineLang]
-other = "zh-cn"
+other = "zh-CN"
 
 [valinePlaceholder]
 other = "你的评论 ..."
 
 [facebookLanguageCode]
 other = "zh_CN"
+
+[giscusLang]
+other = "zh-CN"
 # === partials/comment.html ===
 
 # === partials/assets.html ===
diff --git a/i18n/zh-TW.toml b/i18n/zh-TW.toml
index ced75dd7..126cfeee 100644
--- a/i18n/zh-TW.toml
+++ b/i18n/zh-TW.toml
@@ -52,7 +52,7 @@ other = "由 {{ .Hugo }} 強力驅動 | 主題 - {{ .Theme }}"
 
 # === partials/comment.html ===
 [valineLang]
-other = "zh-tw"
+other = "zh-TW"
 
 [valinePlaceholder]
 other = "你的評論 ..."
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
index 526ab9b4..0518c89d 100644
--- a/layouts/partials/comment.html
+++ b/layouts/partials/comment.html
@@ -126,25 +126,25 @@
             </noscript>
         {{- end -}}
 
-        {{- /* Giscus Comment System */ -}}
+        {{- /* giscus Comment System */ -}}
         {{- $giscus := $comment.giscus | default dict -}}
         {{- if $giscus.enable -}}
             <div id="giscus" class="comment"></div>
-            {{- $commentConfig = $giscus.lang | default "en" | dict "lang" | dict "giscus" | merge $commentConfig -}}
             {{- $commentConfig = dict "repo" $giscus.repo | dict "giscus" | merge $commentConfig -}}
-            {{- $commentConfig = dict "repo_id" $giscus.repo_id | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "repoId" $giscus.repoId | dict "giscus" | merge $commentConfig -}}
             {{- $commentConfig = dict "category" $giscus.category | dict "giscus" | merge $commentConfig -}}
-            {{- $commentConfig = dict "category_id" $giscus.category_id | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "categoryId" $giscus.categoryId | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.lang | default (T "valineLang") | dict "lang" | dict "giscus" | merge $commentConfig -}}
             {{- $commentConfig = $giscus.mapping | default "pathname" | dict "mapping" | dict "giscus" | merge $commentConfig -}}
-            {{- $commentConfig = $giscus.reactions_enabled | default "1" | dict "reactions_enabled" | dict "giscus" | merge $commentConfig -}}
-            {{- $commentConfig = $giscus.emit_metadata | default "0" | dict "emit_metadata" | dict "giscus" | merge $commentConfig -}}
-            {{- $commentConfig = $giscus.input_position | default "bottom" | dict "input_position" | dict "giscus" | merge $commentConfig -}}
-            {{- $commentConfig = $giscus.crossorigin | default "anonymous" | dict "crossorigin" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.reactionsEnabled | default "1" | dict "reactionsEnabled" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.emitMetadata | default "0" | dict "emitMetadata" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.inputPosition | default "bottom" | dict "inputPosition" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.lazyLoading | default false | dict "lazyLoading" | dict "giscus" | merge $commentConfig -}}
             {{- $commentConfig = $giscus.lightTheme | default "github-light" | dict "lightTheme" | dict "giscus" | merge $commentConfig -}}
             {{- $commentConfig = $giscus.darkTheme | default "github-dark" | dict "darkTheme" | dict "giscus" | merge $commentConfig -}}
             <noscript>
                 Please enable JavaScript to view the comments powered by <a href="https://giscus.app">Giscus</a>.
-            </noscript> 
+            </noscript>
         {{- end -}}
     </div>
 {{- end -}}
diff --git a/src/js/theme.js b/src/js/theme.js
index 98dc54e5..3598f9a2 100644
--- a/src/js/theme.js
+++ b/src/js/theme.js
@@ -649,29 +649,26 @@ class Theme {
             if (this.config.comment.giscus) {
                 const giscusConfig = this.config.comment.giscus;
                 const giscusScript = document.createElement('script');
-                let dataTheme = this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme
                 giscusScript.src = 'https://giscus.app/client.js';
                 giscusScript.type = 'text/javascript';
                 giscusScript.setAttribute('data-repo', giscusConfig.repo);
-                giscusScript.setAttribute('data-repo-id', giscusConfig.repo_id);
+                giscusScript.setAttribute('data-repo-id', giscusConfig.repoId);
                 giscusScript.setAttribute('data-category', giscusConfig.category);
-                giscusScript.setAttribute('data-category-id', giscusConfig.category_id);
-                giscusScript.setAttribute('data-mapping', giscusConfig.mapping);
-                giscusScript.setAttribute('data-reactions-enabled', giscusConfig.reactions_enabled);
-                giscusScript.setAttribute('data-emit-metadata', giscusConfig.emit_metadata);
-                giscusScript.setAttribute('data-input-position', giscusConfig.input_position);
+                giscusScript.setAttribute('data-category-id', giscusConfig.categoryId);
                 giscusScript.setAttribute('data-lang', giscusConfig.lang);
-                if (giscusConfig.label) giscusScript.setAttribute('label', giscusConfig.label);
-                giscusScript.setAttribute('data-theme', dataTheme);
+                giscusScript.setAttribute('data-mapping', giscusConfig.mapping);
+                giscusScript.setAttribute('data-reactions-enabled', giscusConfig.reactionsEnabled);
+                giscusScript.setAttribute('data-emit-metadata', giscusConfig.emitMetadata);
+                giscusScript.setAttribute('data-input-position', giscusConfig.inputPosition);
+                if (giscusConfig.lazyLoading) giscusScript.setAttribute('data-loading', 'lazy');
+                giscusScript.setAttribute('data-theme', this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme);
                 giscusScript.crossOrigin = 'anonymous';
                 giscusScript.async = true;
                 document.getElementById('giscus').appendChild(giscusScript);
                 this._giscusOnSwitchTheme = this._giscusOnSwitchTheme || (() => {
-                    dataTheme = this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme
                     const message = {
                         setConfig: {
-                            // theme: 'https://giscus.app/themes/custom_example.css',
-                            theme: dataTheme,
+                            theme: this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme,
                             reactionsEnabled: false,
                         }
                     };