feat(评论): 改进Giscus评论区的主题切换功能

重构Giscus评论区加载逻辑,支持动态切换主题并适配暗黑模式
添加MutationObserver监听主题变化,实时更新评论界面
支持Swup页面切换时的评论组件重新加载
更新文章文档中的注意事项说明
This commit is contained in:
二叉树树
2026-01-09 19:05:07 +08:00
parent 162c2ea9a4
commit 2e98a35105
2 changed files with 61 additions and 16 deletions

View File

@@ -97,4 +97,6 @@ Build结束全绿
> [!CAUTION]
> ~~值得注意的是该项目似乎仅实现了手机端的大部分API而针对于电脑浏览器插件使用的API暂未支持我们目前正在尝试用AI补全... Just a moment...~~
> 已支持电脑端浏览器插件
> 更多注意事项请参阅仓库README
> 已支持电脑端浏览器插件
>

View File

@@ -166,21 +166,64 @@ const jsonLd = {
<!-- Giscus 评论区 -->
<script src="https://giscus.app/client.js"
data-repo="afoim/giscus-fuwari"
data-repo-id="R_kgDOOi8quw"
data-category="Announcements"
data-category-id="DIC_kwDOOi8qu84CprDV"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
data-loading="lazy"
crossorigin="anonymous"
async>
<div id="giscus-container"></div>
<script is:inline>
function loadGiscus() {
const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
const script = document.createElement('script');
script.src = "https://giscus.app/client.js";
script.setAttribute("data-repo", "afoim/giscus-fuwari");
script.setAttribute("data-repo-id", "R_kgDOOi8quw");
script.setAttribute("data-category", "Announcements");
script.setAttribute("data-category-id", "DIC_kwDOOi8qu84CprDV");
script.setAttribute("data-mapping", "pathname");
script.setAttribute("data-strict", "0");
script.setAttribute("data-reactions-enabled", "1");
script.setAttribute("data-emit-metadata", "0");
script.setAttribute("data-input-position", "top");
script.setAttribute("data-theme", theme);
script.setAttribute("data-lang", "zh-CN");
script.setAttribute("data-loading", "lazy");
script.setAttribute("crossorigin", "anonymous");
script.async = true;
const container = document.getElementById('giscus-container');
if (container) {
container.innerHTML = '';
container.appendChild(script);
}
}
// 监听主题变化
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
const iframe = document.querySelector('iframe.giscus-frame');
if (iframe) {
const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
iframe.contentWindow.postMessage({
giscus: {
setConfig: {
theme: theme
}
}
}, 'https://giscus.app');
}
}
});
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
// 初始加载
loadGiscus();
// 支持 Swup 页面切换
document.addEventListener('swup:contentReplaced', loadGiscus);
</script>
<br>