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 1/3] 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 d1827b9..21fa139 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 ad10a35..efbd922 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 f849740..526ab9b 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 a00bd28..98dc54e 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); + } } } From 61eccb2502064ee628d6e1983af9020ed6d1de57 Mon Sep 17 00:00:00 2001 From: Dillon Date: Thu, 26 May 2022 01:51:17 +0800 Subject: [PATCH 2/3] feat(giscus): standardize configuration, support i18n and add lazyLoading config --- assets/js/theme.js | 37 +++++++++++++++++++++++++++++++++ config.toml | 37 +++++++++++++++++++-------------- exampleSite/config.toml | 39 ++++++++++++++++++++--------------- i18n/ar.toml | 5 ++++- i18n/ca.toml | 5 ++++- i18n/de.toml | 3 +++ i18n/en.toml | 3 +++ i18n/es.toml | 3 +++ i18n/fr.toml | 3 +++ i18n/id.toml | 3 +++ i18n/it.toml | 3 +++ i18n/pl.toml | 3 +++ i18n/pt-BR.toml | 3 +++ i18n/ro.toml | 3 +++ i18n/ru.toml | 3 +++ i18n/sr.toml | 5 ++++- i18n/te.toml | 5 ++++- i18n/th.toml | 5 ++++- i18n/vi.toml | 3 +++ i18n/zh-CN.toml | 5 ++++- i18n/zh-TW.toml | 2 +- layouts/partials/comment.html | 18 ++++++++-------- src/js/theme.js | 21 ++++++++----------- 23 files changed, 156 insertions(+), 61 deletions(-) diff --git a/assets/js/theme.js b/assets/js/theme.js index d5175f8..6f2f730 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 21fa139..e7b2d0c 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 efbd922..83d7c14 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 ca9d22f..043a4c4 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 097b05c..3a695cc 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 4781eb4..6bfaa50 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 6f5a428..47d8e73 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 0c93dd5..7c6d018 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 541f68c..fd9d282 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 537ab56..2bebaac 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 2a8ea99..b3381d0 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 b9aa2f7..fd20076 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 6af5925..9267dc5 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 7584dc6..5ec072b 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 82a0185..d97029d 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 09b7d04..5810f9d 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 0005ca1..f61e7dc 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 d79ecf2..58fab43 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 04ac1ca..aa7ade0 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 a96a0b2..d45c89e 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 ced75dd..126cfee 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 526ab9b..0518c89 100644 --- a/layouts/partials/comment.html +++ b/layouts/partials/comment.html @@ -126,25 +126,25 @@ {{- end -}} - {{- /* Giscus Comment System */ -}} + {{- /* 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 "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 -}} + {{- end -}} {{- end -}} diff --git a/src/js/theme.js b/src/js/theme.js index 98dc54e..3598f9a 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, } }; From ea043a2674faa7e2b310e66bf9ae8e4b98be5859 Mon Sep 17 00:00:00 2001 From: Dillon Date: Thu, 26 May 2022 02:07:52 +0800 Subject: [PATCH 3/3] chore(docs): update docs for utterances and giscus comment --- README.md | 3 ++- README.zh-cn.md | 7 ++++--- config.toml | 4 ++-- exampleSite/config.toml | 4 ++-- exampleSite/content/about/index.en.md | 5 +++-- exampleSite/content/about/index.zh-cn.md | 9 ++++---- .../theme-documentation-basics/index.en.md | 21 ++++++++++++++++++- .../theme-documentation-basics/index.zh-cn.md | 21 ++++++++++++++++++- layouts/partials/comment.html | 4 ++-- 9 files changed, 60 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index dd6bda5..436c9dd 100644 --- a/README.md +++ b/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 diff --git a/README.zh-cn.md b/README.zh-cn.md index c136724..7968de8 100644 --- a/README.zh-cn.md +++ b/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/) 评论**系统 -* 支持 **[Telegram comments](https://comments.app/) 评论**系统 +* 支持 **[Facebook comments](https://developers.facebook.com/docs/plugins/comments/)** 评论系统 +* 支持 **[Telegram comments](https://comments.app/)** 评论系统 * 支持 **[Commento](https://commento.io/)** 评论系统 -* 支持 **[Utterances](https://utteranc.es/)** 评论系统 +* 支持 **[utterances](https://utteranc.es/)** 评论系统 +* 支持 **[giscus](https://giscus.app/)** 评论系统 ### 扩展功能 diff --git a/config.toml b/config.toml index e7b2d0c..8a19fb1 100644 --- a/config.toml +++ b/config.toml @@ -462,8 +462,8 @@ # Commento comment 评论系统设置 (https://commento.io/) [params.page.comment.commento] enable = false - # Utterances comment config (https://utteranc.es/) - # Utterances comment 评论系统设置 (https://utteranc.es/) + # utterances comment config (https://utteranc.es/) + # utterances comment 评论系统设置 (https://utteranc.es/) [params.page.comment.utterances] enable = false # owner/repo diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 83d7c14..e4e36f0 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -544,8 +544,8 @@ enableEmoji = true # Commento comment 评论系统设置 (https://commento.io/) [params.page.comment.commento] enable = false - # Utterances comment config (https://utteranc.es/) - # Utterances comment 评论系统设置 (https://utteranc.es/) + # utterances comment config (https://utteranc.es/) + # utterances comment 评论系统设置 (https://utteranc.es/) [params.page.comment.utterances] enable = false # owner/repo diff --git a/exampleSite/content/about/index.en.md b/exampleSite/content/about/index.en.md index 0c257b9..7469bc3 100644 --- a/exampleSite/content/about/index.en.md +++ b/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 diff --git a/exampleSite/content/about/index.zh-cn.md b/exampleSite/content/about/index.zh-cn.md index 7fcd409..bcfa285 100644 --- a/exampleSite/content/about/index.zh-cn.md +++ b/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/) 评论**系统 -* :(fas fa-comment fa-fw): 支持 **[Telegram comments](https://comments.app/) 评论**系统 +* :(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-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/)** 评论系统 #### 扩展功能 diff --git a/exampleSite/content/posts/theme-documentation-basics/index.en.md b/exampleSite/content/posts/theme-documentation-basics/index.en.md index a4b543b..c30c0d3 100644 --- a/exampleSite/content/posts/theme-documentation-basics/index.en.md +++ b/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] diff --git a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md b/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md index 22d25cf..189bc57 100644 --- a/exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md +++ b/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] diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html index 0518c89..2a52864 100644 --- a/layouts/partials/comment.html +++ b/layouts/partials/comment.html @@ -112,7 +112,7 @@ {{- end -}} - {{- /* Utterances Comment System */ -}} + {{- /* utterances Comment System */ -}} {{- $utterances := $comment.utterances | default dict -}} {{- if $utterances.enable -}}
@@ -122,7 +122,7 @@ {{- $commentConfig = $utterances.lightTheme | default "github-light" | dict "lightTheme" | dict "utterances" | merge $commentConfig -}} {{- $commentConfig = $utterances.darkTheme | default "github-dark" | dict "darkTheme" | dict "utterances" | merge $commentConfig -}} {{- end -}}