reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 03:32:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: implement giscus comment

Browse source
This commit is contained in:
shinya 2025-04-07 00:16:11 +08:00
parent 2dd5410300
commit d1df76e2c2
No known key found for this signature in database
GPG key ID: A27DBCC544F50A01
8 changed files with 338 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/components/Comments/Giscus.astro Normal file
View file

@ -0,0 +1,78 @@
---
import { themeConfig } from "@/config";
const {
repo = "",
repoID = "",
category = "",
categoryID = "",
mapping = "pathname",
inputPosition = "top",
lang = "zh-CN",
loading = "lazy",
} = themeConfig.comment?.giscus ?? {};
---
<div class="giscus mt-16" id="giscus-container"></div>
<script
is:inline
define:vars={{
repo,
repoID,
category,
categoryID,
mapping,
inputPosition,
lang,
loading,
}}
>
const host = window.location.origin;
function loadGiscus() {
const existingScript = document.querySelector("script[src*='giscus.app']");
if (existingScript) {
existingScript.remove();
}
const giscusContainer = document.getElementById("giscus-container");
if (giscusContainer) giscusContainer.innerHTML = "";
// 创建新脚本
const theme = document.documentElement.classList.contains("dark")
? host + "/css/giscus_dark.css"
: host + "/css/giscus_light.css";
const script = document.createElement("script");
script.src = "https://giscus.app/client.js";
script.setAttribute("data-repo", repo);
script.setAttribute("data-repo-id", repoID);
script.setAttribute("data-category", category);
script.setAttribute("data-category-id", categoryID);
script.setAttribute("data-mapping", mapping);
script.setAttribute("data-strict", "0");
script.setAttribute("data-reactions-enabled", "1");
script.setAttribute("data-theme", theme);
script.setAttribute("data-emit-metadata", "0");
script.setAttribute("data-input-position", inputPosition);
script.setAttribute("data-lang", lang);
script.setAttribute("data-loading", loading);
script.crossOrigin = "anonymous";
script.async = true;
giscusContainer.appendChild(script);
}
function changeGiscusTheme() {
const iframe = document.querySelector("iframe.giscus-frame");
if (!iframe) return;
const theme = document.documentElement.classList.contains("dark")
? host + "/css/giscus_dark.css"
: host + "/css/giscus_light.css";
iframe.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app",
);
}
document.addEventListener("DOMContentLoaded", loadGiscus);
document.addEventListener("theme-changed", changeGiscusTheme);
document.addEventListener("astro:page-load", loadGiscus);
</script>