Utterances – コメント機能を簡単に実装する

「utterances」とはコメント機能を手軽に実装できるオープンソースです。

• 主な特徴は以下の4点です。
• 広告なし、ずっと無料
• スクリプトを置くだけ
• テーマ(ダークモードなど)を選べる
• コメントを自分のGitHubに蓄積できる

GitHub issueの検索APIを内部で使用しており、コメントは全て指定したタイトルでGitHubのissueに蓄積されます。一般的なissueと同じようにコメントの通知や絵文字のリアクションも即時に反映されます。

マークダウン形式で書けることも良さの一つです。

前提条件として、

• GitHubレポジトリーがpublicであること
• Utterancesアプリがインストールされていること

が必須となります。

あとは以下のスクリプトをコメントを設置したい場所に置くだけです。

   <script src="https://utteranc.es/client.js"
        repo="レポジトリーの名前"
        issue-term="タイトル"
        label="ラベル"
        theme="テーマ"
        crossorigin="anonymous"
        async>
    </script>

設定項目を見てみましょう。

レポジトリーの名前には、以下のように[GitHubユーザー名]/[レポジトリー名]の形式で入れます。

farfloat/Blog

タイトルには、コメントされたページのパスや、URL、タイトルなどを指定できます。これによってどのページにコメントされたかがissue一覧から判断できたり、絞り込めたりします。

ラベルには、issueにおいてコメントであることを区別する任意のフラグを設定できます。

最後にテーマには現在(2022年1月7日)、以下の9つのテーマを指定できます。

• github-light
• github-dark
• preferred-color-scheme
• github-dark-orange
• icy-dark
• dark-blue
• photon-dark
• boxy-light
• gruvbox-dark

ReactやVue、Sveltleのコンポーネントもあるみたいです！

https://github.com/TomokiMiyauci/utterances-component

ぜひ、試してみてください！

本家サイト　=> https://utteranc.es/