ghost-giscus-plugin プレビュー
このページのコメントは、既定に従ってこのプラグインが本文のすぐ後ろに配置したものです。左のパネルで位置や余白、購読者向けコメント欄の有無を変えると、実際のコメントもそれに合わせて動きます。
はじめに
giscus は、ページ上に giscus クラスを持つ要素があると、その中にコメントをマウントします。このプラグインは、その要素を好きな位置に作るだけです。コメントの実際の動作と保存は引き続き giscus と GitHub Discussions が担うため、何かを新たに実装することはありません。
インストール
Ghost では、設定のコードインジェクションのサイトフッターに、下の二つのスクリプトを貼り付けます。一つ目がこのプラグイン、二つ目が公式の giscus タグです。
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"></script>
<script src="https://giscus.app/client.js"
data-repo="[YOUR REPO]"
data-repo-id="[REPO ID]"
data-category="[CATEGORY]"
data-category-id="[CATEGORY ID]"
data-mapping="pathname"
data-theme="preferred_color_scheme"
crossorigin="anonymous"
async></script>順序が重要です
このプラグインのスクリプトは、必ず giscus スクリプトより先に置く必要があります。giscus は実行された瞬間に giscus 要素があるかを確認して位置を決めるため、こちらのスクリプトが先にその場所を作っておかなければなりません。順序が逆になると、コメントがスクリプトタグの位置に付いてしまいます。
オプション設定
動作はすべてスクリプトタグのオプションで設定します。どの要素を基準にするか (data-target)、その要素を基準にどこへ付けるか (data-place: replace, append, prepend, before, after の五種類)、マウント用ラッパーに付けるクラス (data-class、空白区切りで複数指定でき、テーマのスタイルをそのまま継承します)、そして四方向の余白 (data-padding-top, data-padding-right, data-padding-bottom, data-padding-left、単位は px) です。基準要素が見つからない場合は、ページガードが giscus スクリプトを取り除き、コメントが誤った場所に付くのを防ぎます。この動作が不要なら data-guard="false" で無効にします。
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"位置を決める
よく使う形は二つです。一つは本文のすぐ後ろに置く方法、もう一つは既存のコメントブロックをそのまま置き換える方法です。以下で順に見ていきます。
本文の後ろに置く
推奨される既定値は data-target=".gh-content" data-place="after" data-class="gh-comments gh-canvas" data-padding-bottom="48" です。本文 (.gh-content) のすぐ後ろにマウント地点を作り、テーマの gh-comments gh-canvas クラスを継承するので、余白も幅もテーマになじんだ見た目になります。この方法が最も安全なのは、本文はどのページにも必ず存在するからです。購読者にしか表示されず隠れてしまうことのあるコメント欄と違い、対象が消える心配がなく、どこでも同じように動作します。
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"></script>既存のコメントブロックを置き換える
テーマにすでにコメントブロックがある場合は、data-target=".gh-comments" data-place="replace" でその場所を再利用します。テーマファイルを触らず、code injection だけで <div class="gh-comments gh-canvas giscus"></div> をそのまま再現できるので、テーマが定めた位置とスタイルを引き継げます。合致するブロックがあるときに向いています。ただし注意点として、Ghost の標準コメントは購読者向けのため、それを無効にしているサイトでは .gh-comments 要素そのものが存在しないことがあります。その場合は上の本文の後ろに置く既定値を使ってください。
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-comments"
data-place="replace"></script>giscus の設定
リポジトリの連携やカテゴリ、repo-id などの値は、giscus 公式サイトで発行します。下でリポジトリを入力すると、貼り付ける giscus タグをそのまま生成します。
よくある質問
コメントが思った場所ではなく、スクリプトの位置に付いてしまいます。
このプラグインのスクリプトが giscus スクリプトより後ろにある場合です。順序を入れ替えて、このプラグインを先に置いてください。
特定のページにだけコメントを付けたいです。
基準要素がそのページにだけ存在すれば大丈夫です。セレクタが一致しなければ何もしないので、投稿ページにだけある要素を data-target に指定すれば、自然と投稿ページにだけ付きます。
テーマのコメント余白をそのまま使いたいです。
テーマのスタイルシートに規則があれば data-class でそのクラスを付けて継承し、なければ data-padding-bottom で値を直接指定します。
おわりに
公式の giscus はそのままに、位置だけをこちらで決めてあげる薄いツールです。一行のコードと正しい順序さえ守れば、どのサイトでも同じように動作します。