 |
Riepilogo | DiscoTOC ti consentirà di generare un indice interattivo per i tuoi argomenti con un solo clic! |
 |
Anteprima | Anteprima su Discourse Theme Creator |
 |
Link al repository | https://github.com/discourse/DiscoTOC |
 |
Novizio dei temi di Discourse? | Guida introduttiva all’uso dei temi di Discourse |
Installa questo componente tema
Esempi
Desktop
Mobile
Funzionalità
toc = indice
-
Genera automaticamente l’intero indice tramite un pulsante nel menu ingranaggi del composer
-
L’indice rimane sempre visibile sullo schermo - scorre insieme ai contenuti come il widget di avanzamento dell’argomento
-
Mentre scorri oltre le sezioni dell’argomento, l’elemento attivo nell’indice verrà impostato come attivo (evidenziazione blu)
-
aggiunge attributi id alle intestazioni (puoi collegare una sezione specifica da un altro argomento/post)
-
cliccando su qualsiasi link nell’indice, il browser navigerà verso la sezione rilevante (scorrimento fluido)
-
aggiunge un link copiabile accanto a ciascuna intestazione (se desideri collegarla)
-
Supporto RTL (da destra a sinistra)
-
I colori si basano sulla tua palette di colori attiva corrente
Come funziona?
In sintesi, cerca le intestazioni negli argomenti che sono contrassegnate per avere un indice (tramite il pulsante del composer) e, se risulta che l’argomento corrente è contrassegnato, prende tutte le intestazioni e le inserisce nell’indice (annidate in ordine di livello di intestazione) - ciò significa che il tuo markdown deve essere sintatticamente corretto.
# intestazione 1
## intestazione 2
### intestazione 3
#### intestazione 4
##### intestazione 5
###### intestazione 6
Puoi liberamente tornare indietro e avanti tra i livelli di intestazione, ma l’ordine deve essere corretto
# intestazione 2
## intestazione 3
## intestazione 3
### intestazione 4
## intestazione 3
# intestazione 2
ecc...
Affinché i link nell’indice funzionino, le intestazioni devono avere attributi id. Il componente controllerà se le intestazioni hanno già degli id e, se sì, li rispetterà. Questo è utile se hai mai creato manualmente un indice.
Se le intestazioni non hanno id, ne genererà uno per ciascuna intestazione basato sul suo testo (i caratteri indesiderati vengono rimossi)
una volta fatto tutto ciò, aggiungerà anche un link accanto a ciascun pulsante che porta direttamente a quella sezione:
Impostazioni
| Nome | Descrizione |
|---|---|
| livello di fiducia minimo per creare l’indice | Il livello di fiducia minimo che un utente deve avere per vedere il pulsante dell’indice nel composer |
| testo indice composer | Testo che appare nella parte superiore del pannello di anteprima del composer per indicare che l’argomento avrà un indice |
| categorie indice automatico | Abilita automaticamente l’indice per gli argomenti in queste categorie |
| tag indice automatico | Abilita automaticamente l’indice per gli argomenti con questi tag |
| intestazione minima indice | Numero minimo di intestazioni in un argomento affinché l’indice venga visualizzato |
Traduzioni
| Traduzione | Default |
|---|---|
| table_of_contents | indice |
| insert_table_of_contents | Inserisci indice |
| jump_bottom | Vai alla fine |
| toggle_toc.show_timeline | Cronologia |
| toggle_toc.show_toc | Contenuti |
Il tema include tre stringhe che puoi tradurre o modificare.
table_of_contents: "indice"
questa viene utilizzata per il pulsante che apre l’indice sul mobile
insert_table_of_contents: "Inserisci indice"
questa è utilizzata come testo per il pulsante dell’indice nel menu ingranaggi del composer
topic_will_contain_a_table_of_contents: "Questo argomento conterrà un indice"
Questo è il testo che appare nell’anteprima del composer per indicare che verrà generato un indice per l’argomento
Come creo un indice?
- Scrivi un argomento con intestazioni sintatticamente corrette
- Clicca sul pulsante dell’indice nel menu ingranaggi (appare solo durante la creazione di un argomento regolare - le risposte e le MP vengono ignorate)
- Profitto.
Cosa succede al widget di avanzamento dell’argomento quando un argomento ha un indice?
Come puoi probabilmente immaginare, non c’è spazio per mostrarli entrambi contemporaneamente, quindi il modo in cui questo componente funziona è il seguente:
in un argomento con un indice, il widget di avanzamento dell’argomento è nascosto mentre il primo post è sullo schermo, e vedi invece l’indice.
Una volta che scorri oltre il primo post, l’indice non scorre con te e viene mostrato invece l’avanzamento dell’argomento mentre leggi le risposte.
Quindi, i primi post ricevono l’indice, e i post successivi ricevono il widget di avanzamento dell’argomento regolare.
Questo avviene sia su desktop che su mobile.
Ci sono degli svantaggi nell’uso di questo componente?
Nessuno di cui io sia a conoscenza, tutte le modifiche vengono effettuate lato client. Quindi puoi facilmente rimuovere il componente e i tuoi post torneranno come erano prima dell’installazione.
Limitazioni
Questo componente presuppone il layout standard degli argomenti. Di conseguenza, non funzionerà con temi che modificano tale layout, come il tema Vincent. Il supporto per i temi popolari che modificano il layout arriverà in una fase successiva sotto forma di impostazioni del componente.
Crediti
Ho iniziato con la libreria tocify.js di Greg Franko. Tuttavia, sembra che non sia stata aggiornata da un po’, quindi questo è essenzialmente un hard-fork che rimuove molte funzionalità non necessarie, integra e stilizza il resto per Discourse.
Quindi, non ci sono richieste esterne e la dimensione totale è di circa 4kb gzip.
Un grande ringraziamento a @erlend_sh per il prezioso feedback e a @david per il suo aiuto nelle traduzioni.
Ospitato da noi? I componenti tema sono disponibili per l’uso sui nostri piani Pro, Business ed Enterprise.