Sono entusiasta di condividere un nuovo componente del tema che aggiunge eleganti layout di timeline alla tua community di Discourse!
Questo è il mio primo componente del tema, creato con l’assistenza di LLM.
Cos’è?
Discourse Timelines è un componente del tema che implementa il BBCode personalizzato [timelines]...[/timelines] per creare bellissimi e minimalisti layout di timeline. Perfetto per roadmap di progetti, guide passo passo, cronologie aziendali, divisioni di capitoli e altro ancora.
BBCode personalizzato - Semplice sintassi [timelines] Pulsante Barra degli Strumenti Composer - Non è necessario digitare manualmente i tag (risolve il problema di escaping delle parentesi del nuovo editor!) Design Bellissimo - Linea a gradiente verticale con un’estetica pulita e minimalista Supporto Markdown - Preserva tutta la formattazione all’interno delle timeline Multilingua - Traduzioni integrate per 9 lingue (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU) Compatibile con Temi - Funziona sia con la modalità chiara che scura Personalizzabile - Cambia facilmente i colori tramite le impostazioni dell’amministratore Reattivo - Layout ottimizzato per dispositivi mobili Sicuro - Protezione XSS integrata Nessuna Dipendenza - Utilizza solo le API native di Discourse
Utilizzo
Utilizzo del Pulsante Barra degli Strumenti (Il più facile!)
Apri il composer
Fai clic sul pulsante del menu “+” (opzioni)
Seleziona “Inserisci Timeline”
Modifica il tuo contenuto
Pubblica!
Il pulsante della barra degli strumenti risolve il problema per cui il nuovo editor di Discourse esegue automaticamente l’escape delle parentesi quadre digitate manualmente.
Esempio di Sintassi
[timelines]
## Gennaio 2024 - Lancio Progetto
Il progetto è stato ufficialmente avviato e il team è stato formato.
## Marzo 2024 - Prima Release
Sviluppo delle funzionalità principali completato e iniziati i test beta.
## Giugno 2024 - Versione 2.0
Aggiornamento importante con nuove funzionalità:
- Funzionalità A
- Funzionalità B
- Funzionalità C
[/timelines]
Personalizzazione
Tutti i colori possono essere personalizzati tramite le impostazioni del tema:
timeline_gradient_start - Colore del gradiente superiore (predefinito: #ff7a18)
timeline_gradient_end - Colore del gradiente inferiore (predefinito: #ffb800)
timeline_heading_color - Colore del testo dell’intestazione (predefinito: #d96d14)
timeline_dot_color - Colore del punto della timeline (predefinito: #ff7a18)
timeline_heading_color_dark - Colore dell’intestazione in modalità scura (predefinito: #ff9854)
timeline_dot_border_color_dark - Bordo del punto in modalità scura (opzionale)
Spero che questo componente ti sia utile! Fammi sapere se hai domande, feedback o suggerimenti.
Quando lo si utilizza in un post con l’autoTOC, spicca perché si basa sulle intestazioni markdown di livello 2 e 3. C’è un modo per spostarlo in modo che utilizzi le intestazioni di livello 4 o 5 invece/in aggiunta per maggiore flessibilità?
Se la timeline appare più in basso nella gerarchia del TOC, come dopo un’intestazione di livello 2 o 3, il TOC appare visivamente disordinato.
EDIT: Posso racchiuderlo tra i tag [details] e questo impedisce la visualizzazione delle intestazioni della Timeline nel TOC. Una soluzione ragionevole per i miei scopi, per quanto possa servire.
Questi vengono visualizzati come H2/H3 all’interno della timeline ma non sono trattati come vere intestazioni, quindi l’autoTOC rimane ordinato indipendentemente da dove si trovi la timeline.
Se vuoi che le intestazioni di una timeline rimangano nel TOC, continua a usare i normali ##/###.
Al momento, se c’è anche un singolo ##! (o ###!) all’interno di [timelines], il TOC salterà l’intera timeline.
Mescolare entrambi gli stili nella stessa timeline non è ancora supportato.
Ora puoi mescolarli: ##/### compaiono ancora nel TOC, mentre ##!/###! vengono visualizzati solo all’interno della timeline e rimangono fuori dal TOC.
Il codice sembra attivarsi ovunque [timelines] sia presente nel post, anche se racchiuso tra apici inversi di codice come sopra. Anche l’escape con la barra rovesciata \\[timelines] non sembra fare differenza.
ETA: i tag [timelines] e [/timelines] sembrano ignorare i ritorni a capo e apparire sulla stessa riga del testo più vicino nei blocchi di codice con tre apici inversi ```
Quindi
[timelines]
Blah
Blah
[/timelines]
Appare come
[timelines]Blah
Blah[/timelines]
Ho riscontrato questo problema mentre scrivevo una guida per usarlo, quindi è probabilmente solo un caso limite.
BBCode personalizzato - Semplice sintassi [timelines]
