hugo-theme-anubis2/layouts/partials/giscus.html
2024-03-18 16:58:43 +08:00

61 lines
2.5 KiB
HTML

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