syntaxerrormmm/hugo-theme-anubis2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix giscus color switch

Browse Source
This commit is contained in:
Junyi Hou 2024-03-18 18:38:18 +08:00
parent 74015da3e5
commit 00ac00f3fb
2 changed files with 34 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
layouts/partials/giscus.html
View File

@ -1,23 +1,24 @@
{{ $theme := .Site.Params.GiscusTheme | default "preferred_color_scheme" }} {{ $theme := .Site.Params.GiscusTheme | default "preferred_color_scheme" }} {{ $mapping :=
{{ $mapping := .Site.Params.GiscusDataMapping | default "og:title" }} .Site.Params.GiscusDataMapping | default "og:title" }} {{ $language := .Site.Params.GiscusLang | default "en" }} {{
{{ $language := .Site.Params.GiscusLang | default "en" }} $category := .Site.Params.GiscusDiscussionCategory | default "Announcements" }} {{ $lazyload
{{ $category := .Site.Params.GiscusDiscussionCategory | default "Announcements" }} := .Site.Params.GiscusLazyLoad | default false }} {{ $colorTheme := "auto" }} {{ if and (isset site.Params "colortheme")
{{ $lazyload := .Site.Params.GiscusLazyLoad | default false }} (ne site.Params.colortheme "") }} {{ $colorTheme = site.Params.colortheme | lower }} {{ end }}
<script> <script>
function detectCurrentScheme() { function detectCurrentScheme2() {
if (localStorage !== null && localStorage.getItem('user-color-scheme')) { const defaultTheme = "{{ $colorTheme }}";
return localStorage.getItem('user-color-scheme') if (localStorage !== null && localStorage.getItem("user-color-scheme")) {
return localStorage.getItem("user-color-scheme");
} }
if (defaultTheme) { if (defaultTheme === "dark" || defaultTheme === "light") {
return defaultTheme return defaultTheme;
} }
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} }
let giscusTheme = detectCurrentScheme(); let giscusTheme = detectCurrentScheme2();
let giscusAttributes = { let giscusAttributes = {
"src": "https://giscus.app/client.js", src: "https://giscus.app/client.js",
"data-repo": "{{- .Site.Params.GiscusRepo -}}", "data-repo": "{{- .Site.Params.GiscusRepo -}}",
"data-repo-id": "{{- .Site.Params.GiscusRepoId -}}", "data-repo-id": "{{- .Site.Params.GiscusRepoId -}}",
"data-category": "{{- $category -}}", "data-category": "{{- $category -}}",
@ -29,32 +30,20 @@
"data-input-position": "bottom", "data-input-position": "bottom",
"data-theme": giscusTheme, "data-theme": giscusTheme,
"data-lang": "{{ $language }}", "data-lang": "{{ $language }}",
"crossorigin": "anonymous", crossorigin: "anonymous",
"lazyload": "{{ $lazyload }}", lazyload: "{{ $lazyload }}",
"async": true async: true,
} };
let main = document.querySelector('main'); let main = document.querySelector("main");
let giscusScript = document.createElement('script'); let giscusScript = document.createElement("script");
Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value)); Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
main.appendChild(giscusScript); main.appendChild(giscusScript);
</script> </script>
{{/* {{/*
<script src="https://giscus.app/client.js" <script src="https://giscus.app/client.js" data-repo="{{- .Site.Params.GiscusRepo -}}"
data-repo="{{- .Site.Params.GiscusRepo -}}" data-repo-id="{{- .Site.Params.GiscusRepoId -}}" data-category="{{- .Site.Params.GiscusCategory -}}"
data-repo-id="{{- .Site.Params.GiscusRepoId -}}" data-category-id="{{- .Site.Params.GiscusCategoryId -}}" data-mapping="{{ $mapping }}" data-strict="0"
data-category="{{- .Site.Params.GiscusCategory -}}" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="{{ $theme }}"
data-category-id="{{- .Site.Params.GiscusCategoryId -}}" data-lang="{{ $language }}" crossorigin="anonymous" {{ if $lazyload }} data-loading="lazy" {{ end }}
data-mapping="{{ $mapping }}" async></script>
data-strict="0" */}}
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="{{ $theme }}"
data-lang="{{ $language }}"
crossorigin="anonymous"
{{ if $lazyload }}
data-loading="lazy"
{{ end }}
async>
</script> */}}

9
layouts/partials/theme-switcher.html
View File

@ -26,7 +26,8 @@
const autoChangeScheme = e => { const autoChangeScheme = e => {
currentTheme = e.matches ? 'dark' : 'light' currentTheme = e.matches ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', currentTheme) document.documentElement.setAttribute('data-theme', currentTheme);
changeGiscusTheme(currentTheme);
} }
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
@ -61,7 +62,7 @@
currentTheme = (currentTheme === 'dark') ? 'light' : 'dark'; currentTheme = (currentTheme === 'dark') ? 'light' : 'dark';
if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme); if (localStorage) localStorage.setItem(STORAGE_KEY, currentTheme);
document.documentElement.setAttribute('data-theme', currentTheme); document.documentElement.setAttribute('data-theme', currentTheme);
changeGiscusTheme(); changeGiscusTheme(currentTheme);
} }
function showContent() { function showContent() {
@ -69,9 +70,7 @@
document.body.style.opacity = 1; document.body.style.opacity = 1;
} }
function changeGiscusTheme () { function changeGiscusTheme (theme) {
const theme = detectCurrentScheme();
function sendMessage(message) { function sendMessage(message) {
const iframe = document.querySelector('iframe.giscus-frame'); const iframe = document.querySelector('iframe.giscus-frame');
if (!iframe) return; if (!iframe) return;