Collegamento a un'intestazione all'interno di un post o argomento

[Discourse]

Questa guida spiega come creare un collegamento diretto a un’intestazione all’interno di un post o argomento di Discourse, consentendo agli utenti di navigare in modo efficiente nei post lunghi.

Livello utente richiesto: Tutti gli utenti

Aggiungere intestazioni all’interno di post lunghi può rendere il contenuto più leggibile e consentire agli utenti di collegarsi direttamente a sezioni specifiche. Ciò può essere particolarmente utile per navigare in discussioni e documentazione estese.

Riepilogo

Questa guida copre:

• Creazione di intestazioni usando Markdown
• Collegamento diretto a intestazioni specifiche in un post

Creazione di intestazioni usando Markdown

Per creare un’intestazione in Markdown, anteponi una riga di testo a uno o più caratteri #. Il numero di caratteri # corrisponde al livello dell’intestazione. Ecco alcuni esempi:

## Questa è un'intestazione di livello 2
Qui segue un breve paragrafo.

### Questa è un'intestazione di livello 3
Qui segue un altro breve paragrafo.

Quando viene renderizzato, appare così:

---

Questa è un’intestazione di livello 2

Qui segue un breve paragrafo.

Questa è un’intestazione di livello 3

Qui segue un altro breve paragrafo.

---

Collegamento diretto a un’intestazione

Per condividere un collegamento diretto a un’intestazione all’interno di un post:

1. Passa il mouse sopra l’intestazione per visualizzare un’icona di collegamento accanto ad essa: .
2. Fai clic sull’icona di collegamento per aggiornare l’URL nella barra degli indirizzi del browser con il collegamento diretto a tale intestazione.
3. Copia l’URL aggiornato dalla barra degli indirizzi per condividerlo con altri.

L’icona di collegamento appare solo sui dispositivi desktop (non touch) quando si passa il mouse sopra un’intestazione. Sui dispositivi touch e mobili, gli anchor link esistono nella pagina ma non sono visibili.

Comprensione degli URL degli anchor delle intestazioni

Quando fai clic sull’icona di collegamento di un’intestazione, l’URL nella barra degli indirizzi si aggiorna con un frammento nel formato:

#p-{postId}-{slugified-heading}-{number}

Ad esempio, un’intestazione “Per iniziare” nel post 12345 produrrebbe un frammento di URL come #p-12345-per-iniziare-1. Il numero alla fine è un contatore sequenziale basato sulla posizione dell’intestazione nel post.

Pratiche consigliate

• Usa intestazioni descrittive per riepilogare chiaramente il contenuto.
• Struttura il tuo post utilizzando intestazioni gerarchiche quando appropriato.
• Assicurati che le intestazioni siano coerenti e logiche per una migliore leggibilità.
• Sii consapevole che la modifica del testo dell’intestazione o la riorganizzazione delle intestazioni modificherà i loro URL di anchor, il che potrebbe interrompere i collegamenti esistenti.

FAQ

Posso collegarmi a qualsiasi parte di un post?
Puoi collegarti a qualsiasi intestazione formattata correttamente in Markdown, a condizione che non si trovi all’interno di un blocco di citazione o di un blocco di citazione. Le intestazioni all’interno di tali blocchi non generano collegamenti di anchor.

I collegamenti alle intestazioni funzionano tra post diversi?
Sì! Questi collegamenti indirizzeranno all’intestazione nel post quando vengono utilizzati in altri argomenti o condivisi altrove.

Risorse aggiuntive

• Formattazione supportata nei post (markdown, BBCode e HTML)
• Guida interattiva a Markdown

[one1]

Non vedo le icone dei link su questo sito o sul mio. N
Né in FF né in Chrome.

È cambiato qualcosa?

[pfaffman (Jay Pfaffman)]

Devi passare il mouse sopra l’intestazione affinché appaiano:

[one1]

Passo il mouse sopra e non vedo nulla.

Sembra esserci qualcosa, ma non viene visualizzata alcuna icona.

Una domanda di follow-up…

Presumo che se si cambia il testo dell’intestazione, il link si interromperà.

MODIFICA PER AGGIUNGERE: Non solo l’ancora cambia se il titolo cambia, ma se si inserisce un’altra intestazione prima delle intestazioni esistenti, il suffisso numerico sull’intestazione cambia. Questo sembra fragile al punto da essere inutile.

L’unica soluzione sicura sarebbe racchiudere le intestazioni in tag a html e assegnare loro un id, corretto?

Modifica di nuovo per aggiungere: Ho provato sia a racchiudere il testo dell’intestazione in tag a che a inserire tag vuoti prima del testo dell’intestazione. Nessuno dei due id ha funzionato. Ho anche provato con i tag span con lo stesso fallimento.

[one1]

Sì, posso trovarlo nel DOM come before:

Sono su Windows 11.

L’unico modo in cui riesco a far apparire l’icona del link è copiando il link e poi aprendo quel link (con il # e l’id) in una nuova scheda e andando lì. Quindi l’icona del link viene visualizzata a tempo pieno (senza passaggio del mouse), ma comunque, nessuna delle altre icone del link apparirà al passaggio del mouse.

[one1]

Posso rilanciare questo? Mi chiedo se mi sto perdendo qualcosa di ovvio riguardo al collegamento all’interno di un post.

[markschmucker (Mark S)]

@one1

Passo il mouse sopra e non vedo nulla.

Sembra esserci qualcosa, ma non viene visualizzata alcuna icona.

Ho lo stesso problema. L’icona c’è, ma la sua opacità è impostata a zero, quindi non è visibile.

.cooked h1 a.anchor, .cooked h2 a.anchor, .cooked h3 a.anchor, .cooked h4 a.anchor, .cooked h5 a.anchor, .cooked h6 a.anchor, .d-editor-preview h1 a.anchor, .d-editor-preview h2 a.anchor, .d-editor-preview h3 a.anchor, .d-editor-preview h4 a.anchor, .d-editor-preview h5 a.anchor, .d-editor-preview h6 a.anchor

Specificity: (0,2,2)

{

opacity: 0;

transition: opacity .25s;

}

Non riesco a vedere le icone nemmeno nell’OP, quindi questo esclude qualsiasi stile personalizzato sulla mia istanza.

Sto usando Chrome.

[markschmucker (Mark S)]

Come questione separata, trovo che il link fornito dall’icona (invisibile) non funzioni dallo stesso argomento. Se l’icona mi fornisce:

https://forum.example.com/t/testing-anchors/63647#p-311503-heading-1

Devo creare il mio link usando solo #p-311503-heading-1, non l’URL completo. L’URL completo funziona se lo incollo nel browser.