GitHub Discussionsを利用した静的ウェブサイト向けコメントシステム「Giscus」

Table of Contents

概要

Giscusは、静的ウェブサイトにコメントフォームを埋め込むためのGitHub Discussions上に構築されたコメントシステムです。

メリット：

無料、軽量、見た目がクール
コメントは自分のリポジトリのGitHub Discussionsに保存される
コメントするにはGitHubログインが必要（スパム防止）

デメリット：

GitHubアカウントを持たない訪問者はコメントできない（しかし技術ブログには問題なし）

Giscus vs utterances

Giscusはutterancesから強くインスパイアされています。主要なコンセプトと使用方法はほぼ同じですが、いくつかの違いがあります。

Gisccus
- コメントを保存するためにGitHub Discussionsを使用
- utterancesよりも豊富な機能（例：リアクション、投票）
utterances
- コメントを保存するためにGithub Issuesを使用

私はこのブログにGiscusを採用しました。なぜなら、GitHub IssuesよりもGitHub Discussionsの方がコメントを保存するのに適していると感じたからです。

インストール

インストール手順：

リポジトリでDiscussions機能を有効にする（GitHub documentを参照）（giscus-botがこのリポジトリのDiscussionsにコメントを書き込みます。ブログリポジトリを使用するか、コメント専用の新しいリポジトリを作成してください）
リポジトリにGiscus Appをインストールします。
giscus.appでjavascriptを作成します。いくつかのオプションをカスタマイズできます。
スクリプトをコピーしてブログコードに追加します。

スクリプトの例は以下のようになります：

<script
  src="https://giscus.app/client.js"
  data-repo="user/repository"
  data-repo-id="xxxxxxx"
  data-category="Comments"
  data-category-id="xxxxxx"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="top"
  data-theme="dark"
  data-lang="en"
  crossorigin="anonymous"
  async
></script>

動的なテーマ変更

ページテーマの変更に合わせてGiscusのテーマを動的に変更するには、いくつかのコーディングが必要です。

私は、Hugoで動作する私のブログにこの機能を実装するために、Issueのこのコメントを参照しました。

以下のコードをhtmlに追加しました。

<script>
    var theme = localStorage.getItem('data-theme') == null ? 'dark' : 'light';
</script>

<div class="comments">
    <script src="https://giscus.app/client.js"
        data-repo="user/repository"
        data-repo-id="xxxxxxx"
        data-category="Comments"
        data-category-id="xxxxxx"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="dark"
        data-lang="en"
        crossorigin="anonymous"
        async>
    </script>
</div>

<script>
    document.querySelector('script[src="https://giscus.app/client.js"]').setAttribute('data-theme', theme);
</script>

その後、javascriptのテーマ変更機能にこのスクリプトも追加しました。

    const initTheme = (state) => {
        if (state === THEMES.DARK) {
            document.documentElement.classList.add(THEMES.DARK);
            document.documentElement.classList.remove(THEMES.LIGHT);
+            setGiscusTheme(THEMES.DARK);
        } else if (state === THEMES.LIGHT) {
            document.documentElement.classList.remove(THEMES.DARK);
            document.documentElement.classList.add(THEMES.LIGHT);
+            setGiscusTheme(THEMES.LIGHT);
        }
    };

+    function setGiscusTheme(theme) {
+        var iframe = document.querySelector('.giscus-frame');
+
+        if (iframe) {
+        var url = new URL(iframe.src);
+        url.searchParams.set('theme', theme);
+        iframe.src = url.toString();
+        }
+    }

詳細については私のブログテーマリポジトリを参照してください。

GitHub Discussions

Giscusシステムはこのブログのコメントを私のブログリポジトリのDiscussionsに保存します。