 |
Résumé | DiscoTOC vous permettra de générer un sommaire interactif pour vos sujets en un seul clic ! |
 |
Aperçu | Aperçu sur Discourse Theme Creator |
 |
Lien du dépôt | https://github.com/discourse/DiscoTOC |
 |
Nouveau sur les thèmes Discourse ? | Guide pour débutants sur l’utilisation des thèmes Discourse |
Installer ce composant de thème
Exemples
Bureau
Mobile
Fonctionnalités
toc = sommaire
-
Génère automatiquement l’intégralité du sommaire via un bouton dans le menu d’engrenage du compositeur
-
Le sommaire restera toujours à l’écran - il défile avec le contenu comme le widget de progression du sujet
-
Au fur et à mesure que vous défilez au-delà des sections du sujet, l’élément actif dans le sommaire sera mis en évidence (surlignage bleu)
-
Ajoute des attributs d’ID aux titres (vous pouvez lier à une section spécifique depuis un autre sujet / message)
-
Cliquer sur n’importe quel lien dans le sommaire ordonnera au navigateur de naviguer vers la section pertinente (défilement fluide)
-
Ajoute un lien copiable à côté de chaque titre (si vous souhaitez y lier)
-
Support RTL
-
Les couleurs sont basées sur votre palette de couleurs active actuelle
Comment ça marche ?
En résumé, il recherche les titres dans les sujets qui sont marqués pour avoir un sommaire (via le bouton du compositeur) et s’il s’avère que le sujet actuel est marqué, il prend tous les titres et les place dans le sommaire (imbriqués selon le niveau des titres) - cela signifie que votre markdown doit être syntaxiquement correct.
# titre 1
## titre 2
### titre 3
#### titre 4
##### titre 5
###### titre 6
Vous êtes libre de revenir en arrière et d’avancer dans les niveaux de titres, mais l’ordre doit être correct.
# titre 2
## titre 3
## titre 3
### titre 4
## titre 3
# titre 2
etc...
Pour que les liens dans le sommaire fonctionnent, les titres doivent avoir des attributs d’ID. Le composant vérifiera si les titres ont déjà des IDs et, si c’est le cas, ils seront respectés. Ceci est pratique si vous avez déjà créé un sommaire manuellement.
Si les titres n’ont pas d’IDs, il générera un ID pour chaque titre basé sur son texte (les caractères indésirables sont supprimés).
Une fois tout cela fait, il ajoutera également un lien à côté de chaque bouton qui mène directement à cette section :
Paramètres
| Nom | Description |
|---|---|
| niveau de confiance minimum pour créer un TOC | Le niveau de confiance minimum qu’un utilisateur doit avoir pour voir le bouton TOC dans le compositeur |
| texte toc compositeur | Texte qui apparaît en haut du panneau d’aperçu du compositeur pour indiquer que le sujet aura un sommaire |
| catégories auto TOC | Activer automatiquement le TOC sur les sujets dans ces catégories |
| tags auto TOC | Activer automatiquement le TOC sur les sujets avec ces tags |
| titre min TOC | Nombre minimum de titres dans un sujet pour que le sommaire soit affiché |
Traductions
| Traduction | Défaut |
|---|---|
| table_of_contents | sommaire |
| insert_table_of_contents | Insérer le sommaire |
| jump_bottom | Aller à la fin |
| toggle_toc.show_timeline | Chronologie |
| toggle_toc.show_toc | Contenu |
Le thème est livré avec trois chaînes que vous pouvez traduire ou modifier.
table_of_contents: "sommaire"
Ceci est utilisé pour le bouton qui ouvre le sommaire sur mobile.
insert_table_of_contents: "Insérer le sommaire"
Ceci est utilisé comme texte pour le bouton TOC dans le menu d’engrenage du compositeur.
topic_will_contain_a_table_of_contents: "Ce sujet contiendra un sommaire"
C’est le texte qui apparaît dans l’aperçu du compositeur pour indiquer qu’un sommaire sera généré pour le sujet.
Comment créer un sommaire ?
- Écrivez un sujet avec des titres syntaxiquement corrects
- Cliquez sur le bouton TOC dans le menu d’engrenage (apparaît uniquement lors de la création d’un sujet régulier - les réponses et les MP sont ignorés)
- C’est fait.
Que devient le widget de progression du sujet lorsqu’un sujet a un sommaire ?
Comme vous pouvez probablement le deviner, il n’y a pas d’espace pour afficher les deux en même temps, donc la façon dont ce composant fonctionne est la suivante :
Dans un sujet avec un sommaire, le widget de progression du sujet est masqué tant que le premier message est à l’écran, et vous voyez le sommaire à la place.
Une fois que vous avez défilé au-delà du premier message, le sommaire ne défilera plus avec vous et la progression du sujet sera affichée à la place pendant que vous lisez les réponses.
Ainsi, les premiers messages obtiennent le sommaire, et les messages suivants obtiennent le widget de progression du sujet régulier.
Cela se produit à la fois sur bureau et mobile.
Y a-t-il des inconvénients à utiliser ce composant ?
Rien à ma connaissance, tous les changements sont effectués côté client. Vous pouvez donc facilement supprimer le composant et vos messages reviendront à l’état où ils étaient avant que vous ne l’installiez.
Limitations
Ce composant suppose la disposition standard des sujets. Par conséquent, il ne fonctionnera pas avec les thèmes qui modifient cette disposition, comme le thème Vincent. Le support des thèmes populaires qui modifient la disposition sera disponible à un stade ultérieur sous forme de paramètres de composant.
Crédit
J’ai commencé avec la bibliothèque tocify.js de Greg Franko. Cependant, il semble qu’elle n’ait pas été mise à jour depuis un moment, il s’agit donc essentiellement d’un fork dur qui supprime de nombreuses fonctionnalités inutiles, intègre et stylise le reste pour Discourse.
Ainsi, il n’y a aucune requête externe et la taille totale est d’environ 4 ko gzip.
Un grand merci à @erlend_sh pour ses nombreux retours précieux et à @david pour son aide avec les traductions.
Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos plans Pro, Business et Entreprise.