giscus

Un système de commentaires reposant sur le système de Discussions GitHub. Permettez aux visiteurs de votre site web de laisser des commentaires et des réactions via GitHub ! Fortement inspiré par utterances.

Note :
giscus est toujours en développement actif. De même, GitHub développe toujours activement son système de Discussions et l'API correspondante. Dès lors, certaines fonctionalités de giscus peuvent ne plus fonctionner ou changer à l'avenir.

Comment cela fonctionne ?

Lorsque giscus se charge, l'API de recherche des discussions de GitHub est utilisée pour trouver la discussion associée à la page en fonction d'un mappage choisi (URL, pathname, <title>, etc.). Si aucune discussion correspondante ne peut être trouvée, le robot giscus créera automatiquement une nouvelle discussion la première fois que quelqu'un laissera un commentaire ou une réaction.

Pour commenter, les visiteurs doivent autoriser l'application giscus à publier en leur nom en utilisant le flux OAuth de GitHub. Les visiteurs peuvent également commenter directement la discussion sur GitHub. Vous pouvez modérer les commentaires sur GitHub.

Configuration

Langue

Choisir la langue d'affichage de giscus. Vous ne trouvez pas votre langue ? Contribuez à la traduction.

Dépôt

Choisir le dépôt auquel giscus se connectera. Bien vérifier que :

  1. Le dépôt est public, sinon les visiteurs ne pourront pas voir les discussions.
  2. L'application giscus est installée, sinon les visiteurs ne pourront pas commenter ni réagir.
  3. Les Discussions sont activées en autorisant cette fonctionnalité pour votre dépôt.

Un dépôt GitHub public. Ce dépôt sera celui utilisé pour lier les discussions.

Mappage Pages ↔️ Discussions

Choisir le système de mappage entre les pages web et les discussions correspondantes.

giscus cherchera une discussion dont le titre contient le chemin (pathname URL) de la page.

giscus cherchera une discussion dont le titre contient l'URL de la page.

giscus cherchera une discussion dont le titre contient le tag HTML <title> de la page.

giscus cherchera une discussion dont le titre contiendra le contenu du tage HTML <meta property="og:title"> de la page.

giscus cherchera une discussion dont le titre contient un terme spécifique.

giscus chargera une discussion spécifique identifiée par son numéro. Cette option ne permets pas la création automatique d'une nouvelle discussion.

Évitez les correspondances incorrectes en raison de la méthode de recherche floue de GitHub lorsqu'il existe plusieurs discussions avec des titres similaires. Consultez la documentation pour plus de détails.

Catégorie de la Discussion

Choisir la catégorie de discussion associée aux nouvelles discussions créées par giscus. Il est recommandé de choisir une catégorie de type Announcements afin que les nouvelles discussions ne puissent être créées que par les administrateurs et giscus.

Lors de la recherche d'une discussion correspondante (mappage), giscuss ne cherchera que parmi les discussions de cette catégorie.

Fonctionnalités

Choisir des fonctionnalités spécifiques à activer.

Les réactions au message principal de la discussion seront affichées avant les commentaires.

Les métadonnées de la discussion seront envoyées périodiquement à la fenêtre parente (la page d'incorporation). Pour la démonstration, activez cette option et ouvrez la console de votre navigateur sur cette page. Consultez la documentation pour plus de détails.

La zone de saisie des commentaires sera placée au-dessus des commentaires, afin que les utilisateurs puissent laisser un commentaire sans faire défiler la discussion jusqu'en bas.

Le chargement des commentaires sera différé jusqu'à ce que l'utilisateur défile près du conteneur de commentaires. Cela se fait en ajoutant loading="lazy" à l'élément <iframe>.

Thème

Choisir un thème qui correspond au site. Vous ne trouvez pas de thème adapté ? Proposer un nouveau thème.

Activer giscus

Ajouter le code suivant (tag HTML <script>) dans le gabarit de vos pages web à l'endroit où vous souhaitez afficher les commentaires. Si un élément HTML possède la classe CSS giscus existe, les commentaires seront à cet endroit.

Vous n'avez pas configuré votre référentiel et/ou catégorie. Les valeurs de ces champs ne seront pas affichées tant que vous ne les aurez pas remplis.
<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        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="fr"
        crossorigin="anonymous"
        async>
</script>

Vous pouvez personnaliser la disposition du conteneur à l'aide des sélecteurs .giscus et .giscus-frame de la page d'incorporation.

Si vous utilisez giscus, pensez à starifier 🌟 giscus sur GitHub et à ajouter le sujet giscus à votre dépôt ! 🎉

Utilisation avancée

Vous pouvez ajouter des configurations supplémentaires (par exemple, autoriser des origines spécifiques) en suivant le guide d'utilisation avancée.

Pour utiliser giscus avec React, Vue ou Svelte, consultez la bibliothèque de composants giscus.

Migration

Si vous avez déjà utilisé d'autres systèmes qui utilisent les issues de GitHub (par exemple utterances, gitalk), vous pouvez convertir les issues existantes en discussions. Après la conversion, assurez-vous simplement que le mappage entre les titres des discussions et les pages est correct, ensuite giscus utilisera automatiquement les discussions.

Sites utilisant giscus

Contribuer

Voir le fichier CONTRIBUTING.md

Essayez ! 👇👇👇

Powered by Vercel