reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-17 12:01:33 +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>

16
src/components/Comments/index.astro
View file

@ -1,6 +1,6 @@
---
// import Disqus from '@/components/Comments/Disqus.astro'
// import Giscus from '@/components/Comments/Giscus.astro'
import Giscus from '@/components/Comments/Giscus.astro'
// import Twikoo from '@/components/Comments/Twikoo.astro'
import Waline from '@/components/Comments/Waline.astro'
import { themeConfig } from '@/config'
@ -9,22 +9,22 @@ const enableComments = themeConfig.comment?.enabled ?? false
// Disqus
// const disqusShortname = themeConfig.comment?.disqus?.shortname || ''
// const showDisqus = enableComments && disqusShortname.trim() !== ''
// const showDisqus = enableComments && themeConfig.comment.provider == 'disqus' && disqusShortname.trim() !== ''
// Giscus
// const giscusRepo = themeConfig.comment?.giscus?.repo || ''
// const showGiscus = enableComments && giscusRepo.trim() !== ''
Giscus
const giscusRepo = themeConfig.comment?.giscus?.repo || ''
const showGiscus = enableComments && themeConfig.comment.provider == 'giscus' && giscusRepo.trim() !== ''
// Twikoo
// const twikooEnvId = themeConfig.comment?.twikoo?.envId || ''
// const showTwikoo = enableComments && twikooEnvId.trim() !== ''
// const showTwikoo = enableComments && themeConfig.comment.provider == 'twikoo' && twikooEnvId.trim() !== ''
// Waline
const walineURL = themeConfig.comment?.waline?.serverURL || ''
const showWaline = enableComments && walineURL.trim() !== ''
const showWaline = enableComments && themeConfig.comment.provider == 'waline' && walineURL.trim() !== ''
---
<!-- {showDisqus && <Disqus />} -->
<!-- {showGiscus && <Giscus />} -->
{showGiscus && <Giscus />}
<!-- {showTwikoo && <Twikoo />} -->
{showWaline && <Waline />}