Aperçu de ghost-giscus-plugin
Par défaut, ce plugin a placé les commentaires de cette page juste après le corps de l'article. Changez le placement, la marge et la présence d'une zone de commentaires pour abonnés dans le panneau de gauche, et les vrais commentaires se déplacent en conséquence.
Pour commencer
giscus monte les commentaires dans n'importe quel élément de la page qui porte la classe giscus. Ce plugin ne fait que créer cet élément à l'endroit voulu. Les commentaires eux-mêmes restent servis par giscus et stockés dans GitHub Discussions, donc rien n'est réimplémenté.
Installation
Sur Ghost, collez les deux scripts ci-dessous dans Paramètres, injection de code, pied de page du site. Le premier est ce plugin ; le second est la balise officielle 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>L'ordre compte
Ce plugin doit figurer avant le script giscus. giscus décide où monter à l'instant où il s'exécute, en cherchant un élément giscus, donc notre script doit d'abord créer cet emplacement. Inversez l'ordre et les commentaires atterrissent sur la balise du script.
Options
Tout se règle avec des options sur la balise script : à quel élément s'ancrer (data-target), où l'attacher autour de lui (data-place, l'un de replace, append, prepend, before, after), la ou les classes ajoutées au conteneur de montage (data-class, séparées par des espaces pour en mettre plusieurs et hériter du style de votre thème), et les quatre côtés de la marge (data-padding-top, data-padding-right, data-padding-bottom, data-padding-left, en px). Quand l'élément cible est introuvable, une garde de page retire le script giscus pour que les commentaires n'atterrissent pas au mauvais endroit ; désactivez-la avec data-guard="false".
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"Choisir un emplacement
Deux formes couvrent la plupart des cas : placer les commentaires juste après l'article, ou remplacer un bloc de commentaires existant. Les deux sont détaillées ci-dessous, l'une après l'autre.
Le placer après l'article
La valeur par défaut recommandée est data-target=".gh-content" data-place="after" data-class="gh-comments gh-canvas" data-padding-bottom="48". Elle crée le point de montage juste après le corps de l'article (.gh-content) et hérite des classes gh-comments gh-canvas du thème, si bien que l'espacement et la largeur paraissent natifs. C'est le choix le plus sûr, car le corps de l'article existe toujours sur chaque page. Contrairement à une zone de commentaires réservée aux membres qui peut être masquée, la cible ne disparaît jamais, donc le comportement reste identique partout.
<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>Remplacer un bloc de commentaires existant
Si votre thème possède déjà un bloc de commentaires, réutilisez son emplacement avec data-target=".gh-comments" data-place="replace". Cela reproduit <div class="gh-comments gh-canvas giscus"></div> par la seule code injection, sans modifier le thème, vous héritez donc de la position et du style déjà définis par le thème. À privilégier lorsqu'un bloc correspondant existe. La réserve : les commentaires natifs de Ghost sont réservés aux membres, donc sur les sites qui les désactivent l'élément .gh-comments peut ne pas exister du tout. Dans ce cas, utilisez la valeur par défaut ci-dessus qui place après l'article.
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-comments"
data-place="replace"></script>Configuration de giscus
Le lien du dépôt, la catégorie et le repo-id proviennent du site officiel de giscus. Saisissez-y votre dépôt et il construit la balise giscus prête à coller.
Questions fréquentes
Les commentaires apparaissent sur la balise du script, pas là où je les veux.
Votre script du plugin est après le script giscus. Intervertissez-les pour que ce plugin passe en premier.
Je ne veux des commentaires que sur certaines pages.
Pointez l'ancre vers un élément qui n'existe que sur ces pages. Quand le sélecteur ne correspond à rien, le plugin ne fait rien, donc viser un élément propre aux articles garde les commentaires sur les articles.
Je veux l'espacement des commentaires de mon thème.
Si la règle est dans la feuille de style de votre thème, ajoutez sa classe avec data-class pour en hériter ; sinon, définissez la valeur directement avec data-padding-bottom.
Conclusion
C'est un outil léger qui laisse le giscus officiel intact et se contente de le placer pour vous. Une ligne et le bon ordre, et il se comporte de la même façon sur n'importe quel site.