1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
{{/* 只有标题可以被 Hugo 解析 */}}
<div class="comments-title" id="tw-comment-title">
<p class="x-comments-title">{{ .Site.Params.giscus.discussionTitle }}</p>
<p style="font-size: 1rem">{{ .Site.Params.giscus.discussionSubtitle }}</p>
</div>
<div id="tw-comment"></div>
{{/* 下面这行至关重要！告诉 Hugo 不要动下面的 JS */}}
{{- /* safeJS */ -}}
<script>
(() => {
const config = {
repo: "{{ .Site.Params.giscus.repo }}",
repoId: "{{ .Site.Params.giscus.repoId }}",
category: "{{ .Site.Params.giscus.category | default "" }}",
categoryId: "{{ .Site.Params.giscus.categoryId | default "" }}",
mapping: "{{ .Site.Params.giscus.mapping | default "pathname" }}",
strict: "{{ .Site.Params.giscus.strict | default "0" }}",
reactionsEnabled: "{{ .Site.Params.giscus.reactionsEnabled | default "1" }}",
emitMetadata: "{{ .Site.Params.giscus.emitMetadata | default "0" }}",
inputPosition: "{{ .Site.Params.giscus.inputPosition | default "bottom" }}",
lang: "{{ .Site.Params.giscus.lang | default "en" }}",
lightTheme: "{{ .Site.Params.giscus.lightTheme | default "light" }}",
darkTheme: "{{ .Site.Params.giscus.darkTheme | default "dark_high_contrast" }}",
};
// 获取当前主题
const getTheme = () =>
localStorage.getItem("pref-theme") === "dark"
? config.darkTheme
: config.lightTheme;
// 动态获取 iframe 的 origin，避免 postMessage 报错
const sendTheme = () => {
const iframe = document.querySelector("iframe.giscus-frame");
if (iframe?.contentWindow && iframe.src) {
const origin = new URL(iframe.src).origin;
iframe.contentWindow.postMessage(
{ giscus: { setConfig: { theme: getTheme() } } },
origin
);
}
};
const load = () => {
if (document.getElementById("giscus-script")) return;
const s = document.createElement("script");
s.id = "giscus-script";
s.src = "https://giscus.app/client.js";
s.async = true;
s.crossOrigin = "anonymous";
s.setAttribute("data-loading", "lazy");
const attrs = {
"data-repo": config.repo,
"data-repo-id": config.repoId,
"data-category": config.category,
"data-category-id": config.categoryId,
"data-mapping": config.mapping,
"data-strict": config.strict,
"data-reactions-enabled": config.reactionsEnabled,
"data-emit-metadata": config.emitMetadata,
"data-input-position": config.inputPosition,
"data-theme": getTheme(),
"data-lang": config.lang,
};
Object.entries(attrs).forEach(([k, v]) => v && s.setAttribute(k, v));
s.onload = () => setTimeout(sendTheme, 600);
document.getElementById("tw-comment").appendChild(s);
};
const observe = () => {
["#theme-toggle", "#theme-toggle-float", "[data-theme-toggle]", ".theme-switch"].forEach(
(sel) => {
const el = document.querySelector(sel);
if (el && !el.dataset.giscus) {
el.dataset.giscus = "true";
el.addEventListener("click", () => setTimeout(sendTheme, 150));
}
}
);
window.addEventListener("storage", (e) => e.key === "pref-theme" && sendTheme());
document.addEventListener("themeChanged", sendTheme);
};
document.readyState === "loading"
? document.addEventListener("DOMContentLoaded", () => {
load();
observe();
})
: (load(), observe());
window.refreshGiscusTheme = sendTheme;
})();
</script>
{{- /* /safeJS */ -}}
|