giscus.app Open in urlscan Pro
76.223.126.88  Public Scan

Form analysis
0 forms found in the DOM

Text Content

giscus2021年5月15日
アプリ


GISCUS

GitHub
Discussionsを利用したコメントシステムです。サイト訪問者にGitHubを利用したコメント・リアクション機能を提供しましょう！このプロジェクトはutterancesから着想を得ています。

 * オープンソース。 🌏
 * 追跡や広告は無く、無料です。 📡 🚫
 * データベースは不要です。全データはGitHub Discussionsに保管されます。
 * カスタムテーマに対応! 🌗
 * 多言語に対応。 🌐
 * 詳細な設定項目。 🔧
 * 自動的に新しいコメントと編集内容をGitHubから取得します。 🔃
 * セルフホスティングが可能! 🤳

> 注記
> giscusは現在も活発に開発が行われています。GitHubも同様にDiscussionsとそのAPIの開発を活発に行っています。そのため、giscusの機能の一部が正常に動作しなくなったり、変更されたりする場合があります。


仕組み

giscus読み込み時にGitHub Discussions search
APIを利用してページ連携設定(URL、パス、<title>など)に基づき紐づけられたDiscussionを読み込みます。もし紐づけられたDiscussionがない場合、giscusは最初にコメントやリアクションが為された際に自動的にDiscussionを作成します。

サイト訪問者のコメントはgiscus appによって訪問者に代わって投稿されるために、GitHub OAuth
flowを利用した連携設定が行われる必要があります。あるいは、サイト訪問者はGitHub
Discussionに直接コメントすることも可能です。コメントはGitHub上で管理することができます。


設定


言語

giscusの利用する言語を指定してください。 お使いの言語が見つからない場合は、翻訳データを送信してみてください。

言語العربيةбългарскиCatalàČeštinaDanskDeutschEnglishEsperantoEspañolفارسیFrançaisΕλληνικάSrpsko-HrvatskiעבריתMagyarIndonesiaItaliano日本語ភាសាខ្មែរ한국어NederlandsPolskiPortuguêsRomânăРусскийภาษาไทยTürkçeViệt
NamУкраїнськаO'zbek简体中文繁體中文


リポジトリ

giscusが利用するリポジトリを指定してください。 次のことを確認してください:

 1. リポジトリが公開状態である。訪問者が閲覧できる必要があります。
 2. giscusアプリがインストールされている。訪問者がコメントやリアクションを追加するのに必要です。
 3. Discussions機能を有効化するに従ってDiscussions機能が有効化されている

リポジトリ:

Discussionsが連携されるGitHubのリポジトリが公開状態である。


ページとDISCUSSIONS連携設定

ページとコメントの連携方法を指定してください

Discussionのタイトルにページのpathnameを利用する

giscusはページのpathnameを含むページを検索します。

DiscussionのタイトルにページのURLを利用する

giscusはページのURLを含むページを検索します。

Discussionのタイトルに<title>タグを利用する

giscusはページの<title>タグの値を含むページを検索します。

Discussionタイトルにog:titleを利用する

giscusはページの<meta property="og:title">タグの値を含むページを検索します。

Discussionタイトルに特定の条件を利用する

giscusは特定の条件文を含むページを検索します。

指定のDiscussions番号

giscusはDiscussionを指定された番号から読み込みます。この方法では自動でDiscussionが生成されません。

厳密なタイトル一致を使用する

類似したタイトルのディスカッションが複数ある場合は、GitHubのあいまい検索方法による不一致を回避します。詳細はドキュメントをご参照ください。


DISCUSSIONで使用するカテゴリ

新しいDiscussionsの作成時に使用するカテゴリを指定してください。
新しいDiscussionsの作成を管理者とgiscusのみが実施できるようにするために、Announcementsカテゴリを利用することを推奨します。

Discussionで使用するカテゴリカテゴリが見つかりませんでした
このカテゴリのみを検索します

Discussionの検索時にgiscusはこのカテゴリのみを検索します


機能

有効にしたい機能を選択してください。

記事へのリアクションを有効にする

コメントの前にリアクションを表示する

Discussionのメタデータを出力する

Discussionのメタデータは定期的に親画面に送信されます。詳細はこのオプションを有効にしてブラウザのコンソールウィンドウを開くことで確認できます。詳細はドキュメントをご参照ください。

コメントの上にコメントボックスを配置します

コメント入力ボックスはコメントの上に配置されるため、ユーザーはディスカッションの一番下までスクロールせずにコメントを残すことができます。

コメントのロードを遅延させる

コメントの読み込みは、ユーザーがコメントコンテナの近くをスクロールした後に実行されます。 これは、
loading="lazy"を<iframe>要素に追加することで実行されます。


テーマ

Webサイトに適したテーマを選択してください。良いものが見つからない場合は、自分で作成して私たちに送信することもできます。

テーマGitHub LightGitHub Light ContrastGitHub Light Protanopia & DeuteranopiaGitHub
Light TritanopiaGitHub DarkGitHub Dark ContrastGitHub Dark Protanopia &
DeuteranopiaGitHub Dark TritanopiaGitHub Dark Dimmedカラースキームに従うTransparent
DarkNoBorder LightNoBorder DarkNoBorder GrayRStudio CobaltPurple Darkカスタム (試験的)


GISCUSを有効にする

下記の <script>
コードタグをお使いのWebサイトのコメントを表示したい場所に追加してください。もし、giscusクラスを持つ要素が存在する場合、giscusは当該要素にコメントを表示します。

リポジトリやカテゴリを構成していません。 これらのフィールドの値は、入力するまで表示されません。

<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="preferred_color_scheme"
        data-lang="ja"
        crossorigin="anonymous"
        async>
</script>



.giscus と .giscus-frame セレクタを利用することで、レイアウトをカスタマイズすることができます。

giscusを利用する場合は、giscusにGitHubスター🌟を付けたり、giscusをリポジトリのトピックに追加したりしていただけると幸いです! 🎉


上級者向け機能

追加の設定(特定オリジンのみの許可など)については上級者向け機能ガイドをご参照ください。

giscusをReactやVue、Svelteで利用する場合はgiscusコンポーネントライブラリをご参照ください。


移行

もし以前GitHub
Issuesを利用したツール(utterancesやgitalkなど)を使用していた場合、既存のIssueをDiscussionに移管する事が出来ます。移管後はDiscussionタイトルが連携設定に基づき正しく設定されていることを確認してください。その後は、giscusが自動的にDiscussionを利用します。


GISCUSを利用しているサイト

 * laymonage.com
 * os.phil-opp.com
 * Stats and R
 * Tech Debt Burndown Podcast
 * 他多数


貢献するには

CONTRIBUTING.mdをご参照ください。


試してみる 👇👇👇