 |
Riepilogo | DiscoTOC ti permetterà di generare un indice interattivo per i tuoi argomenti con un solo click! |
 |
Anteprima | Anteprima su Discourse Theme Creator |
 |
Link al Repository | https://github.com/discourse/DiscoTOC |
 |
Nuovo su Discourse Themes? | Guida per principianti all’uso di Discourse Themes |
Installa questo componente del tema
Esempi
Desktop
Mobile
Funzionalità
toc = indice dei contenuti
-
Genera automaticamente l’intero indice tramite un pulsante nel menu a ingranaggi del compositore
-
L’indice rimarrà sempre sullo schermo - scorre con il contenuto come il widget di avanzamento dell’argomento
-
Mentre scorri oltre le sezioni nell’argomento, l’elemento attivo nell’indice dei contenuti verrà impostato come attivo (evidenziazione blu)
-
Aggiunge attributi ID alle intestazioni (puoi collegarti a una sezione specifica da un altro argomento/post)
-
Cliccando su qualsiasi link nell’indice, il browser verrà istruito a navigare alla sezione pertinente (scorrimento fluido)
-
Aggiunge un link copiabile accanto a ogni intestazione (se desideri collegarti ad essa)
-
Supporto RTL
-
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 compositore) e, se risulta che l’argomento corrente è contrassegnato, prende tutte le intestazioni e le inserisce nell’indice (annidate in base al livello delle intestazioni) - ciò significa che il tuo markdown deve essere sintatticamente corretto.
# intestazione 1
## intestazione 2
### intestazione 3
#### intestazione 4
##### intestazione 5
###### intestazione 6
Sei libero di tornare avanti e indietro nei livelli delle intestazioni, 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ì, verranno rispettati. Questo è utile se hai mai creato manualmente un indice.
Se le intestazioni non hanno ID, ne genererà uno per ogni intestazione in base al suo testo (i caratteri indesiderati vengono rimossi).
Una volta completato tutto ciò, verrà aggiunto anche un link accanto a ogni pulsante che collega 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 compositore |
| testo indice del compositore | Testo che appare nella parte superiore del pannello di anteprima del compositore per indicare che l’argomento avrà un indice dei contenuti |
| categorie indice automatico | Abilita automaticamente l’indice negli argomenti in queste categorie |
| tag indice automatico | Abilita automaticamente l’indice negli argomenti con questi tag |
| intestazione minima indice | Numero minimo di intestazioni in un argomento affinché l’indice dei contenuti venga mostrato |
Traduzioni
| Traduzione | Predefinito |
|---|---|
| table_of_contents | indice dei contenuti |
| insert_table_of_contents | Inserisci indice dei contenuti |
| 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 dei contenuti"
Questa viene utilizzata per il pulsante che apre l’indice su mobile.
insert_table_of_contents: "Inserisci indice dei contenuti"
Questa viene utilizzata come testo per il pulsante dell’indice nel menu a ingranaggi del compositore.
topic_will_contain_a_table_of_contents: "Questo argomento conterrà un indice dei contenuti"
Questo è il testo che appare nell’anteprima del compositore 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 a ingranaggi (appare solo durante la creazione di un argomento regolare; le risposte e i messaggi privati vengono ignorati)
- Fatto.
Cosa succede al widget di avanzamento dell’argomento quando un argomento ha un indice?
Come puoi probabilmente immaginare, non c’è spazio per mostrare entrambi contemporaneamente, quindi il modo in cui funziona questo componente è il seguente:
in un argomento con un indice, il widget di avanzamento dell’argomento viene nascosto mentre il primo post è sullo schermo, e vedi l’indice al suo posto.
Una volta che scorri oltre il primo post, l’indice non scorrerà con te e verrà mostrato 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.
Ciò avviene sia su desktop che su mobile.
Ci sono degli svantaggi nell’uso di questo componente?
Niente 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 i 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 questa è essenzialmente una 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 grazie a @erlend_sh per il prezioso feedback e a @david per il suo aiuto con le traduzioni.
Ospitato da noi? I componenti del tema sono disponibili per l’uso nei nostri piani Pro, Business ed Enterprise.
grazie!
