fix: inline stack theme

This commit is contained in:
2026-07-31 15:38:57 +08:00
parent b59ffa7703
commit 3423112533
335 changed files with 16340 additions and 1 deletions
@@ -0,0 +1,28 @@
{{/*
Comments include entry.
- If functional cookie consent is required, render a placeholder + template and load commentsConsent.ts.
- Otherwise, render provider partial directly.
*/}}
{{ if .Site.Params.comments.enabled }}
{{- $needsConsent := and .Site.Params.cookies.enabled .Site.Params.cookies.categories.functional -}}
{{- if $needsConsent -}}
{{/* Consent-gated comments - show placeholder until functional consent */}}
<div id="comments-consent-placeholder" class="consent-placeholder">
<p>{{ T "cookies.commentsDisabled" }}</p>
<button class="cookie-btn cookie-btn--primary" data-cookie-action="reopen">
{{ T "cookies.managePreferences" }}
</button>
</div>
<div id="comments-container" style="display: none;"></div>
<template id="comments-template">
{{ partial (printf "comments/provider/%s" .Site.Params.comments.provider) . }}
</template>
{{- $opts := dict "minify" hugo.IsProduction -}}
{{/* commentsConsent.ts is intentionally built and loaded here as an independent entry */}}
{{- $commentsScript := resources.Get "ts/commentsConsent.ts" | js.Build $opts | fingerprint -}}
<script type="text/javascript" src="{{ $commentsScript.RelPermalink }}" integrity="{{ $commentsScript.Data.Integrity }}" defer></script>
{{- else -}}
{{/* No consent required - load comments normally */}}
{{ partial (printf "comments/provider/%s" .Site.Params.comments.provider) . }}
{{- end -}}
{{ end }}
@@ -0,0 +1,30 @@
{{- $style := resources.Get "scss/partials/comments/artalk.scss" | toCSS | minify -}}
{{- with .Site.Params.comments.artalk -}}
<link rel="stylesheet" href="{{ hugo.Data.external.Artalk.Style }}">
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
<div id="Comments" class="artalk-container"></div>
<script type="module">
import Artalk from '{{ hugo.Data.external.Artalk.Script }}';
function isDarkMode() {
return document.documentElement.dataset.scheme === 'dark';
}
const artalkInstance = Artalk.init({
el: '#Comments',
pageKey: '{{ $.RelPermalink }}',
pageTitle: '{{ $.Title }}',
server: '{{ .serverUrl }}',
site: '{{ .site }}',
darkMode: isDarkMode(),
locale: 'auto',
});
window.addEventListener('onColorSchemeChange', (e) => {
if (!artalkInstance || typeof artalkInstance.setDarkMode !== 'function') return;
artalkInstance.setDarkMode(e.detail === 'dark');
});
</script>
{{- end -}}
@@ -0,0 +1,46 @@
<script
src="https://beaudar.lipk.org/client.js"
repo="{{ .Site.Params.comments.beaudar.repo }}"
issue-term="{{ .Site.Params.comments.beaudar.issueTerm }}"
{{ with .Site.Params.comments.beaudar.label }}
label="{{ . }}"
{{ end }}
theme="{{ .Site.Params.comments.beaudar.theme }}"
crossorigin="anonymous"
async
></script>
<style>
.beaudar {
max-width: unset;
}
</style>
<script>
let beaudarLoaded = false;
function setBeaudarTheme(theme) {
let beaudar = document.querySelector(".beaudar iframe");
if (beaudar) {
beaudar.contentWindow.postMessage(
{
type: "set-theme",
theme: `github-${theme}`,
},
"https://beaudar.lipk.org"
);
}
}
addEventListener("message", (event) => {
if (event.origin !== "https://beaudar.lipk.org") return;
/// Called when Beaudar is ready
beaudarLoaded = true;
setBeaudarTheme(document.documentElement.dataset.scheme);
});
window.addEventListener("onColorSchemeChange", (e) => {
if (!beaudarLoaded) return;
setBeaudarTheme(e.detail);
});
</script>
@@ -0,0 +1,29 @@
{{- with .Site.Params.comments.cactus -}}
{{- partial "helper/external" (dict "Context" $ "Namespace" "Cactus") -}}
<style>
.cactus-editor-textarea {
color: var(--body-text-color);
}
.cactus-comment-header {
color: var(--card-text-color-main);
}
.cactus-message-text > p {
color: var(--body-text-color);
}
</style>
<div id="comment-section"></div>
<script>
initComments({
node: document.getElementById("comment-section"),
defaultHomeserverUrl: "{{ .defaultHomeserverUrl | safeJS }}",
serverName: "{{ .serverName }}",
siteName: "{{ .siteName }}",
commentSectionId: "{{ $.File.UniqueID }}"
})
</script>
{{- end -}}
@@ -0,0 +1,13 @@
<script defer src="{{ .Site.Params.comments.comentario.url }}/comentario.js"></script>
<comentario-comments auto-init="{{ .Site.Params.comments.comentario.autoInit }}"
auto-non-interactive-sso="{{ .Site.Params.comments.comentario.autoNonInteractiveSSO }}"
css-override="{{ .Site.Params.comments.comentario.cssOverride }}" lang="{{ .Site.Params.comments.comentario.lang }}"
live-update="{{ .Site.Params.comments.comentario.liveUpdate }}"
max-level="{{ .Site.Params.comments.comentario.maxLevel }}"
no-fonts="{{ .Site.Params.comments.comentario.noFonts }}"
theme="{{ .Site.Params.comments.comentario.theme }}"></comentario-comments>
<script>
window.addEventListener('onColorSchemeChange', (e) => {
document.querySelector('comentario-comments').setAttribute('theme', e.detail);
})
</script>
@@ -0,0 +1,27 @@
{{- $host := .Site.Params.comments.cusdis.host -}}
<div id="cusdis_thread" data-host="{{ $host }}" data-app-id="{{ .Site.Params.comments.cusdis.id }}"
data-page-id="{{ .File.UniqueID }}" data-page-url="{{ .Permalink }}" data-page-title="{{ .Title }}"></div>
<script async defer src="{{ $host }}/js/cusdis.es.js"></script>
<script>
function setCusdisTheme(theme) {
let cusdis = document.querySelector('#cusdis_thread iframe');
if (cusdis) {
window.CUSDIS.setTheme(theme);
cusdis.contentWindow.document.body.style.backgroundColor = window.getComputedStyle(document.body).backgroundColor;
}
}
window.addEventListener('load', function () {
let iframe = document.querySelector("#cusdis_thread iframe");
if (iframe) {
let observer = new MutationObserver(() => {
let scrollHeight = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = scrollHeight + "px";
});
observer.observe(iframe.contentWindow.document.body, { childList: true, subtree: true });
}
});
window.addEventListener('onColorSchemeChange', (e) => {
setCusdisTheme(e.detail)
})
</script>
@@ -0,0 +1,22 @@
<div class="disqus-container">
{{ partial "disqus.html" . }}
</div>
<style>
.disqus-container {
background-color: var(--card-background);
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
padding: var(--card-padding);
}
</style>
<script>
window.addEventListener('onColorSchemeChange', (e) => {
if (typeof DISQUS == 'object') {
DISQUS.reset({
reload: true
});
}
})
</script>
@@ -0,0 +1,65 @@
{{- $pc := .Site.Config.Privacy.Disqus -}}
{{- $disqusjs := .Site.Params.Comments.disqusjs -}}
{{- if and (not $pc.Disable) (and $disqusjs.Shortname $disqusjs.ApiKey) -}}
{{- $style := resources.Get "scss/partials/comments/disqusjs.scss" | toCSS | minify -}}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">
<div class="disqus-container">
<div id="disqus_thread"></div>
<script type="application/javascript">
let disqusjs;
function loadDisqusJS() {
disqusjs = new DisqusJS({
shortname: {{ $disqusjs.Shortname }},
siteName: {{ .Site.Title }},
apikey: {{ $disqusjs.ApiKey }},
{{ with $disqusjs.ApiUrl }}api: {{ . }},{{ end }}
{{ with $disqusjs.Admin }}admin: {{ . }},{{ end }}
{{ with $disqusjs.AdminLabel }}adminLabel: {{ . }}{{ end }}
});
}
function lazyLoadDisqusJS() {
const excludedHosts = ["localhost", "127.0.0.1"];
const hostname = window.location.hostname;
if (excludedHosts.includes(hostname)) {
document.getElementById('disqus_thread').innerHTML =
'Disqus comments not available by default when the website is previewed locally.';
return;
}
let d = document.createElement('script');
d.src = 'https://cdn.jsdelivr.net/npm/disqusjs@1.3/dist/disqus.js';
d.async = false;
document.body.appendChild(d);
d.onload = () => {
loadDisqusJS();
window.addEventListener('onColorSchemeChange', (e) => {
if (disqusjs) {
loadDisqusJS();
}
})
}
}
let runningOnBrowser = typeof window !== "undefined";
let isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
let supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
if (!isBot && supportsIntersectionObserver) {
let disqus_observer = new IntersectionObserver(function(entries) {
if (entries[0].isIntersecting) {
lazyLoadDisqusJS();
disqus_observer.disconnect();
}
});
disqus_observer.observe(document.getElementById('disqus_thread'));
} else {
lazyLoadDisqusJS();
}
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
{{- end -}}
@@ -0,0 +1,52 @@
{{- with .Site.Params.comments.giscus -}}
<script
src="https://giscus.app/client.js"
data-repo="{{- .repo -}}"
data-repo-id="{{- .repoID -}}"
data-category="{{- .category -}}"
data-category-id="{{- .categoryID -}}"
data-mapping="{{- .mapping -}}"
data-strict="{{- .strict -}}"
data-reactions-enabled="{{- .reactionsEnabled -}}"
data-emit-metadata="{{- .emitMetadata -}}"
data-input-position="{{- .inputPosition -}}"
data-theme="{{- .lightTheme -}}"
data-lang="{{- .lang -}}"
data-loading="{{- .loading -}}"
crossorigin="anonymous"
async
></script>
<script>
function setGiscusTheme(theme) {
let giscus = document.querySelector("iframe.giscus-frame");
if (giscus) {
giscus.contentWindow.postMessage(
{
giscus: {
setConfig: {
theme: theme,
},
},
},
"https://giscus.app"
);
}
}
(function () {
addEventListener("message", (e) => {
if (event.origin !== "https://giscus.app") return;
handler();
});
window.addEventListener("onColorSchemeChange", handler);
function handler() {
if (document.documentElement.dataset.scheme === "light") {
setGiscusTheme('{{- .lightTheme -}}');
} else {
setGiscusTheme('{{- .darkTheme -}}');
}
}
})();
</script>
{{- end -}}
@@ -0,0 +1,32 @@
{{- with .Site.Params.comments.gitalk -}}
<div id="gitalk-container"></div>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.css"
/>
<script src="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.18.0/js/md5.min.js"></script>
<script>
const gitalk = new Gitalk({
clientID: "{{- .clientID -}}",
clientSecret: "{{- .clientSecret -}}",
repo: "{{- .repo -}}",
owner: "{{- .owner -}}",
admin: ["{{- .admin -}}"],
distractionFreeMode: false, // Facebook-like distraction free mode
id: md5(location.pathname), // Max Location.pathname Legth:75 https://github.com/gitalk/gitalk/issues/102
proxy: {{- .proxy -}},
});
(function () {
const excludedHosts = ["localhost", "127.0.0.1"];
const hostname = window.location.hostname;
if (excludedHosts.includes(hostname)) {
document.getElementById("gitalk-container").innerHTML =
"Gitalk comments not available by default when the website is previewed locally.";
return;
}
gitalk.render("gitalk-container");
})();
</script>
{{ end }}
@@ -0,0 +1,29 @@
{{- with .Site.Params.comments.remark42 -}}
<div id="remark42"></div>
<script>
var remark_config = {
host: '{{ .host }}',
site_id: '{{ .site }}',
components: ['embed'],
url: '{{ $.Permalink }}',
max_shown_comments: {{ .max_shown_comments }},
theme: document.documentElement.dataset.scheme,
page_title: '{{ $.Title }}',
locale: '{{ .locale }}',
show_email_subscription: {{ .show_email_subscription }}
};
!function(e, n) {
for (var o = 0; o < e.length; o++) {
var r = n.createElement('script'),
c = '.js',
d = n.head || n.body;
'noModule' in r ? (r.type = 'module', c = '.mjs') : r.async = !0, r.defer = !0, r.src = remark_config.host + '/web/' + e[o] + c, d.appendChild(r)
}
}(remark_config.components || ['embed'], document);
window.addEventListener('onColorSchemeChange', (e) => {
window.REMARK42.changeTheme(e.detail);
})
</script>
{{- end -}}
@@ -0,0 +1,61 @@
<script src="//cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.all.min.js"></script>
<div id="tcomment"></div>
<style>
.twikoo {
background-color: var(--card-background);
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
padding: var(--card-padding);
}
:root[data-scheme="dark"] {
--twikoo-body-text-color-main: rgba(255, 255, 255, 0.9);
--twikoo-body-text-color: rgba(255, 255, 255, 0.7);
}
.twikoo .el-input-group__prepend,
.twikoo .tk-action-icon,
.twikoo .tk-submit-action-icon,
.twikoo .tk-time,
.twikoo .tk-comments-no,
.twikoo .tk-comments-count {
color: var(--twikoo-body-text-color);
}
.twikoo .el-input__inner,
.twikoo .el-textarea__inner,
.twikoo .tk-preview-container,
.twikoo .tk-content,
.twikoo .tk-nick,
.twikoo .tk-send,
.twikoo .tk-comments-no,
.twikoo .el-input__count,
.twikoo .tk-submit-action-icon {
color: var(--twikoo-body-text-color-main)!important;
}
.twikoo .el-button{
color: var(--twikoo-body-text-color)!important;
}
.twikoo .el-input__count {
color: var(--twikoo-body-text-color) !important;
}
.OwO .OwO-body {
background-color: var(--body-background) !important;
color: var(--body-text-color) !important;
}
</style>
{{- with .Site.Params.comments.twikoo -}}
<script>
twikoo.init({
envId: '{{- .envId -}}',
el: '#tcomment',
{{- with .region -}}
region: '{{- . -}}',
{{- end -}}
{{- with .path -}}
path: '{{- . -}}',
{{- end -}}
{{- with .lang -}}
lang: '{{- . -}}',
{{- end -}}
})
</script>
{{- end -}}
@@ -0,0 +1,46 @@
<script src="https://utteranc.es/client.js"
repo="{{ .Site.Params.comments.utterances.repo }}"
issue-term="{{ .Site.Params.comments.utterances.issueTerm }}"
{{ with .Site.Params.comments.utterances.label }}
label="{{ . }}"
{{ end }}
crossorigin="anonymous"
async
>
</script>
<style>
.utterances {
max-width: unset;
}
</style>
<script>
let utterancesLoaded = false;
function setUtterancesTheme(theme) {
let utterances = document.querySelector('.utterances iframe');
if (utterances) {
utterances.contentWindow.postMessage(
{
type: 'set-theme',
theme: `github-${theme}`
},
'https://utteranc.es'
);
}
}
addEventListener('message', event => {
if (event.origin !== 'https://utteranc.es') return;
/// Called when Utterances is ready
utterancesLoaded = true;
setUtterancesTheme(document.documentElement.dataset.scheme)
});
window.addEventListener('onColorSchemeChange', (e) => {
if (!utterancesLoaded) return;
setUtterancesTheme(e.detail)
})
</script>
@@ -0,0 +1,27 @@
{{- with .Site.Params.comments.vssue -}}
<link rel="stylesheet" href="https://unpkg.com/vssue/dist/vssue.min.css" />
<div id="vssue"></div>
<script src="https://unpkg.com/vue@2/dist/vue.runtime.min.js"></script>
<script src="https://unpkg.com/vssue/dist/vssue.{{ .platform }}.min.js"></script>
<script>
new Vue({
el: "#vssue",
render: (h) =>
h("Vssue", {
props: {
title: "{{ $.Title }}",
options: {
autoCreateIssue: {{ .autoCreateIssue }},
owner: "{{ .owner }}",
repo: "{{ .repo }}",
clientId: "{{ .clientId }}",
clientSecret: "{{ .clientSecret }}",
},
},
}),
});
</script>
{{- end -}}
@@ -0,0 +1,34 @@
<script src='//unpkg.com/@waline/client@v2/dist/waline.js'></script>
<link href='//unpkg.com/@waline/client@v2/dist/waline.css' rel='stylesheet'/>
<div id="waline" class="waline-container"></div>
<style>
.waline-container {
background-color: var(--card-background);
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
padding: var(--card-padding);
--waline-font-size: var(--article-font-size);
}
.waline-container .wl-count {
color: var(--card-text-color-main);
}
</style>
{{- with .Site.Params.comments.waline -}}
{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "imageuploader" "imageUploader" "texrenderer" "texRenderer" "turnstilekey" "turnstileKey" -}}
{{- range $key, $val := . -}}
{{- if ne $val nil -}}
{{- $replaceKey := index $replaceKeys $key -}}
{{- $k := default $key $replaceKey -}}
{{- $config = merge $config (dict $k $val) -}}
{{- end -}}
{{- end -}}
<script>
/// Waline client configuration see: https://waline.js.org/en/reference/client.html
Waline.init({{ $config | jsonify | safeJS }});
</script>
{{- end -}}