DiscoTOC - table des matières automatique

:discourse2: Résumé DiscoTOC vous permet de générer une table des matières interactive pour vos sujets en un seul clic !
:eyeglasses: Aperçu Aperçu sur Discourse Theme Creator
:hammer_and_wrench: Lien du dépôt https://github.com/discourse/DiscoTOC
:open_book: Nouveau sur les thèmes Discourse ? Guide 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 table des matières via un bouton dans le menu des paramètres du rédacteur

  • La table des matières sera toujours visible à l’écran - elle défile avec le contenu comme le widget de progression du sujet

  • Lorsque vous défilez au-delà des sections du sujet, l’élément actif dans la table des matières sera mis en surbrillance (en bleu)

  • Chaque entrée de la table des matières pointe vers l’ancrage du titre, vous pouvez donc également lier une section spécifique depuis un autre sujet ou message

  • Cliquer sur n’importe quel lien de la table des matières indique au navigateur de naviguer vers la section concernée (défilement fluide)

  • Dans les sujets avec des réponses, un bouton Sommaire / Chronologie permet aux lecteurs de basculer entre la table des matières et la chronologie normale du sujet. Le choix est mémorisé dans le navigateur

  • Fonctionne avec le plugin Discourse Docs

  • Prise en charge optionnelle des tables des matières dans les réponses, pas seulement dans le premier message

  • Prise en charge RTL

Comment ça marche ?

En résumé, il recherche les titres dans les sujets qui sont marqués pour avoir une table des matières (via le bouton du rédacteur) et si le sujet actuel est marqué, il prend tous les titres et les met dans la table des matières (imbriqués selon l’ordre des niveaux de titres) - cela signifie que votre markdown doit être syntaxiquement correct.

# titre 1
## titre 2
### titre 3
#### titre 4
##### titre 5

Vous êtes libre d’aller en avant et en arrière dans les niveaux de titres, mais l’ordre doit être correct

# titre 2
## titre 3
## titre 3
### titre 4
## titre 3
# titre 2

etc...

Quelques choses à savoir sur les titres compatibles

  • h1 à h5 sont inclus. h6 ne l’est pas
  • Les titres à l’intérieur des citations sont ignorés, donc les citations ne pollueront pas la table des matières
  • La table des matières n’apparaît que si le message a au moins autant de titres que le paramètre Titre min. de la table des matières (3 par défaut)

Comment fonctionnent les liens dans la table des matières ?

Chaque titre dans un message cuit reçoit un ancrage sous la forme p-<id du message>-<slug du titre>-<nombre> — c’est la cible derrière un titre. DiscoTOC pointe vers ces ancres plutôt que d’en inventer ses propres.

Comme ces ancres incluent la position du titre dans le message, elles changent si vous réorganisez ou renommez les titres. Si vous liez des sections depuis ailleurs, vous pouvez ajouter des ancres nommées stables au-dessus du titre :

<div><a name="ma-section"></a></div>
## Ma section

Puis liez vers /t/votre-slug-de-sujet/1234#ma-section. Discourse permet <a name="..."> dans les messages. Les propres entrées de DiscoTOC utiliseront toujours les ancres de titres principales, mais les vôtres continueront de fonctionner indépendamment des modifications.

Paramètres

Nom Description
niveau de confiance minimum pour créer une table des matières Nécessaire pour voir le bouton de la table des matières dans le rédacteur
texte de la table des matières du rédacteur Texte qui apparaît en haut du rédacteur pour indiquer que le sujet aura une table des matières
catégories de table des matières automatique Activer automatiquement les catégories
tags de table des matières automatique Activer automatiquement la table des matières sur les sujets avec ces tags
activer la table des matières pour les réponses Permet la table des matières pour les réponses. Les tables des matières pour les réponses ne sont pas affectées par les paramètres tags de table des matières automatique et catégories de table des matières automatique et doivent être insérées manuellement
Titre min. de la table des matières Nombre minimum de titres dans un sujet pour que la table des matières soit affichée

texte de la table des matières du rédacteur est ce qui s’affiche dans l’aperçu du rédacteur pour indiquer qu’une table des matières sera générée :

Traductions

Traduction Défaut
table_of_contents table des matières
insert_table_of_contents Insérer la table des matières
jump_bottom Aller à la fin
toggle_toc.show_timeline Chronologie
toggle_toc.show_toc Sommaire
table_of_contents: "table des matières"

cela est utilisé pour le bouton qui ouvre la table des matières sur mobile

insert_table_of_contents: "Insérer la table des matières"

cela est utilisé comme texte pour le bouton de la table des matières dans le menu des paramètres du rédacteur

toggle_toc.show_toc: "Sommaire"
toggle_toc.show_timeline: "Chronologie"

ces étiquettes identifient le bouton qui bascule entre la table des matières et la chronologie du sujet

Comment créer une table des matières ?

  1. Écrivez un sujet avec des titres syntaxiquement corrects
  2. Cliquez sur le bouton de la table des matières dans le menu des paramètres du rédacteur. Par défaut, il n’apparaît que sur le premier message d’un sujet ; activez le paramètre activer la table des matières pour les réponses pour l’utiliser également dans les réponses
  3. Profitez-en.

Que se passe-t-il pour le widget de progression du sujet lorsqu’un sujet a une table des matières ?

Il n’y a pas assez d’espace pour afficher les deux en même temps, donc dans un sujet avec une table des matières, le widget de progression du sujet est masqué pendant que vous êtes sur le premier message, et vous voyez la table des matières à la place. Une fois que vous avez défilé au-delà du premier message, la table des matières est remplacée par le widget de progression du sujet normal pendant que vous lisez les réponses. (Avec activer la table des matières pour les réponses activé, une réponse qui a sa propre table des matières affiche celle-ci à la place.)

Dans les sujets avec plus d’un message, un bouton Sommaire / Chronologie permet aux lecteurs de basculer entre les deux, et la préférence est mémorisée dans leur navigateur.

Sur les écrans étroits, la table des matières s’ouvre en superposition via un bouton dans la zone de progression du sujet.

Y a-t-il des inconvénients à utiliser ce composant ?

Presque tout se passe côté client, donc vous pouvez supprimer le composant à tout moment et vos messages seront rendus comme avant. La seule chose qui touche votre contenu est le bouton du rédacteur : il enveloppe le message dans un marqueur <div data-theme-toc="true">, c’est ainsi que le composant sait que le message doit avoir une table des matières. Si vous désinstallez le composant, cet enveloppement reste dans le message mais n’a aucun effet visible.

Limitations

Les titres h6 et les titres à l’intérieur des citations ne sont pas inclus dans la table des matières.

Crédits

Cela a commencé comme un hard fork de la bibliothèque tocify.js de Greg Franko, et a depuis été réécrit comme des composants Ember natifs. Il n’y a aucune dépendance externe ni requête.

Un grand merci à @erlend_sh pour ses nombreux retours précieux et à @david pour son aide avec les traductions.

:discourse2: Hébergé par nous ? Les composants de thème sont disponibles pour utilisation sur nos plans Pro, Business et Enterprise.

182 « J'aime »
Automatic Table of Contents generation
Creative Uses of Discourse
Wiki improvement – Split content into multiple sections?
:cn: DiscoTOC 自动内容表格
Traditional multi level hierarchy vs flat discourse hierarchy
What are the different ways to customize content inside a post (custom attributes and such)
Is anyone working on a Discourse Wiki?
Tagged topic progress bar - feasible or not?
Big Header - Little Header
Timeline with labelled step by step sections - how is this achieved?
How to get topic navigation menu
Theme Components - Can Discourse hosted sites install them?
Reader Mode
How To Add Marker To Table Of Contents Feature?
How do you create a table of content like this one?
How can i show a floating sticky 300x250 Adsense Ad on right side bar of topic page above the fold?
How do I add a table of contents sidebar to a topic?
Cannot deep link to anchor in text
How can I compare arbitrary revisions of a post?
Understanding Discourse for new users
Problem with DiscoTOC: TypeError: _offsetCalculator.headerOffset is not a function
How to create an In-app Knowledge Base with Discourse Docs?
OP Contents on Progress Bar
How to get topic sidebar
Customizing your site with existing theme components
Link to headers (anchor links)
Outline Enable
What is essential content for a new community?
Tools for creating image-heavy articles
Layouts Plugin
Adding DiscoTOC to Published Pages
Customize Your Site Branding
Discourse Doc Categories
Gif icon not displaying and showing error
Must have plugins and components for Discourse?
I created a bookmarklet to create the table of content for forum posts
Could a List of Recommended Topics Be Added to the Top Menu?
?page=n URLs have high CLS hence bad SEO
Something recently changed, can't increase `--topic-body-width`
How to enable side navigation?
Displaying "full topic" text on category page + access to subcategory from menu bar
Improve iPad screen real estate
Missing anchor links in certain TOC topics?
DiscoTOC not showing in composer after latest component update
Missing anchor links in certain TOC topics?
How to create a documentation theme used by discourse
Where's Jump to end?
Handling anchors in posts created with markdown
Reader Mode
Hidden Timeline button
Horizon Theme
Collections
Bulk Export of Raw Post Sources with Markup
AI summary in topic header
Contents button and Timeline button floating unexpectedly
Living with corrupted SVGs for almost a year. Need Help!
Wiki table of contents on pro plan
Auto-Linkify Words
Missing strings (DiscoTOC)
Copy pasting nested lists from Word into a post
:cn: Discourse Post Formatting Guide 加点格式,让帖子多姿多彩
Require users to "Reply as Linked Topic"
Links not working
Using Posts as a Wiki?
Using Posts as a Wiki?
Is anyone working on a Discourse Wiki?
Using Posts as a Wiki?
Using Posts as a Wiki?
DiscoTOC & Brand Header - using together
Docs: Add link to top menu
More than two levels of [details]
Category page with fixed organization of topics
Blog Post Styling
Inlink the topics within the same article
Navigating to local URL fragment doesn't modify browser history
Relating to Profile Picture Scroll Functionality
Need to include PGN (chess game notation) in a post
How can I get a table of contents for my docs?
Linking to a heading within a post
Topic list on the right side
Set up Slack notifications using the discourse-chat-integration plugin
Wrong title in the history popup (firefox)
Possible to insert post in a topic
I created a bookmarklet to create the table of content for forum posts
How to add table of content sidebar beside a topic?

4 messages ont été déplacées vers un nouveau sujet : Comment déplacer la table des matières sur le côté gauche de l’article ?

Je ne sais pas comment ce composant est implémenté ni grand-chose sur la structure frontend de Discourse, donc je ne peux que faire une supposition.

Ne pourrait-on pas n’afficher la barre de progression a) que s’il y a plus d’un message dans le sujet et b) ajuster son début pour qu’il parte du 2e message (au lieu du 3e), mais aussi c) ajouter une marge inférieure/supérieure confortable à l’un des deux éléments pour s’assurer que l’autre reste suffisamment éloigné (par exemple 1vh) pour ne pas avoir un aspect étrange ?

En d’autres termes, au lieu d’utiliser l’intégralité du 2e message comme espace, utiliser du CSS pour permettre un certain espace entre eux (s’il y a plus d’un message).

Encore une fois, cela n’a peut-être aucun sens car je ne sais pas grand-chose sur la façon dont cela fonctionne actuellement.

3 « J'aime »

Bonjour ! Nous avons récemment installé DiscoTOC pour nos forums et nous nous demandions s’il était possible de faire en sorte que le composant lise le texte alternatif dans les images ? Nous avons utilisé des images pour certains en-têtes de notes de mise à jour…

comme ceci :
Performance and Stability

Et malheureusement, le système TOC ne semble pas être capable d’analyser une image comme un en-tête, créant une entrée vide dans la liste et créant un lien qui mène à une page vide. Existe-t-il une solution de contournement à cela, autre que « ne pas utiliser d’images » ? Merci ! Nous aimons beaucoup le système par ailleurs.

1 « J'aime »

Je suppose que la solution consiste à ne pas utiliser d’images comme titres, mais il sera peut-être possible d’y parvenir en ajoutant du code à votre site qui s’intègre au code de DiscoTOC. La pertinence d’examiner cela dépendra de l’importance que vous accordez à l’utilisation d’images dans les titres des publications.

3 « J'aime »

Nous utilisons des images comme en-têtes dans nos notes de mise à jour de manière constante depuis un certain temps, et cela fait partie de notre image de marque et de notre présentation ; non seulement sur les forums, mais aussi sur Steam et autres plateformes. Nous aimerions avoir la possibilité de continuer à utiliser des images comme en-têtes tout en utilisant DiscoTOC afin de maintenir notre cohérence.

DiscoTOC a été excellent pour d’autres choses, comme le récapitulatif d’une AMA (Ask Me Anything), un méga-post sur notre application de lancement de serveur dédié, des guides pour les nouveaux joueurs, etc. Nous apprécions beaucoup le système, mais nous aimerions une fonctionnalité supplémentaire pour la manière dont nous présentons les notes de mise à jour.

1 « J'aime »

La fonctionnalité d’ancre de titre sur ce composant entre légèrement en conflit avec la fonctionnalité Liens automatiques d’en-tête ajoutée dans la version 2.7.0beta6, car les titres affichent deux icônes au survol, une de Discourse et une de DiscoTOC. Y a-t-il un moyen de contourner ce problème ?

1 « J'aime »

Bonjour,

Vous pouvez masquer l’ancre Automatic header links avec

.anchor {
  display: none;
}

Bonjour dodesz,

J’ai rendu la largeur des publications beaucoup plus grande que celle par défaut, et après avoir installé ce composant, cela semble incorrect. Pourriez-vous me dire comment résoudre ce problème ?

:heart: merci !

Selection_839

1 « J'aime »

Sur un forum utilisant Discourse 2.8.0.beta4 (90232af778), l’activation du composant DiscoTOC entraîne un message d’erreur :

oops

Le composant avait déjà été activé et avait soulevé un problème avec la version précédente de Discourse, bien que je ne puisse pas dire de quelle version il s’agissait.

Êtes-vous en mesure de trouver des messages d’erreur liés au problème dans les journaux d’erreurs de votre site ?

Ce message d’erreur est une erreur de backend, tandis que DiscoTOC est un composant de thème de frontend, il est donc difficile qu’ils soient liés. Avez-vous installé des plugins ?

1 « J'aime »

Malheureusement, je n’ai rien trouvé d’utile dans /logs.

Oui, voici l’extrait pertinent de app.yml :

hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/discourse/discourse-openid-connect.git
          - git clone https://github.com/discourse/discourse-checklist.git
          - git clone https://github.com/discourse/discourse-push-notifications.git
          - git clone https://github.com/discourse/discourse-characters-required.git
          - git clone https://github.com/angusmcleod/discourse-news.git
          - git clone https://github.com/discourse/discourse-data-explorer.git
          - git clone https://github.com/DNOeV/discourse-watch-category.git
          - git clone https://github.com/discourse/discourse-footnote.git
          - git clone https://github.com/discourse/discourse-knowledge-explorer.git
1 « J'aime »

Lorsqu’un titre est dans une citation, il n’apparaît pas dans la table des matières (TOC). Ce comportement pourrait-il être modifié ?

Ce titre n’apparaîtra pas dans la TOC

Contenu cité

Ce titre apparaît bien dans la TOC

Contenu cité

Je ne sais pas comment cela est prévu pour fonctionner, mais normalement non, car cela fait partie de la citation, pas d’un titre de ce texte.

2 « J'aime »

Pourriez-vous essayer d’utiliser le <blockquote> HTML à la place ? Cela permettrait au titre # d’être au début d’une ligne.

Exemple :

<blockquote>

### En-tête d'ancre

</blockquote>

En-tête d’ancre

Je n’ai pas essayé dans une table des matières (TOC), mais cela semble fonctionner avec les en-têtes auto-ancrés dans une publication normale.

Pourquoi voulez-vous que les en-têtes entre guillemets apparaissent dans la table des matières ? Quel est votre cas d’utilisation ?

Merci pour l’idée. Cela n’a pas fonctionné pour moi, cependant.

Voici un exemple de quand j’utilise des citations pour structurer visuellement le contenu commençant sous Zone de problème : Âge

3 « J'aime »

Pourquoi utilisez-vous le guillemet de cette façon ? Indiquer la source suffit. De plus, grammaticalement, c’est faux, même en anglais.

Est-ce un bug ou juste un autre utilisateur, mais… comment dois-je fermer la table des matières (TOC) ? Je cherchais des instructions de base sur la façon dont un utilisateur final doit utiliser les messages privés et bien sûr, je suis allé dans la documentation pour les nouveaux utilisateurs et j’ai ouvert la TOC pour voir s’il y avait des informations.

J’utilisais un iPad et DiscourseHub.

J’ai obtenu ceci :

kuva

La TOC est très bien. Mais elle chevauche le texte et je n’ai pas réussi à la faire disparaître. Alors, qu’est-ce que j’ai fait de mal, ou rien du tout :pleading_face: