## Giscus とは
### 導入
Giscus は GitHub の Discussions 機能を利用することで、SSG ベースのサイトにコメント機能を付与する仕組みです。Web サイトが Git によって管理されていれば、簡単に導入することができます。
giscus
A comments widget built on GitHub Discussions.
ただし、リポジトリが以下の条件を満たしている必要があります：
- Public リポジトリである
- Giscus↗ アプリがインストールされている
- リポジトリの Discussions 機能が有効化されている
### 基本の実装
上のサイトからもろもろの設定を行ったら、Giscus の埋め込みを行うための <script> がわかります。次のような Astro コンポーネントを作成します：
src/components/Comments.astro
---
---
<section>
<script src="https://giscus.app/client.js"
data-repo="[リポジトリを記述]"
data-repo-id="[リポジトリIDを記述]"
data-category="[カテゴリ名を記述]"
data-category-id="[カテゴリIDを記述]"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="dark_dimmed"
data-lang="ja"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
</section>
これを記事詳細ページを生成する [slug].astro で読み込むだけです：
src/pages/[slug].astro
---
import Comments from "../../components/Comments.astro";
---
...
<Comments />
...
## ダークモード対応
この Issue が参考になります。
Dynamic theme changing available? · Issue #336 · giscus/giscus
Hello, is dynamic theme changing available? Because, I want this to change the theme automatically, according to the website.
<script> タグを埋め込むのではなく、document.createElement("script") で動的にスクリプトを生成するのがミソです。theme は localStorage から引っ張ってこれるようにします。
src/components/Comments:astro
---
---
<div id="comments" />
<script>
const theme = window.localStorage.getItem("theme") ?? (document.documentElement.classList.contains("dark") ? "dark" : "light");
const giscusTheme = theme === "dark" ? "theme_dark" : "theme_light";
const giscusAttributes: GiscusAttributes = {
src: "https://giscus.app/client.js",
"data-repo": "s-inoue0108/siwl-dev",
"data-repo-id": "R_kgDOM92vyA",
"data-category": "Announcements",
"data-category-id": "DIC_kwDOM92vyM4Clpeq",
"data-mapping": "pathname",
"data-reactions-enabled": "1",
"data-emit-metadata": "0",
"data-theme": giscusTheme,
"data-lang": "ja",
"data-loading": "lazy",
crossorigin: "anonymous",
async: "",
};
const giscusScript = document.createElement("script");
Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
document.getElementById("comments")!.appendChild(giscusScript);
</script>
また、Tailwind CSS で class スタイルのダークモードを導入している場合は、こちらの記事↗の実装が参考になると思います。
記事がありません