mirror of
https://github.com/imfing/hextra.git
synced 2025-05-14 13:46:26 -04:00
85 lines
2.7 KiB
HTML
85 lines
2.7 KiB
HTML
{{ $default_chinese := "zh-CN" }}
|
|
|
|
{{ $sl := site.Language }}
|
|
{{ $giscus_lang := $sl.Lang | default `en` }}
|
|
|
|
{{/*
|
|
Special case for Chinese.
|
|
Giscus uses the geophraphical language code for these.
|
|
See: https://github.com/giscus/giscus/tree/main/locales
|
|
*/}}
|
|
{{ if eq $giscus_lang "zh" }}
|
|
{{/* Create a code formatted for Giscus: zh-CN or zn-TW. */}}
|
|
{{ $code := lower $sl.LanguageCode }}
|
|
|
|
{{ if (hasSuffix $code "-cn") }}
|
|
{{ $giscus_lang = "zh-CN" }}
|
|
{{ else if (hasSuffix $code "-tw") }}
|
|
{{ $giscus_lang = "zh-TW" }}
|
|
{{ else }}
|
|
{{ $giscus_lang = $default_chinese }}
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
|
|
{{- with site.Params.comments.giscus -}}
|
|
<script>
|
|
/*
|
|
* "preferred color scheme" theme in giscus works using "prefers-color-scheme" in media query.
|
|
* but, hugo's theme switch function works by using "color-theme" in local storage.
|
|
* This solution was created with reference to:
|
|
* https://github.com/giscus/giscus/issues/336#issuecomment-1214366281
|
|
*/
|
|
function getGiscusTheme() {
|
|
return localStorage.getItem("color-theme");
|
|
}
|
|
|
|
function setGiscusTheme() {
|
|
function sendMessage(message) {
|
|
const iframe = document.querySelector('iframe.giscus-frame');
|
|
if (!iframe) return;
|
|
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
|
|
}
|
|
sendMessage({
|
|
setConfig: {
|
|
theme: getGiscusTheme(),
|
|
},
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const giscusAttributes = {
|
|
"src": "https://giscus.app/client.js",
|
|
"data-repo": "{{ .repo }}",
|
|
"data-repo-id": "{{ .repoId }}",
|
|
"data-category": "{{ .category }}",
|
|
"data-category-id": "{{ .categoryId }}",
|
|
"data-mapping": "{{ .mapping | default `pathname` }}",
|
|
"data-strict": "{{ (string .strict) | default 0 }}",
|
|
"data-reactions-enabled": "{{ (string .reactionsEnabled) | default 1 }}",
|
|
"data-emit-metadata": "{{ (string .emitMetadata) | default 0 }}",
|
|
"data-input-position": "{{ .inputPosition | default `top` }}",
|
|
"data-theme": getGiscusTheme(),
|
|
"data-lang": "{{ .lang | default $giscus_lang }}",
|
|
"crossorigin": "anonymous",
|
|
"async": "",
|
|
};
|
|
|
|
// Dynamically create script tag
|
|
const giscusScript = document.createElement("script");
|
|
Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
|
|
document.getElementById('giscus').appendChild(giscusScript);
|
|
|
|
// Update giscus theme when theme switcher is clicked
|
|
const toggles = document.querySelectorAll(".theme-toggle");
|
|
if (toggles) {
|
|
toggles.forEach(toggle => toggle.addEventListener('click', setGiscusTheme));
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div id="giscus"></div>
|
|
{{- else -}}
|
|
{{ warnf "giscus is not configured" }}
|
|
{{- end -}}
|