 |
Résumé | DiscoTOC vous permettra de générer une table des matières interactive 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 dans les thèmes Discourse ? | Guide du débutant pour utiliser les thèmes Discourse |
Installer ce composant de thème
Exemples
Bureau
Mobile
Fonctionnalités
toc = table des matières
-
Génère automatiquement toute la toc via un bouton dans le menu engrenage de l’éditeur
-
La toc reste toujours à l’écran - elle défile avec le contenu comme le widget de progression du sujet
-
Au fur et à mesure que vous faites défiler les sections du sujet, l’élément actif dans la table des matières sera mis en surbrillance (surlignage bleu)
-
ajoute des attributs id aux titres (vous pouvez lier à une section spécifique depuis un autre sujet / message)
-
cliquer sur n’importe quel lien dans la toc indiquera 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)
-
Prise en charge du RTL (écriture de droite à gauche)
-
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 une toc (via le bouton de l’éditeur) et s’il s’avère que le sujet actuel est marqué, alors il prend tous les titres et les place dans la toc (imbriqués dans l’ordre des niveaux de titre) - 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 titre, mais l’ordre doit être correct
# titre 2
## titre 3
## titre 3
### titre 4
## titre 3
# titre 2
etc...
Pour que les liens dans la toc fonctionnent, les titres doivent avoir des attributs id. Le composant vérifiera si les titres ont déjà des id et, s’ils en ont, ils seront respectés. C’est pratique si vous avez créé manuellement une toc.
Si les titres n’ont pas d’id, il en générera un 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 pointe directement vers cette section :
Paramètres
| Nom | Description |
|---|---|
| niveau de confiance minimum pour créer une TOC | Le niveau de confiance minimum qu’un utilisateur doit avoir pour voir le bouton TOC dans l’éditeur |
| texte toc de l’éditeur | Texte qui apparaît en haut du panneau d’aperçu de l’éditeur pour indiquer que le sujet aura une table des matières |
| catégories TOC automatique | Activer automatiquement la TOC sur les sujets dans ces catégories |
| tags TOC automatique | Activer automatiquement la TOC sur les sujets avec ces tags |
| titre min TOC | Nombre minimum de titres dans un sujet pour que la table des matières soit affichée |
Traductions
| Traduction | Défaut |
|---|---|
| table_of_contents | table des matières |
| insert_table_of_contents | Insérer une table des matières |
| jump_bottom | Aller au bas |
| toggle_toc.show_timeline | Chronologie |
| toggle_toc.show_toc | Contenu |
Le thème vient avec trois chaînes que vous pouvez traduire ou modifier.
table_of_contents: "table des matières"
cela est utilisé pour le bouton qui ouvre la toc sur mobile
insert_table_of_contents: "Insérer une table des matières"
cela est utilisé comme texte pour le bouton toc dans le menu engrenage de l’éditeur
topic_will_contain_a_table_of_contents: "Ce sujet contiendra une table des matières"
C’est le texte qui s’affiche dans l’aperçu de l’éditeur pour indiquer qu’une toc sera générée pour le sujet
Comment créer une toc ?
- Écrivez un sujet avec des titres syntaxiquement corrects
- Cliquez sur le bouton toc dans le menu engrenage (n’apparaît que lors de la création d’un sujet régulier - les réponses et les MP sont ignorés
- Profit.
Que se passe-t-il pour le widget de progression du sujet lorsqu’un sujet a une toc ?
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 une toc, le widget de progression du sujet est masqué tant que le premier message est à l’écran, et vous voyez la toc à la place.
Une fois que vous faites défiler au-delà du premier message, la toc ne défilera pas avec vous et la progression du sujet sera affichée à la place pendant que vous lisez les réponses.
Donc, les premiers messages obtiennent la toc, et les messages suivants obtiennent le widget de progression du sujet régulier.
Cela se produit à la fois sur le bureau et sur mobile.
Y a-t-il des inconvénients à utiliser ce composant ?
Rien dont je sois conscient, tous les changements sont faits côté client. Donc vous pouvez facilement retirer le composant et vos messages reviendront à leur état avant que vous ne l’installiez.
Limitations
Ce composant suppose la mise en page standard des sujets. Par conséquent, il ne fonctionnera pas avec les thèmes qui modifient cette mise en page, comme le thème Vincent. La prise en charge des thèmes populaires qui modifient la mise en page sera disponible à une étape ultérieure sous forme de paramètres du composant.
Crédits
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, donc il s’agit essentiellement d’un hard-fork qui supprime beaucoup de fonctionnalités inutiles, intègre et style le reste pour Discourse.
Ainsi, il n’y a pas de requêtes externes et la taille totale est d’environ 4 ko gzip.
Un grand merci à @erlend_sh pour ses précieux commentaires et à @david pour son aide avec les traductions.
Hébergé par nous ? Les composants de thème sont disponibles à l’utilisation sur nos plans Pro, Business et Enterprise.