Collegamenti header personalizzati

[Discourse]

	Riepilogo	Custom Header Links ti consente di aggiungere facilmente collegamenti testuali personalizzati all’intestazione.
	Anteprima	Anteprima su Discourse Theme Creator
	Link Repository	GitHub - discourse/discourse-custom-header-links · GitHub
	Nuovo sui Temi di Discourse?	Guida per principianti all’utilizzo dei temi di Discourse

Installa questo componente tema

Poiché questo è un componente tema official mantenuto dal team di Discourse, le richieste di Support, Contribute > Bug, Contribute > UX e Contribute > Feature possono essere effettuate nelle rispettive categorie qui su Meta, e taggate con il tag appropriato del componente tema. Clicca su un link qui sotto per iniziarne una.
Supporto Bug UX Funzionalità

---

Funzionalità

Desktop

Mobile

(a causa dello spazio molto limitato, non è consigliabile aggiungere più di un link su dispositivi mobili)

---

Impostazioni

Impostazione	Descrizione
custom_header_links	L’elenco strutturato di link da visualizzare nell’intestazione. Ogni link è configurato tramite un modulo con campi individuali (vedi sotto).
links_position	Controlla se i link appaiono sul lato destro (predefinito) o sinistro dell’intestazione vicino al logo. Quando impostato su left, tutti i link vengono automaticamente nascosti nelle pagine dei topic per fare spazio al titolo del topic — indipendentemente dalle singole impostazioni hide_on_scroll del link.

---

Aggiunta di Link

I link sono configurati tramite un modulo strutturato nelle impostazioni del componente tema. Clicca su Aggiungi per aggiungere un nuovo link. Ogni link ha i seguenti campi:

Campo	Obbligatorio	Descrizione
Testo	Sì	L’etichetta visibile per il link. Max 100 caratteri. Determina anche la classe CSS applicata al link (vedi Personalizzazione CSS sotto).
Titolo	No	Il testo del tooltip mostrato quando si passa il mouse sopra il link. Max 1000 caratteri.
URL	Sì	L’URL a cui punta il link. Può essere un percorso relativo (es. /faq) o un URL completo. Max 2048 caratteri.
Vista	No	Controlla su quale dispositivo appare il link. Se lasciato non impostato, il link viene mostrato su tutti i dispositivi (stesso di vdm). Vedi i valori sotto.
Target	No	Controlla come si apre il link. Se lasciato non impostato, per impostazione predefinita si apre in una nuova scheda (stesso di blank). Vedi i valori sotto.
Nascondi durante lo scorrimento	No	Controlla se il link si nasconde quando il titolo del topic diventa visibile nell’intestazione nelle pagine dei topic. Impostazione predefinita su keep. Si applica solo quando links_position è impostato su right — vedi nota sotto. Vedi i valori sotto.
Locale	No	Se impostato, il link viene mostrato solo quando la lingua della pagina del sito corrisponde a questo valore. Lasciare vuoto per mostrare il link su tutte le lingue. Vedi i dettagli sotto.

Valori di Vista:

Valore	Comportamento
vdm	Visibile sia su desktop che su mobile
vdo	Visibile solo su desktop
vmo	Visibile solo su mobile
(non impostato)	Stesso di vdm — visibile su tutti i dispositivi

Valori di Target:

Valore	Comportamento
blank	Si apre in una nuova scheda
self	Si apre nella stessa scheda
(non impostato)	Per impostazione predefinita si apre in una nuova scheda (stesso di blank)

Valori di Nascondi durante lo scorrimento:

Valore	Comportamento
keep	Il link rimane visibile anche quando il titolo del topic è mostrato nell’intestazione (predefinito)
remove	Il link si nasconde quando il titolo del topic diventa visibile nelle pagine dei topic

hide_on_scroll si applica solo quando links_position è right. Quando links_position è left, tutti i link vengono nascosti insieme nelle pagine dei topic indipendentemente dalla loro impostazione individuale hide_on_scroll.

Ecco un esempio di hide_on_scroll in azione (con links_position impostato su right):

Most Liked e Privacy sono impostati su keep, quindi rimangono visibili quando il titolo si espande. Gli altri link sono impostati su remove, quindi si nascondono quando il titolo diventa visibile. Questo comportamento interessa solo le pagine dei topic.

---

Filtraggio per Locale

Il campo Locale ti permette di mostrare un link solo quando il sito è impostato su una lingua specifica. Questo è utile per community multilingue che desiderano link di intestazione diversi per lingua.

• Imposta il campo su un codice locale come en, de, fr, zh_CN, ecc.
• La corrispondenza è case-insensitive, e sia i separatori - che _ sono trattati allo stesso modo — quindi en-US, en_US e en_us corrispondono tutti ugualmente.
• Se il campo locale viene lasciato vuoto, il link viene mostrato su tutte le lingue. Questa è l’impostazione consigliata per la maggior parte dei siti monolingua.
• Viene aggiunta anche una classe CSS headerLink--{locale} all’elemento link, che può essere utilizzata per un targeting CSS aggiuntivo.

Problema comune: Se i tuoi link non vengono visualizzati, controlla se hai impostato accidentalmente un valore locale che non corrisponde alla lingua configurata del tuo sito. Lasciare vuoto il campo locale è sicuro e mostrerà sempre il link.

---

Personalizzazione CSS

Ogni link riceve automaticamente una classe CSS derivata dal suo valore Testo: gli spazi vengono sostituiti con trattini, il testo viene convertito in minuscolo, e viene aggiunto -custom-header-links.

Per esempio:

• Un link con testo Privacy riceve la classe privacy-custom-header-links
• Un link con testo Visit Shop riceve la classe visit-shop-custom-header-links

Stilizza tutti i link dell’intestazione:

.custom-header-links .headerLink a {
  font-size: var(--font-up-1);
  color: var(--header_primary);
}

Stilizza un link specifico (es. un link con testo “Privacy”):

.custom-header-links .headerLink.privacy-custom-header-links a {
  color: var(--tertiary);
}
.custom-header-links .headerLink.privacy-custom-header-links a:hover {
  color: var(--tertiary-high);
}

Mostra o nascondi un link in base allo stato di accesso:

Discourse aggiunge una classe anon al tag <html> per gli utenti non loggati. Puoi usarlo per mostrare o nascondere condizionalmente i link:

/* Nasconde "Dashboard" agli utenti non loggati */
html.anon .dashboard-custom-header-links {
  display: none;
}

/* Nasconde "Sign Up" agli utenti loggati */
html:not(.anon) .sign-up-custom-header-links {
  display: none;
}

display: none in CSS è un meccanismo di occultamento puramente visivo. L’HTML del link è ancora presente nel sorgente della pagina. Non usarlo per proteggere URL sensibili o soggetti a controllo degli accessi.

Riordina i link con CSS (usando order di flexbox):

.custom-header-links li {
  &:nth-child(1) { order: 3; }
  &:nth-child(2) { order: 1; }
  &:nth-child(3) { order: 2; }
}

Usa il percorso /my per i link specifici dell’utente, per evitare di codificare un nome utente:

/my/messages     → la posta in arrivo dell'utente corrente
/my/activity     → l'attività dell'utente corrente

---

Ospitato da noi? I componenti tema sono disponibili per l’uso sui nostri piani Pro, Business e Enterprise.

---

Novità salienti (Changelog):

• L’impostazione custom_header_links è stata migrata da un formato a elenco delimitato da virgole a un’interfaccia utente modulo strutturata type: objects. Se in precedenza hai configurato i link utilizzando il vecchio input di testo separato da virgole, la migrazione dovrebbe aver preservato automaticamente i tuoi dati

[rolando]

don’t know if this has been suggested, tried reading back but couldn’t find it.

was thinking that maybe adding the ability to create “sub-links” thus creating the idea of a list that you could edit (text color, background hover etc.) to get results similar to what zoom has

[rolando]

the links that have the arrow to the right like developer means that it has “sub-links”

[bekircem]

Is it possible to add some basic dropdown menu to an any item?

I couldn’t create a dropdown menu with “Custom header links”. It seems Zoom did that. I reviewed their dropdown menu via console, but I couldn’t figure out how they interfere with the html of this component for adding dropdown to any item.

Is there a way to add this dropdown to item? @Johani

<div id="dropdown">
  <a title="Zoom Developer Documentation" href="https://marketplace.zoom.us/docs" target="_blank">Developer</a>
  <span class="caret"></span>
  <div class="dropdown-content">
    <a title="Zoom API Docs" href="https://marketplace.zoom.us/docs/api-reference/introduction" target="_blank">API</a>
    <a title="Zoom SDK Docs" href="https://marketplace.zoom.us/docs/sdk/native-sdks/introduction" target="_blank">SDK</a>
    <a title="Zoom Developer Blog" href="https://medium.com/zoom-developer-blog" target="_blank">Blog</a>
    <a title="Zoom Developer Changelog" href="https://marketplace.zoom.us/docs/changelog" target="_blank">Changelog</a>
    <a title="Zoom Developer Survey" href="https://docs.google.com/forms/d/e/1FAIpQLSeJPLhNuxjtkxyyV276R8S_nYz99fpMbbS8VWkC8Hwi7-2Byg/viewform" target="_blank">Survey</a>
  </div>
</div>

[shréa (Shreya)]

Has anyone run into any issues with links not opening when setting links position to “left”?

Links work on Preview but not when I apply it to a theme.
Right alined links work fine though.

[sok777 (sok)]

Hi! Thanks for creating this.
Is it possible to add an SVG before the text link? If so - how?

[jrgong]

@bekircem

Is it possible to add some basic dropdown menu to an any item?

Have you found a solution for this? I am look for the same solution.

[Zup]

how can the title convert **formatting code** into actual formatting? also how about Font Awesome icons before the text?

[satonotdead]

Could be possible to add a flag to show or hide links as specific groups of users?

[AntiMetaman]

Is there a way this theme component can allow for dropdown navigation? That means, when I hover over a header link, it has sub-items that appear underneath it. I know that this can be done via html/css as shown here:

Add a custom header with a dropdown menu

I recently made a dropdown navigation menu for Envato’s new forums, so I’ll share some code to implement something similar on your own site. We’ll be implementing a black header with one link that reveals a menu of more links, like this: [image] In Admin > Customize > CSS/HTML, create a new customization. Remember that you can have multiple customizations active at the same time, so it’s a good idea to use many of them instead of one giant one for everything. For this custom header, create a…

[tjot (Tomasz)]

Thank you for creating this component!
One question and potentially a feature request: can we show a specific link for a specific group?
For example, if a user is in group customers I’d like to show a link to the customer’s control panel, if a user is in group workers I’d like to add a link to a different panel.
I think this would be a very useful feature.
The group name could be the last (optional) parameter.

[Nick_Chomey]

Grazie per questo! L’ho appena trovato dopo aver provato vari altri banner e componenti. È esattamente quello di cui ho bisogno!

Una richiesta/suggerimento: possibilità di riordinare i link. Ne ho appena creati alcuni e mi sono reso conto che vorrei aggiungerne uno in cima. Ora dovrò copiarli e incollarli tutti manualmente, il che è in realtà piuttosto macchinoso poiché continuano a sincronizzarsi/aggiornare altre voci mentre li copio verso il basso.

Il trascinamento della selezione o i pulsanti su/giù sarebbero molto utili per gli utenti futuri (o per modifiche future).

[dax (Daniela)]

[quote=“Nick_Chomey, post:131, topic:90588”]
Drag and drop o pulsanti su/giù sarebbero molto utili per gli utenti futuri (o per modifiche future).
[/quote]Puoi già manipolare l’ordine molto facilmente con alcune righe di CSS poiché utilizziamo la proprietà flex.

Ad esempio:

• Ordine predefinito
  

• Ordine personalizzato
  

Esempio CSS:

.custom-header-links li {
  &:nth-child(1) {
    order: 3;
    background: red;
  }

  &:nth-child(2) {
    order: 1;
    background: green;
  }

  &:nth-child(3) {
    order: 2;
    background: yellow;
  }
}

[keegan (Keegan George)]

@Nick_Chomey

i pulsanti su/giù sarebbero molto utili per gli utenti futuri (o per modifiche future).

@Nick_Chomey Mi sono spesso trovato nella necessità di farlo, non solo per questo componente del tema ma per molti altri componenti del tema che utilizzano l’impostazione type: list. Avevo pianificato di inviare una richiesta di funzionalità prima, ma l’ho completamente dimenticata, ma dato che me l’hai ricordato, ne ho aggiunta una qui:

[Feature Request] Ability to adjust order of list type settings

Background Adding a list type settings to a Discourse theme/plugin is nice and convenient with: custom_setting: type: list list_type: simple description: en: "my description." However, I’ve often found that whenever I create these types of settings, at one point or another I end up needing to adjust the order of the items. I usually either use flexbox’s order property to resolve this or manually edit the settings. I was reminded about this with @Nick_Chomey comment on the Custom He…

[Nick_Chomey]

@dax Grazie! Non avevo idea che fosse possibile!

@keegan sembra fantastico, speriamo che venga aggiunto prima o poi!

[hrayner (Harley Rayner)]

Sto cercando la stessa soluzione, hai scoperto come hanno fatto?
Grazie!

[andreas_can (Andreas)]

Ciao @Johani
Grazie per aver creato un componente così fantastico!

È possibile che un link sia visibile solo se l’utente ha effettuato l’accesso?
Sarà un link esterno.

[Johani (Joe)]

Ciao @andreas_can benvenuto in Meta

Questo componente aggiunge una classe CSS a ciascun link in base al suo testo. La classe aggiunta è la stessa del testo che assegni al link, tranne per il fatto che gli spazi vengono sostituiti da un trattino (-) e il testo viene impostato in minuscolo. Quindi, alla fine viene aggiunta la stringa -custom-header-links.

Quindi, se aggiungi un link con il testo

privacy

allora l’elemento del link avrà la classe

privacy-custom-header-links

Se il testo del tuo link è

Visit Shop

allora la classe CSS sarebbe

visit-shop-custom-header-links

Quindi, ora conosci la classe aggiunta a ciascun link. Tornando alla tua domanda.

@andreas_can

È possibile che un link sia visibile solo se l’utente è connesso?

Discourse aggiunge una classe CSS al tag <HTML> quando l’utente non è connesso. Quella classe è

anon

Quindi, puoi usarla per nascondere determinati link agli utenti che non sono connessi. Diciamo che ho un link con il testo

Customer Support

e non voglio che venga mostrato agli utenti che non sono connessi.

Aggiungerei quindi questo CSS

.anon {
  .customer-support-custom-header-links {
    display: none;
  }
}

nella scheda common > CSS del mio tema principale.

Questo nasconderà quel particolare link agli utenti che non sono connessi.

[andreas_can (Andreas)]

Grazie per una risposta così rapida e completa!
È esattamente quello che stavo cercando.

Ci proverò

[Alon1 (Alon)]

@andreas_can

Questo è esattamente quello che stavo cercando.

Nota che display: none; in CSS nasconde il link solo dal rendering del browser, ma è sempre completamente visibile a chiunque esamini il codice sorgente della pagina, ai crawler e ai motori di ricerca.