Merge pull request #664 from xwi88/support-giscus

feat(giscus): the most powerful comment plugin

README.md

@@ -92,7 +92,8 @@ I hope you will LoveIt ❤️!
 * **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 * **Telegram comments** system supported by [Telegram Comments](https://comments.app/)
 * **Commento** comment system supported by [Commento](https://commento.io/)
-* **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+* **utterances** comment system supported by [utterances](https://utteranc.es/)
+* **giscus** comment system supported by [giscus](https://giscus.app/)
 
 ### Extended Features
 

README.zh-cn.md

@@ -84,10 +84,11 @@
 * 支持 **[Disqus](https://disqus.com)** 评论系统
 * 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
 * 支持 **[Valine](https://valine.js.org/)** 评论系统
-* 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
+* 支持 **[Facebook comments](https://developers.facebook.com/docs/plugins/comments/)** 评论系统
-* 支持 **[Telegram comments](https://comments.app/) 评论**系统
+* 支持 **[Telegram comments](https://comments.app/)** 评论系统
 * 支持 **[Commento](https://commento.io/)** 评论系统
-* 支持 **[Utterances](https://utteranc.es/)** 评论系统
+* 支持 **[utterances](https://utteranc.es/)** 评论系统
+* 支持 **[giscus](https://giscus.app/)** 评论系统
 
 ### 扩展功能
 

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);
+        }
       }
     }
   }, {

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/)
@@ -458,8 +462,8 @@
       # Commento comment 评论系统设置 (https://commento.io/)
       [params.page.comment.commento]
         enable = false
-      # Utterances comment config (https://utteranc.es/)
+      # utterances comment config (https://utteranc.es/)
-      # Utterances comment 评论系统设置 (https://utteranc.es/)
+      # utterances comment 评论系统设置 (https://utteranc.es/)
       [params.page.comment.utterances]
         enable = false
         # owner/repo
@@ -468,6 +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]
+        # 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"
+        reactionsEnabled = "1"
+        emitMetadata = "0"
+        inputPosition = "bottom"
+        lazyLoading = false
+        lightTheme = "light"
+        darkTheme = "dark"
     # Third-party library config
     # 第三方库配置
     [params.page.library]

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/)
@@ -540,8 +544,8 @@ enableEmoji = true
       # Commento comment 评论系统设置 (https://commento.io/)
       [params.page.comment.commento]
         enable = false
-      # Utterances comment config (https://utteranc.es/)
+      # utterances comment config (https://utteranc.es/)
-      # Utterances comment 评论系统设置 (https://utteranc.es/)
+      # utterances comment 评论系统设置 (https://utteranc.es/)
       [params.page.comment.utterances]
         enable = false
         # owner/repo
@@ -550,6 +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]
+        # 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"
+        reactionsEnabled = "1"
+        emitMetadata = "0"
+        inputPosition = "bottom"
+        lazyLoading = false
+        lightTheme = "light"
+        darkTheme = "dark"
     # Third-party library config
     # 第三方库配置
     [params.page.library]

exampleSite/content/about/index.en.md

@@ -33,7 +33,7 @@ math:
 * :(fab fa-searchengin fa-fw): Optimized SEO performance with a correct **SEO SCHEMA** based on JSON-LD
 * :(fab fa-google fa-fw): **[Google Analytics](https://analytics.google.com/analytics)** supported
 * :(far fa-chart-bar fa-fw): **[Fathom Analytics](https://usefathom.com/)** supported
-* :(far fa-chart-column fa-fw): **[Plausible Analytics](https://plausible.io/)** supported
+* :(fas fa-chart-column fa-fw): **[Plausible Analytics](https://plausible.io/)** supported
 * :(fas fa-sitemap fa-fw): Search engine **verification** supported (Google, Bind, Yandex and Baidu)
 * :(fas fa-tachometer-alt fa-fw): **CDN** for third-party libraries supported
 * :(fas fa-cloud-download-alt fa-fw): Automatically converted images with **Lazy Load** by [lazysizes](https://github.com/aFarkas/lazysizes)
@@ -60,7 +60,8 @@ math:
 * :(far fa-comments fa-fw): **Facebook comments** system supported by [Facebook](https://developers.facebook.com/docs/plugins/comments/)
 * :(fas fa-comment fa-fw): **Telegram comments** system supported by [Comments](https://comments.app/)
 * :(fas fa-comment-dots fa-fw): **Commento** comment system supported by [Commento](https://commento.io/)
-* :(fas fa-comment-alt fa-fw): **Utterances** comment system supported by [Utterances](https://utteranc.es/)
+* :(fas fa-comment-alt fa-fw): **utterances** comment system supported by [utterances](https://utteranc.es/)
+* :(fas fa-comments fa-fw): **giscus** comment system supported by [giscus](https://giscus.app/)
 
 #### Extended Features
 

exampleSite/content/about/index.zh-cn.md

@@ -33,7 +33,7 @@ math:
 * :(fab fa-searchengin fa-fw): 使用基于 JSON-LD 格式 的 **SEO SCHEMA** 文件进行 SEO 优化
 * :(fab fa-google fa-fw): 支持 **[Google Analytics](https://analytics.google.com/analytics)**
 * :(far fa-chart-bar fa-fw): 支持 **[Fathom Analytics](https://usefathom.com/)**
-* :(far fa-chart-column fa-fw): 支持 **[Plausible Analytics](https://plausible.io/)**
+* :(fas fa-chart-column fa-fw): 支持 **[Plausible Analytics](https://plausible.io/)**
 * :(fas fa-sitemap fa-fw): 支持搜索引擎的**网站验证** (Google, Bind, Yandex and Baidu)
 * :(fas fa-tachometer-alt fa-fw): 支持所有第三方库的 **CDN**
 * :(fas fa-cloud-download-alt fa-fw): 基于 [lazysizes](https://github.com/aFarkas/lazysizes) 自动转换图片为**懒加载**
@@ -57,10 +57,11 @@ math:
 * :(far fa-comment fa-fw): 支持 **[Disqus](https://disqus.com)** 评论系统
 * :(far fa-comment-dots fa-fw): 支持 **[Gitalk](https://github.com/gitalk/gitalk)** 评论系统
 * :(far fa-comment-alt fa-fw): 支持 **[Valine](https://valine.js.org/)** 评论系统
-* :(far fa-comments fa-fw): 支持 **[Facebook](https://developers.facebook.com/docs/plugins/comments/) 评论**系统
+* :(far fa-comments fa-fw): 支持 **[Facebook comments](https://developers.facebook.com/docs/plugins/comments/)** 评论系统
-* :(fas fa-comment fa-fw): 支持 **[Telegram comments](https://comments.app/) 评论**系统
+* :(fas fa-comment fa-fw): 支持 **[Telegram comments](https://comments.app/)** 评论系统
 * :(fas fa-comment-dots fa-fw): 支持 **[Commento](https://commento.io/)** 评论系统
-* :(far fa-comment-alt fa-fw): 支持 **[Utterances](https://utteranc.es/)** 评论系统
+* :(far fa-comment-alt fa-fw): 支持 **[utterances](https://utteranc.es/)** 评论系统
+* :(fas fa-comments fa-fw): 支持 **[giscus](https://giscus.app/)** 评论系统
 
 #### 扩展功能
 

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -524,6 +524,7 @@ Please open the code block below to view the complete sample configuration :(far
         avatar = "mp"
         meta= ""
         pageSize = 10
+        # automatically adapt the current theme i18n configuration when empty
         lang = ""
         visitor = true
         recordIP = true
@@ -542,6 +543,7 @@ Please open the code block below to view the complete sample configuration :(far
         width = "100%"
         numPosts = 10
         appId = ""
+        # automatically adapt the current theme i18n configuration when empty
         languageCode = ""
       # {{< version 0.2.0 >}} {{< link "https://comments.app/" "Telegram comments" >}} config
       [params.page.comment.telegram]
@@ -556,7 +558,7 @@ Please open the code block below to view the complete sample configuration :(far
       # {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} comment config
       [params.page.comment.commento]
         enable = false
-      # {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} comment config
+      # {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "utterances" >}} comment config
       [params.page.comment.utterances]
         enable = false
         # owner/repo
@@ -565,6 +567,23 @@ Please open the code block below to view the complete sample configuration :(far
         label = ""
         lightTheme = "github-light"
         darkTheme = "github-dark"
+      # giscus comment config (https://giscus.app/)
+      [params.page.comment.giscus]
+        # 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
+        lang = ""
+        mapping = "pathname"
+        reactionsEnabled = "1"
+        emitMetadata = "0"
+        inputPosition = "bottom"
+        lazyLoading = false
+        lightTheme = "light"
+        darkTheme = "dark"
     # {{< version 0.2.7 >}} Third-party library config
     [params.page.library]
       [params.page.library.css]

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -526,6 +526,7 @@ hugo
         avatar = "mp"
         meta= ""
         pageSize = 10
+        # 为空时自动适配当前主题 i18n 配置
         lang = ""
         visitor = true
         recordIP = true
@@ -544,6 +545,7 @@ hugo
         width = "100%"
         numPosts = 10
         appId = ""
+        # 为空时自动适配当前主题 i18n 配置
         languageCode = "zh_CN"
       # {{< version 0.2.0 >}} {{< link "https://comments.app/" "Telegram Comments" >}} 评论系统设置
       [params.page.comment.telegram]
@@ -558,7 +560,7 @@ hugo
       # {{< version 0.2.0 >}} {{< link "https://commento.io/" "Commento" >}} 评论系统设置
       [params.page.comment.commento]
         enable = false
-      # {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "Utterances" >}} 评论系统设置
+      # {{< version 0.2.5 >}} {{< link "https://utteranc.es/" "utterances" >}} 评论系统设置
       [params.page.comment.utterances]
         enable = false
         # owner/repo
@@ -567,6 +569,23 @@ hugo
         label = ""
         lightTheme = "github-light"
         darkTheme = "github-dark"
+      # giscus comment 评论系统设置 (https://giscus.app/zh-CN)
+      [params.page.comment.giscus]
+        # 你可以参考官方文档来使用下列配置
+        enable = false
+        repo = ""
+        repoId = ""
+        category = "Announcements"
+        categoryId = ""
+        # 为空时自动适配当前主题 i18n 配置
+        lang = ""
+        mapping = "pathname"
+        reactionsEnabled = "1"
+        emitMetadata = "0"
+        inputPosition = "bottom"
+        lazyLoading = false
+        lightTheme = "light"
+        darkTheme = "dark"
     # {{< version 0.2.7 >}} 第三方库配置
     [params.page.library]
       [params.page.library.css]

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 ===

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 ===

i18n/de.toml

@@ -59,6 +59,9 @@ other = "Ihr Kommentar ..."
 
 [facebookLanguageCode]
 other = "de_DE"
+
+[giscusLang]
+other = "de"
 # === partials/comment.html ===
 
 # === partials/assets.html ===

i18n/en.toml

@@ -58,6 +58,9 @@ other = "Your comment ..."
 
 [facebookLanguageCode]
 other = "en_US"
+
+[giscusLang]
+other = "en"
 # === partials/comment.html ===
 
 # === partials/assets.html ===

i18n/es.toml

@@ -59,6 +59,9 @@ other = "Tu comentario ..."
 
 [facebookLanguageCode]
 other = "es_MX"
+
+[giscusLang]
+other = "es"
 # === partials/comment.html ===
 
 # === partials/assets.html ===

i18n/fr.toml

@@ -59,6 +59,9 @@ other = "Votre commentaire ..."
 
 [facebookLanguageCode]
 other = "fr"
+
+[giscusLang]
+other = "fr"
 # === partials/comment.html ===
 
 # === partials/assets.html ===

i18n/id.toml

@@ -59,6 +59,9 @@ other = "Komentar Anda ..."
 
 [facebookLanguageCode]
 other = "id_ID"
+
+[giscusLang]
+other = "id"
 # === partials/comment.html ===
 
 # === partials/assets.html ===

i18n/it.toml

@@ -59,6 +59,9 @@ other = "Il tuo commento ..."
 
 [facebookLanguageCode]
 other = "it"
+
+[giscusLang]
+other = "it"
 # === partials/comment.html ===
 
 # === partials/assets.html ===

i18n/pl.toml

@@ -59,6 +59,9 @@ other = "Twój komentarz ..."
 
 [facebookLanguageCode]
 other = "pl"
+
+[giscusLang]
+other = "pl"
 # === partials/comment.html ===
 
 # === partials/assets.html ===

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 ===

i18n/ro.toml

@@ -59,6 +59,9 @@ other = "Comentariul dvs ..."
 
 [facebookLanguageCode]
 other = "ro_RO"
+
+[giscusLang]
+other = "ro"
 # === partials/comment.html ===
 
 # === partials/assets.html ===

i18n/ru.toml

@@ -59,6 +59,9 @@ other = "Ваш комментарий ..."
 
 [facebookLanguageCode]
 other = "ru_RU"
+
+[giscusLang]
+other = "ru"
 # === partials/comment.html ===
 
 # === partials/assets.html ===

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 ===

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 ===

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 ===

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 ===

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 ===

i18n/zh-TW.toml

@@ -52,7 +52,7 @@ other = "由 {{ .Hugo }} 強力驅動 | 主題 - {{ .Theme }}"
 
 # === partials/comment.html ===
 [valineLang]
-other = "zh-tw"
+other = "zh-TW"
 
 [valinePlaceholder]
 other = "你的評論 ..."

layouts/partials/comment.html

@@ -112,7 +112,7 @@
             </noscript>
         {{- end -}}
 
-        {{- /* Utterances Comment System */ -}}
+        {{- /* utterances Comment System */ -}}
         {{- $utterances := $comment.utterances | default dict -}}
         {{- if $utterances.enable -}}
             <div id="utterances" class="comment"></div>
@@ -122,7 +122,28 @@
             {{- $commentConfig = $utterances.lightTheme | default "github-light" | dict "lightTheme" | dict "utterances" | merge $commentConfig -}}
             {{- $commentConfig = $utterances.darkTheme | default "github-dark" | dict "darkTheme" | dict "utterances" | merge $commentConfig -}}
             <noscript>
-                Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/">Utterances</a>.
+                Please enable JavaScript to view the comments powered by <a href="https://utteranc.es/">utterances</a>.
+            </noscript>
+        {{- end -}}
+
+        {{- /* giscus Comment System */ -}}
+        {{- $giscus := $comment.giscus | default dict -}}
+        {{- if $giscus.enable -}}
+            <div id="giscus" class="comment"></div>
+            {{- $commentConfig = dict "repo" $giscus.repo | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "repoId" $giscus.repoId | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "category" $giscus.category | 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.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>
         {{- end -}}
     </div>

src/js/theme.js

@@ -645,6 +645,39 @@ class Theme {
                 });
                 this.switchThemeEventSet.add(this._utterancesOnSwitchTheme);
             }
+
+            if (this.config.comment.giscus) {
+                const giscusConfig = this.config.comment.giscus;
+                const 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 || (() => {
+                    const message = {
+                        setConfig: {
+                            theme: this.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme,
+                            reactionsEnabled: false,
+                        }
+                    };
+                    const iframe = document.querySelector('iframe.giscus-frame');
+                    if (!iframe) return;
+                    iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
+                });
+                this.switchThemeEventSet.add(this._giscusOnSwitchTheme);
+            }
         }
     }