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 }}',
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;
});
}
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 {
--bg: #262d33;
--ft: #c5c4c4;
--bg: #181818;
--ft: silver;
--bd: #555;
--tag: #999;

View file

@ -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.
@ -37,14 +36,23 @@ 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
# on texts in some special positions like on titles
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.
# 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 = ""

View file

@ -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
---

View file

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

View file

@ -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);
})();

View file

@ -25,7 +25,8 @@
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
{{ $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>
</head>
<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>