From 487a77244226bf301d29a004c3f5601b7e6fafc6 Mon Sep 17 00:00:00 2001 From: xwi88 <278810732@qq.com> Date: Wed, 18 May 2022 19:52:30 +0800 Subject: [PATCH] support comment plugin giscus --- config.toml | 19 ++++++++++++++++++ exampleSite/config.toml | 19 ++++++++++++++++++ layouts/partials/comment.html | 21 ++++++++++++++++++++ src/js/theme.js | 36 +++++++++++++++++++++++++++++++++++ 4 files changed, 95 insertions(+) diff --git a/config.toml b/config.toml index d1827b9d..21fa1394 100644 --- a/config.toml +++ b/config.toml @@ -468,6 +468,25 @@ label = "" lightTheme = "github-light" darkTheme = "github-dark" + [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 = 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 + 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 # Third-party library config # 第三方库配置 [params.page.library] diff --git a/exampleSite/config.toml b/exampleSite/config.toml index ad10a353..efbd9223 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -550,6 +550,25 @@ enableEmoji = true label = "" lightTheme = "github-light" darkTheme = "github-dark" + [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 + 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 # Third-party library config # 第三方库配置 [params.page.library] diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html index f849740d..526ab9b4 100644 --- a/layouts/partials/comment.html +++ b/layouts/partials/comment.html @@ -125,6 +125,27 @@ Please enable JavaScript to view the comments powered by Utterances. {{- end -}} + + {{- /* Giscus Comment System */ -}} + {{- $giscus := $comment.giscus | default dict -}} + {{- if $giscus.enable -}} +
+ {{- $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 "category" $giscus.category | dict "giscus" | merge $commentConfig -}} + {{- $commentConfig = dict "category_id" $giscus.category_id | 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.lightTheme | default "github-light" | dict "lightTheme" | dict "giscus" | merge $commentConfig -}} + {{- $commentConfig = $giscus.darkTheme | default "github-dark" | dict "darkTheme" | dict "giscus" | merge $commentConfig -}} + + {{- end -}} {{- end -}} diff --git a/src/js/theme.js b/src/js/theme.js index a00bd28e..98dc54e5 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -645,6 +645,42 @@ class Theme { }); this.switchThemeEventSet.add(this._utterancesOnSwitchTheme); } + + 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-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-lang', giscusConfig.lang); + if (giscusConfig.label) giscusScript.setAttribute('label', giscusConfig.label); + giscusScript.setAttribute('data-theme', dataTheme); + 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, + 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); + } } }