小波Note

仕組み

giscus が読み込まれると、GitHub Discussions 検索 API を使用して、選択されたマッピング方法（例：URL、pathname、title など）に基づいて現在のページに関連するディスカッションを検索します。一致するディスカッションが見つからない場合、giscus bot は誰かが初めてコメントやリアクションを残したときに自動的にディスカッションを作成します。

訪問者がコメントを残すには、GitHub OAuth フローを通じて giscus アプリに代理投稿を許可するか、GitHub Discussion で直接コメントする必要があります。コメントは GitHub 上で管理できます。

GitHub Discussions の有効化

1. 公開リポジトリを作成し、リポジトリの Settings -> Options -> Features で Discussions 機能を有効にします。

2. リポジトリの Discussions ページでコメントを保存する新しいカテゴリを作成します。

GitHub Apps に Giscus をインストール

リンク giscus app にアクセスし、Install をクリックしてリポジトリを選択し、Giscus アプリをインストールします。

Giscus の設定

giscus config website で設定します。

以下の情報を順に入力します：

• リポジトリ名
• ページとコメントのマッピング方法（私は多言語なので、pathnameを選択できません。そうでないと、/xxx、/en/xxx、/ja/xxxなど、複数のコメントテーマが表示されます）
• リポジトリカテゴリ

次に、このコードをコピーします。

nuxt にインストール

        npm install @giscus/vue

    

        "devDependencies": {
    "@giscus/vue": "^3.0.0"
}

    

        <script setup lang="ts">
import Giscus from '@giscus/vue'
import 'giscus';
</script>

<template>
    <Giscus
        id="comments"
        repo="it-fb/it-fb-comment"
        repoid="xxx"
        category="Comment"
        categoryid="xxx"
        mapping="specific"
        :term="blog"
        reactionsenabled="1"
        emitmetadata="0"
        inputposition="top"
        :theme="color.value"
        :lang="locale === 'zh' ? 'zh-CN' : locale"
        loading="lazy"
    />
</template>