giscus を使ってブログにコメント機能を追加する
Published Feb 23, 2025
⋅
Updated Mar 15, 2025
Dependency
"@giscus/react": "^3.1.0"giscus は、GitHub Discussions を使ったコメントシステム。データは GitHub Discussions にストアされる。
giscus を利用するには、次の条件を満たす必要がある。
- リポジトリが public であること
- giscus アプリがインストールされていること
- GitHub Discussions を有効にすること
導入と設定を行うには、giscus にアクセスする。 このページで入力を進めていくと最後に <script> タグを提示してくれるので、サイト内の適当な場所に貼り付ける。
React で使う場合は、 giscus/giscus-component というものがあるのでこれを使う。
pnpm add @giscus/reactそして、インポートした <Giscus /> コンポーネントに、上述の設定ページで確認した内容を props として渡す。
このブログは Next.js で作成しているので、次のような内容でコンポーネント用のファイルを作成した。 useTheme() を使ってテーマも切り替わるようにしている。
"use client";
import Giscus from "@giscus/react";
import { useTheme } from "next-themes";
export const Comments = () => {
const { resolvedTheme } = useTheme();
return (
<div className="mt-12">
<Giscus
id="comments"
repo="osgsm/osgsm.io-v2"
repoId="R_kgDONdFYBw"
categoryId="DIC_kwDONdFYB84CnNrT"
mapping="pathname"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="bottom"
theme={resolvedTheme}
lang="en"
loading="lazy"
/>
</div>
);
};
以上で、コメント機能が追加される。どのようなコメント欄が追加されるかは、この投稿の最下部をチェック。
参考