diff --git a/assets/js/theme.js b/assets/js/theme.js index d17e9c0..6a345f3 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1,17 +1,40 @@ -const light = '{{ index .Site.Params.switch 1 }}', - dark = '{{ index .Site.Params.switch 0 }}'; -const LIGHT = 'light', DARK = 'dark'; -const themeSwitcher = document.getElementById('theme-switcher'); +const light = '{{ index .Site.Params.switch 1 }}' +const dark = '{{ index .Site.Params.switch 0 }}' +const comment = '{{ .Site.Params.comment }}' +const LIGHT = 'light', DARK = 'dark' -themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark; +const themeSwitcher = document.getElementById('theme-switcher') + +// set switcher +themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark themeSwitcher.addEventListener('click', function () { - const currentTheme = localStorage.theme, - newTheme = currentTheme === LIGHT ? DARK : LIGHT, - { classList } = document.documentElement, - text = newTheme === LIGHT ? light : dark; - classList.remove(currentTheme); + const currentTheme = localStorage.theme + const newTheme = currentTheme === LIGHT ? DARK : LIGHT + + // switch global theme + switchMinimaTheme(currentTheme, newTheme) + + // switch utterance theme if necessary + + if (comment === 'utterances') + switchUtteranceTheme(`github-${newTheme}`) +}); + +function switchMinimaTheme(oldTheme, newTheme) { + const { classList } = document.documentElement + const text = newTheme === LIGHT ? light : dark; + + classList.remove(oldTheme); classList.add(newTheme); localStorage.theme = newTheme; themeSwitcher.innerHTML = text; -}); \ No newline at end of file +} + +const utteranceClassName = '.utterances-frame' +let utterance; + +function switchUtteranceTheme(theme) { + if (!utterance) utterance = document.querySelector(utteranceClassName) + utterance.contentWindow.postMessage({type: 'set-theme', theme}, 'https://utteranc.es') +} \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index 3372df3..5a618a8 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -15,8 +15,8 @@ } html.dark { - --bg: #262d33; - --ft: #c5c4c4; + --bg: #181818; + --ft: silver; --bd: #555; --tag: #999; diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 025dc19..02686c3 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -4,7 +4,6 @@ title = "Hi Folks" copyright = "© XJJ 2021" paginate = 6 googleAnalytics = "" -disqusShortname = "hugo-minima" # theme is the name of the hugo theme you choose, # `hugo-theme-minima` is put here only for debuging, @@ -26,8 +25,8 @@ iam = "I am" # e.g. "title - subtitle". subtitle = "" # Comment decides the comment plugin to be used on your blog site, -# e.g. disqus, ovo. -comment = "disqus" +# e.g. disqus, utterances, ovo. +comment = "utterances" # timeformat timeformat = "Jan 02, 2006" # switch for turning on/off lights. @@ -36,15 +35,24 @@ switch = ["🌚", "🌝"] displayDate = true # if true, users can select text from your post. selectable = true -# custom global font. notice: `globalFontFamily` won't be working -# on texts in some special positions. e.g. title +# custom global font. notice: `globalFontFamily` won't be working +# on texts in some special positions like on titles globalFontFamily = 'Helvatica, sans-serif' +# Disqus configuration +[params.disqus] +shortname = "hugo-minima" -# OvO is a comment plugin written by the author of Minima. +# Utterance configuration +# Full doc's at https://utteranc.es +[params.utterances] +repo = "mivinci/minima-comments" +issueTerm = "pathname" + +# OvO is a comment plugin written by the author of Minima. # It is enabled when params.comment is set "ovo". You can # find its documentation on https://github.com/ovojs/ovo. -# If you are using disqus, just ignore this field. +# If you are using disqus or utterance, just ignore this field. [params.ovo] server = "" placeholder = "" diff --git a/exampleSite/content/instruction.md b/exampleSite/content/instruction.md index 1b17888..cb10fc2 100644 --- a/exampleSite/content/instruction.md +++ b/exampleSite/content/instruction.md @@ -4,6 +4,7 @@ title: Instruction date: 2021-07-19T10:52:59+08:00 description: A Clean and minimal Hugo theme porting from Minima on Hexo. [Click me](https://h.xjj.pub/) to take a look at the demo site. math: true +comment: true --- diff --git a/layouts/_default/single.html b/layouts/_default/single.html index cd4c154..845b194 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -44,4 +44,8 @@ {{ partial "ovo.html" . }} {{ end }} +{{ if and .Params.comment (eq .Site.Params.comment "utterances")}} +{{ partial "utterances.html" . }} +{{ end }} + {{ end }} \ No newline at end of file diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html index 1c6581e..7ed9284 100644 --- a/layouts/partials/disqus.html +++ b/layouts/partials/disqus.html @@ -7,7 +7,7 @@ return; const dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; - const disqus_shortname = '{{ .Site.DisqusShortname }}'; + const disqus_shortname = '{{ .Site.Params.shortname }}'; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 5b1705d..1708a05 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -25,7 +25,8 @@ {{ $options = (dict "targetPath" (printf `minima.%d.js` $hash) "minify" true) }} - {{ $js := resources.Get "js/main.js" | js.Build $options | resources.ExecuteAsTemplate (printf `minima.%d.js` $hash) . }} + {{ $js := resources.Get "js/main.js" | js.Build $options | resources.ExecuteAsTemplate (printf `minima.%d.js` $hash) . + }} \ No newline at end of file + diff --git a/layouts/partials/utterances.html b/layouts/partials/utterances.html new file mode 100644 index 0000000..fbbebb8 --- /dev/null +++ b/layouts/partials/utterances.html @@ -0,0 +1,16 @@ +