100% support of utterances

This commit is contained in:
Mivinci 2021-11-12 15:47:28 +08:00
parent 6d38283d7d
commit 74d14b51a1
8 changed files with 76 additions and 23 deletions

View file

@ -1,17 +1,40 @@
const light = '{{ index .Site.Params.switch 1 }}', const light = '{{ index .Site.Params.switch 1 }}'
dark = '{{ index .Site.Params.switch 0 }}'; const dark = '{{ index .Site.Params.switch 0 }}'
const LIGHT = 'light', DARK = 'dark'; const comment = '{{ .Site.Params.comment }}'
const themeSwitcher = document.getElementById('theme-switcher'); 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 () { themeSwitcher.addEventListener('click', function () {
const currentTheme = localStorage.theme, const currentTheme = localStorage.theme
newTheme = currentTheme === LIGHT ? DARK : LIGHT, const newTheme = currentTheme === LIGHT ? DARK : LIGHT
{ classList } = document.documentElement,
text = newTheme === LIGHT ? light : dark; // switch global theme
classList.remove(currentTheme); 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); classList.add(newTheme);
localStorage.theme = newTheme; localStorage.theme = newTheme;
themeSwitcher.innerHTML = text; themeSwitcher.innerHTML = text;
}); }
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')
}

View file

@ -15,8 +15,8 @@
} }
html.dark { html.dark {
--bg: #262d33; --bg: #181818;
--ft: #c5c4c4; --ft: silver;
--bd: #555; --bd: #555;
--tag: #999; --tag: #999;

View file

@ -4,7 +4,6 @@ title = "Hi Folks"
copyright = "© XJJ 2021" copyright = "© XJJ 2021"
paginate = 6 paginate = 6
googleAnalytics = "" googleAnalytics = ""
disqusShortname = "hugo-minima"
# theme is the name of the hugo theme you choose, # theme is the name of the hugo theme you choose,
# `hugo-theme-minima` is put here only for debuging, # `hugo-theme-minima` is put here only for debuging,
@ -26,8 +25,8 @@ iam = "I am"
# e.g. "title - subtitle". # e.g. "title - subtitle".
subtitle = "" subtitle = ""
# Comment decides the comment plugin to be used on your blog site, # Comment decides the comment plugin to be used on your blog site,
# e.g. disqus, ovo. # e.g. disqus, utterances, ovo.
comment = "disqus" comment = "utterances"
# timeformat # timeformat
timeformat = "Jan 02, 2006" timeformat = "Jan 02, 2006"
# switch for turning on/off lights. # switch for turning on/off lights.
@ -36,15 +35,24 @@ switch = ["🌚", "🌝"]
displayDate = true displayDate = true
# if true, users can select text from your post. # if true, users can select text from your post.
selectable = true selectable = true
# custom global font. notice: `globalFontFamily` won't be working # custom global font. notice: `globalFontFamily` won't be working
# on texts in some special positions. e.g. title # on texts in some special positions like on titles
globalFontFamily = 'Helvatica, sans-serif' globalFontFamily = 'Helvatica, sans-serif'
# Disqus configuration
[params.disqus]
shortname = "hugo-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. # OvO is a comment plugin written by the author of Minima.
# It is enabled when params.comment is set "ovo". You can # It is enabled when params.comment is set "ovo". You can
# find its documentation on https://github.com/ovojs/ovo. # 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] [params.ovo]
server = "" server = ""
placeholder = "" placeholder = ""

View file

@ -4,6 +4,7 @@ title: Instruction
date: 2021-07-19T10:52:59+08:00 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. 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 math: true
comment: true
--- ---

View file

@ -44,4 +44,8 @@
{{ partial "ovo.html" . }} {{ partial "ovo.html" . }}
{{ end }} {{ end }}
{{ if and .Params.comment (eq .Site.Params.comment "utterances")}}
{{ partial "utterances.html" . }}
{{ end }}
{{ end }} {{ end }}

View file

@ -7,7 +7,7 @@
return; return;
const dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; 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'; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})(); })();

View file

@ -25,7 +25,8 @@
<link rel="stylesheet" href="{{ $style.RelPermalink }}"> <link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ $options = (dict "targetPath" (printf `minima.%d.js` $hash) "minify" true) }} {{ $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) .
}}
<script defer type="text/javascript" src="{{ $js.RelPermalink }}"></script> <script defer type="text/javascript" src="{{ $js.RelPermalink }}"></script>
</head> </head>
<script> <script>

View file

@ -0,0 +1,16 @@
<script>
const repo = '{{ .Site.Params.utterances.repo }}'
const issueTerm = '{{ .Site.Params.utterances.issueTerm }}'
const theme = localStorage.theme ? `github-${localStorage.theme}` : 'preferred-color-scheme';
const script = document.createElement('script')
script.src = 'https://utteranc.es/client.js'
script.async = true
script.crossOrigin = 'anonymous'
script.setAttribute('repo', repo)
script.setAttribute('issue-term', issueTerm)
script.setAttribute('theme', theme)
document.querySelector('main').appendChild(script)
</script>