From 61eccb2502064ee628d6e1983af9020ed6d1de57 Mon Sep 17 00:00:00 2001 From: Dillon Date: Thu, 26 May 2022 01:51:17 +0800 Subject: [PATCH] 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 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 @@ {{- 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 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, } };