Je suis ravi de partager un nouveau composant de thème qui ajoute des agencements de chronologie élégants à votre communauté Discourse !
Ceci est mon premier composant de thème, construit avec l’aide de LLM.
Qu’est-ce que c’est ?
Discourse Timelines est un composant de thème qui implémente un BBCode personnalisé [timelines]...[/timelines] pour créer de beaux agencements de chronologie minimalistes. Parfait pour les feuilles de route de projet, les guides étape par étape, les historiques d’entreprise, les divisions de chapitres, et plus encore.
BBCode personnalisé - Syntaxe simple [timelines] Bouton de la barre d’outils de l’éditeur - Pas besoin de taper les balises manuellement (résout le problème d’échappement des crochets du nouvel éditeur !) Beau design - Ligne de gradient verticale avec une esthétique épurée et minimaliste Support Markdown - Préserve toute la mise en forme à l’intérieur des chronologies Multilingue - Traductions intégrées pour 9 langues (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU) Compatible avec les thèmes - Fonctionne avec les modes clair et sombre Personnalisable - Changez facilement les couleurs via les paramètres d’administration Réactif - Agencement adapté aux mobiles Sûr - Protection XSS intégrée Aucune dépendance - Utilise uniquement les API natives de Discourse
Utilisation
Utilisation du bouton de la barre d’outils (Le plus simple !)
Ouvrez l’éditeur
Cliquez sur le bouton du menu “+” (options)
Sélectionnez “Insérer une chronologie”
Modifiez votre contenu
Publiez !
Le bouton de la barre d’outils résout le problème où le nouvel éditeur Discourse échappe automatiquement les crochets tapés manuellement.
Exemple de syntaxe
[timelines]
## Janvier 2024 - Lancement du projet
Le projet a été officiellement lancé et l'équipe a été formée.
## Mars 2024 - Première version
Le développement des fonctionnalités principales a été achevé et les tests bêta ont commencé.
## Juin 2024 - Version 2.0
Mise à jour majeure avec de nouvelles fonctionnalités :
- Fonctionnalité A
- Fonctionnalité B
- Fonctionnalité C
[/timelines]
Personnalisation
Toutes les couleurs peuvent être personnalisées via les paramètres du thème :
timeline_gradient_start - Couleur du dégradé supérieur (par défaut : #ff7a18)
timeline_gradient_end - Couleur du dégradé inférieur (par défaut : #ffb800)
timeline_heading_color - Couleur du texte du titre (par défaut : #d96d14)
timeline_dot_color - Couleur du point de la chronologie (par défaut : #ff7a18)
timeline_heading_color_dark - Couleur du titre en mode sombre (par défaut : #ff9854)
timeline_dot_border_color_dark - Bordure du point en mode sombre (facultatif)
J’espère que vous trouverez ce composant utile ! N’hésitez pas à me faire part de vos questions, commentaires ou suggestions.
Lors de son utilisation dans une publication avec l’autoTOC, il se démarque en s’appuyant sur le markdown des en-têtes 2 et 3. Existe-t-il un moyen de le faire passer à l’utilisation des en-têtes 4 ou 5 à la place/en plus pour plus de flexibilité ?
Si la chronologie apparaît plus bas dans la hiérarchie du TOC, comme après un en-tête 2 ou 3, cela donne au TOC un aspect visuellement désordonné.
EDIT : Je peux l’encapsuler dans des balises [details] et cela supprime les en-têtes de la chronologie de l’affichage dans le TOC. Solution de contournement raisonnable pour mes besoins, pour information.
Ceux-ci s’affichent comme des H2/H3 à l’intérieur de la chronologie mais ne sont pas traités comme de vrais titres, donc l’autoTOC reste propre, quel que soit l’emplacement de la chronologie.
Si vous souhaitez que les titres d’une chronologie restent dans la TOC, continuez à utiliser les ##/### normaux.
Actuellement, s’il y a ne serait-ce qu’un seul ##! (ou ###!) à l’intérieur de [timelines], la TOC ignorera toute la chronologie.
Mélanger les deux styles dans la même chronologie n’est pas encore pris en charge.
Vous pouvez les mélanger maintenant : ##/### apparaissent toujours dans la TOC, tandis que ##!/###! s’affichent uniquement à l’intérieur de la chronologie et restent en dehors de la TOC.
[timelines]
##! 2020 - Foudnation
Content...
###! March
Content
[/timelines]
Mais pas pour deux pseudo-en-têtes suivant une autre liste de formatage :
[timelines]
##! 2020 - Foundation
* Listicle
###! March
Dooooooom!
[/timelines]
Le premier pseudo-en-tête préfère également être en ligne avec la balise ouvrante [timelines] pour éviter de formater une ligne vide au-dessus. Comme :
[timelines]##! 2020 - Foundation
Content...
[/timelines]
Sinon, il y a un espace au-dessus du premier pseudo-en-tête comme s’il s’agissait d’une ligne de bloc de chronologie normale, non-en-tête.
Merci pour votre travail là-dessus, il devient incroyablement flexible à utiliser maintenant.
Le code semble également s’activer partout où [timelines] est présent dans la publication, même s’il est entouré d’accents graves de code comme ci-dessus. L’échappement avec une barre oblique inverse \\[timelines] ne semble pas non plus faire de différence.
ETA : les balises [timelines] et [/timelines] semblent échapper aux sauts de ligne et apparaître sur la même ligne que le texte le plus proche dans les blocs de code avec trois accents graves ```
Donc
[timelines]
Blah
Blah
[/timelines]
Apparaît comme
[timelines]Blah
Blah[/timelines]
Rencontré ceci lors de la rédaction d’un guide pour l’utiliser, c’est donc probablement juste un cas limite.
BBCode personnalisé - Syntaxe simple 
