From 156a91559d7cfe6e2b4897911dbf0df703cb86a5 Mon Sep 17 00:00:00 2001 From: Waynerv Date: Sat, 20 Jan 2024 19:01:20 +0800 Subject: [PATCH] feat: add support for giscus (#397) * add giscus support * polish: merge with #428 by hand --------- Co-authored-by: kands-code Co-authored-by: reuixiy --- assets/js/dark-mode.js | 26 +++++++++- config-examples/en/config.toml | 16 ++++++ config-examples/zh-cn/config.toml | 16 ++++++ config-examples/zh-tw/config.toml | 16 ++++++ layouts/partials/components/comments.html | 4 ++ layouts/partials/third-party/giscus.html | 61 +++++++++++++++++++++++ layouts/partials/third-party/script.html | 4 ++ layouts/partials/utils/lib.html | 5 ++ 8 files changed, 146 insertions(+), 2 deletions(-) create mode 100644 layouts/partials/third-party/giscus.html diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js index 5e6426ef..bd3a2098 100644 --- a/assets/js/dark-mode.js +++ b/assets/js/dark-mode.js @@ -9,11 +9,11 @@ if (userPrefers === 'dark') { changeModeMeta('light'); } -window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => { +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { changeMode(); }); -window.addEventListener("DOMContentLoaded", event => { +window.addEventListener("DOMContentLoaded", () => { // Update meta tags and code highlighting changeMode(); @@ -89,6 +89,28 @@ function changeMode() { } {{ end }} + {{ if and .Site.Params.enableGiscus (eq hugo.Environment "production") }} + // Change Giscus Comments Theme + if (isDark) { + changeGiscusTheme('{{ .Site.Params.giscusThemeDark | default "dark" }}'); + } else { + changeGiscusTheme('{{ .Site.Params.giscusTheme | default "light" }}'); + } + function changeGiscusTheme(theme) { + function sendMessage(message) { + const iframe = document.querySelector('iframe.giscus-frame'); + if (iframe !== null) { + iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app'); + } + } + sendMessage({ + setConfig: { + theme: theme, + }, + }); + } + {{ end }} + // Mermaid // https://github.com/reuixiy/hugo-theme-meme/issues/205 if (typeof mermaidConfig !== 'undefined') { diff --git a/config-examples/en/config.toml b/config-examples/en/config.toml index 3b30fb30..dea92a0d 100644 --- a/config-examples/en/config.toml +++ b/config-examples/en/config.toml @@ -737,6 +737,22 @@ uglyURLs = false gitalkEnableHotKey = true # Note: https://github.com/gitalk/gitalk + ## Giscus + enableGiscus = false + giscusRepo = "[ENTER repo/you/want HERE]" + giscusRepoId = "[ENTER REPO ID HERE]" + giscusCategory = "[ENTER CATEGORY NAME HERE]" + giscusCategoryId = "[ENTER CATEGORY ID HERE]" + giscusMapping = "pathname" + giscusStrict = false + giscusReactionsEnabled = true + giscusEmitMetaData = false + giscusInputPosition = "top" + giscusTheme = "light" + giscusThemeDark = "dark" + giscusLang = "en" + # Note: https://giscus.app + ###################################### # Google Analytics diff --git a/config-examples/zh-cn/config.toml b/config-examples/zh-cn/config.toml index 01acefe9..1cade74d 100644 --- a/config-examples/zh-cn/config.toml +++ b/config-examples/zh-cn/config.toml @@ -683,6 +683,22 @@ uglyURLs = false gitalkEnableHotKey = true # 说明：https://github.com/gitalk/gitalk + ## Giscus + enableGiscus = false + giscusRepo = "[ENTER repo/you/want HERE]" + giscusRepoId = "[ENTER REPO ID HERE]" + giscusCategory = "[ENTER CATEGORY NAME HERE]" + giscusCategoryId = "[ENTER CATEGORY ID HERE]" + giscusMapping = "pathname" + giscusStrict = false + giscusReactionsEnabled = true + giscusEmitMetaData = false + giscusInputPosition = "top" + giscusTheme = "light" + giscusThemeDark = "dark" + giscusLang = "zh-CN" + # 说明：https://giscus.app/zh-CN + ###################################### # Google Analytics diff --git a/config-examples/zh-tw/config.toml b/config-examples/zh-tw/config.toml index dd47377b..cf77e435 100644 --- a/config-examples/zh-tw/config.toml +++ b/config-examples/zh-tw/config.toml @@ -683,6 +683,22 @@ uglyURLs = false gitalkEnableHotKey = true # 說明：https://github.com/gitalk/gitalk + ## Giscus + enableGiscus = false + giscusRepo = "[ENTER repo/you/want HERE]" + giscusRepoId = "[ENTER REPO ID HERE]" + giscusCategory = "[ENTER CATEGORY NAME HERE]" + giscusCategoryId = "[ENTER CATEGORY ID HERE]" + giscusMapping = "pathname" + giscusStrict = false + giscusReactionsEnabled = true + giscusEmitMetaData = false + giscusInputPosition = "top" + giscusTheme = "light" + giscusThemeDark = "dark" + giscusLang = "zh-TW" + # 說明：https://giscus.app/zh-TW + ###################################### # Google Analytics diff --git a/layouts/partials/components/comments.html b/layouts/partials/components/comments.html index 08e9a69f..d846b8e3 100644 --- a/layouts/partials/components/comments.html +++ b/layouts/partials/components/comments.html @@ -22,5 +22,9 @@ {{ if .Site.Params.enableGitalk }}
{{ end }} + + {{ if .Site.Params.enableGiscus }} +
+ {{ end }} {{ end }} {{ end }} diff --git a/layouts/partials/third-party/giscus.html b/layouts/partials/third-party/giscus.html new file mode 100644 index 00000000..d633349e --- /dev/null +++ b/layouts/partials/third-party/giscus.html @@ -0,0 +1,61 @@ +{{- $src := partial "utils/lib.html" (dict "$" . "type" "giscus") -}} + + + +{{- define "giscus-theme" -}} + {{- $theme := .Site.Params.giscusTheme | default "light" -}} + {{- if and .Site.Params.enableDarkMode (eq .Site.Params.defaultTheme "dark") -}} + {{- $theme = .Site.Params.giscusThemeDark | default "dark" -}} + {{- end -}} + + {{- if .Site.Params.enableDarkMode -}} + const isDark = getCurrentTheme() === 'dark'; + if (isDark) { + script.dataset.theme = '{{ .Site.Params.giscusThemeDark | default "dark" }}'; + } else { + script.dataset.theme = '{{ .Site.Params.giscusTheme | default "light" }}'; + } + {{- else -}} + script.dataset.theme = '{{ $theme }}'; + {{- end -}} +{{- end -}} diff --git a/layouts/partials/third-party/script.html b/layouts/partials/third-party/script.html index e36be6fa..70a76a94 100644 --- a/layouts/partials/third-party/script.html +++ b/layouts/partials/third-party/script.html @@ -29,6 +29,10 @@ {{ partial "third-party/gitalk.html" . }} {{ end }} + {{ if .Site.Params.enableGiscus }} + {{ partial "third-party/giscus.html" . }} + {{ end }} + {{ end }} {{ end }} diff --git a/layouts/partials/utils/lib.html b/layouts/partials/utils/lib.html index f2b7c881..370dfaed 100644 --- a/layouts/partials/utils/lib.html +++ b/layouts/partials/utils/lib.html @@ -110,6 +110,11 @@ {{- $host = $.Site.Params.lib.path.utterances | default $defalut -}} {{- end -}} +{{- if eq $type "giscus" -}} + {{- $defalut := "https://giscus.app/client.js" -}} + {{- $host = $.Site.Params.lib.path.giscus | default $defalut -}} +{{- end -}} +