Add suport giscus comment system (#277)

* add giscus support * fix message * fix typos * add theme.min.js and theme.min.js.map * docs: update docs for giscus comment system Co-authored-by: HEIGE-PCloud <[email protected]>
HEIGE-PCloud · Oct 15, 2021 · 5713dad · 5713dad · vercel · Oct 15, 2021
1 parent 52bf730
commit 5713dad
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -119,6 +119,7 @@ the DoIt theme may be more suitable for you.
 * **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)
 * **Vssue** comment system supported by [Vssue](https://vssue.js.org/)
 * **Remark42** comment system supported by[Remark42](https://remark42.com/)
+* **giscus** comment system supported by [giscus](https://giscus.app/)
 
 ### Extended Features
 

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -115,7 +115,8 @@ DoIt 主题增加了许多新的功能与配置项，查看[变更日志](https:
 * 支持 **[Utterances](https://utteranc.es/)** 评论系统
 * 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统
 * 支持 **[Vssue](https://vssue.js.org/)** 评论系统
-* 支持 **[Remark42](https://remark42.com/) 评论系统
+* 支持 **[Remark42](https://remark42.com/)** 评论系统
+* 支持 **[giscus](https://giscus.app/)** 评论系统
 
 ### 扩展功能
 

diff --git a/assets/js/theme.min.js b/assets/js/theme.min.js
diff --git a/assets/js/theme.min.js.map b/assets/js/theme.min.js.map
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -877,6 +877,20 @@ enableEmoji = true
         max_shown_comments = 15
         show_email_subscription = true
         simple_view = false
+      # giscus comment config (https://giscus.app/)
+      # giscus comment 评论系统设置 (https://giscus.app/)
+      [params.page.comment.giscus]
+        enable = false
+        # owner/repo
+        dataRepo = ""
+        dataRepoId = ""
+        dataCategory = ""
+        dataCategoryId = ""
+        dataMapping = "pathname"
+        dataReactionsEnabled = "1"
+        dataEmitMetadata = "0"
+        lightTheme = "light"
+        darkTheme = "dark"
     # Third-party library config
     # 第三方库配置
     [params.page.library]

diff --git a/exampleSite/content/about/index.en.md b/exampleSite/content/about/index.en.md
@@ -56,6 +56,7 @@ math:
 * :(fas fa-comment-alt fa-fw): **Twikoo** comment system supported by [Twikoo](https://twikoo.js.org/)
 * :(fas fa-comment-alt fa-fw): **Vssue** comment system supported by [Vssue](https://vssue.js.org/)
 * :(fas fa-comment-alt fa-fw): **Remark42** comment system supported by [Remark42](https://remark42.com/)
+* :(fas fa-gem fa-fw): **giscus** comment system supported by [giscus](https://giscus.app/)
 
 #### Extended Features
 

diff --git a/exampleSite/content/about/index.zh-cn.md b/exampleSite/content/about/index.zh-cn.md
@@ -56,6 +56,7 @@ math:
 * :(far fa-comment-alt fa-fw): 支持 **[Twikoo](https://twikoo.js.org/)** 评论系统
 * :(far fa-comment-alt fa-fw): 支持 **[Vssue](https://vssue.js.org/)** 评论系统
 * :(far fa-comment-alt fa-fw): 支持 **[Remark42](https://remark42.com/)** 评论系统
+* :(far fa-comment-alt fa-fw): 支持 **[giscus](https://giscus.app/)** 评论系统
 
 #### 扩展功能
 

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md
@@ -638,6 +638,19 @@ Please open the code block below to view the complete sample configuration :(far
         max_shown_comments = 15
         show_email_subscription = true
         simple_view = false
+      # {{< version 0.2.13 >}} {{< link "https://giscus.app/" "giscus" >}} comment config
+      [params.page.comment.giscus]
+        enable = false
+        # owner/repo
+        dataRepo = ""
+        dataRepoId = ""
+        dataCategory = ""
+        dataCategoryId = ""
+        dataMapping = "pathname"
+        dataReactionsEnabled = "1"
+        dataEmitMetadata = "0"
+        lightTheme = "light"
+        darkTheme = "dark"
     # {{< version 0.2.7 >}} Third-party library config
     [params.page.library]
       [params.page.library.css]

diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md
@@ -642,6 +642,19 @@ hugo
         max_shown_comments = 15
         show_email_subscription = true
         simple_view = false
+      # {{< version 0.2.13 >}} {{< link "https://giscus.app/" "giscus" >}} 评论系统设置
+      [params.page.comment.giscus]
+        enable = false
+        # owner/repo
+        dataRepo = ""
+        dataRepoId = ""
+        dataCategory = ""
+        dataCategoryId = ""
+        dataMapping = "pathname"
+        dataReactionsEnabled = "1"
+        dataEmitMetadata = "0"
+        lightTheme = "light"
+        darkTheme = "dark"
     # {{< version 0.2.7 >}} 第三方库配置
     [params.page.library]
       [params.page.library.css]

diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
@@ -255,6 +255,24 @@
                 Please enable JavaScript to view the comments powered by <a href="https://remark42.com/">Remark42</a>.
             </noscript>
         {{- end -}}
+
+        {{- /* giscus Comment System */ -}}
+        {{- $giscus := $comment.giscus | default dict -}}
+        {{- if $giscus.enable -}}
+            <div id="giscus"></div>
+            {{- $commentConfig = dict "dataRepo" $giscus.dataRepo | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "dataRepoId" $giscus.dataRepoId | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "dataCategory" $giscus.dataCategory | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = dict "dataCategoryId" $giscus.dataCategoryId | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataMapping | default "pathname" | dict "dataMapping" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataReactionsEnabled | default "1" | dict "dataReactionsEnabled" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.dataEmitMetadata | default "0" | dict "dataEmitMetadata" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.lightTheme | default "light" | dict "lightTheme" | dict "giscus" | merge $commentConfig -}}
+            {{- $commentConfig = $giscus.darkTheme | default "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>
 {{- end -}}
 

diff --git a/src/js/theme.js b/src/js/theme.js
@@ -807,6 +807,35 @@ function initComment() {
             });
             window.switchThemeEventSet.add(window._remark42OnSwitchTheme);
         }
+        if (window.config.comment.giscus) {
+            const giscusConfig = window.config.comment.giscus;
+            const script = document.createElement('script');
+            script.src = 'https://giscus.app/client.js';
+            script.type = 'text/javascript';
+            script.setAttribute('data-repo', giscusConfig.dataRepo);
+            script.setAttribute('data-repo-id', giscusConfig.dataRepoId);
+            if (giscusConfig.dataCategory) script.setAttribute('data-category', giscusConfig.dataCategory);
+            script.setAttribute('data-category-id', giscusConfig.dataCategoryId);
+            script.setAttribute('data-mapping', giscusConfig.dataMapping);
+            script.setAttribute('data-reactions-enabled', giscusConfig.dataReactionsEnabled);
+            script.setAttribute('data-emit-metadata', giscusConfig.dataEmitMetadata);
+            script.setAttribute('theme', window.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme);
+            script.crossOrigin = 'anonymous';
+            script.async = true;
+            document.getElementById('giscus').appendChild(script);
+            window._giscusOnSwitchTheme = (() => {
+                const message = {
+                    giscus: {
+                        setConfig: {
+                            theme: window.isDark ? giscusConfig.darkTheme : giscusConfig.lightTheme,
+                        }
+                    }
+                };
+                const iframe = document.querySelector('.giscus-frame');
+                iframe.contentWindow.postMessage(message, 'https://giscus.app');
+            });
+            window.switchThemeEventSet.add(window._giscusOnSwitchTheme);
+        }
     }
 }