Link di intestazione personalizzati

Questo è generalmente vero, CSS non è un modo sicuro per nascondere nulla perché una persona esperta potrebbe guardare il codice sorgente della pagina per qualsiasi motivo… ma forniamo una vista senza JS ai crawler, quindi in quel caso il contenuto aggiunto dai temi di solito non viene comunque indicizzato.

3 Mi Piace

L’anteprima non funziona

3 Mi Piace

Ho aggiornato il link di anteprima, ora dovrebbe funzionare!

3 Mi Piace

È possibile utilizzare questo componente per chiamare uno script javascript con
javascript:script('function');
invece di un URL effettivo?

(Sembra quasi funzionare, ma sto riscontrando violazioni CSP.)


Modificato per aggiungere:
Sono riuscito a farlo funzionare. Se qualcun altro dovesse mai chiedersi, ho usato # nell’interfaccia utente del componente al posto di un URL, quindi ho usato un event listener per chiamare la funzione javascript.

Altri probabilmente conoscono un modo migliore, e spero che condividano tale conoscenza se lo fanno!

2 Mi Piace

Ciao, vorrei regolare lo stile e la dimensione del carattere dei link dell’intestazione. Qualcuno potrebbe indicarmi il CSS corretto che mi permette di farlo? Grazie!

2 Mi Piace

Ciao @brentoshiro, le proprietà varieranno a seconda di ciò di cui hai bisogno per lo stile, ma il modo in cui selezioneresti i link sarebbe così:

Per stilizzare tutti i link dell’intestazione:


.custom-header-links .headerLink a {
    font-size: 1rem; // sostituisci con la dimensione del carattere di tua scelta
    color: #96b67b; // puoi anche usare variabili come var(--tertiary);
    font-style: italic; // opzioni: normal, italic, oblique
}

Per stilizzare un link specifico
Puoi accedere al link utilizzando il titolo del link (separato da trattini e in minuscolo) in questo modo per “Privacy”:

.custom-header-links .headerLink.privacy-custom-header-links a:hover {
    color: red;
}

o utilizzando l’attributo title e inserendo il titolo del link:

.custom-header-links .headerLink a[title='Our Privacy Policy'] {
    color: purple;
}

Per aggiungere stili al passaggio del mouse, aggiungi semplicemente :hover dopo il tag a:


.custom-header-links .headerLink a:hover {
    color: var(--primary-low);
}
2 Mi Piace

Ciao, sarebbe possibile centrare i link invece di allinearli solo a sinistra/destra?

1 Mi Piace

Questo è davvero fantastico. Mi chiedo quanto lavoro aggiuntivo sarebbe necessario per consentire diverse liste di link nell’intestazione per gruppo? Abbiamo personale e studenti sul nostro sito e ci piacerebbe poter fornire link primari diversi nell’intestazione per ciascun gruppo.

3 Mi Piace

Potresti ottenerlo facendo in modo che ogni gruppo abbia un Tema diverso, con ogni tema che utilizza la propria copia di questo Componente Tema.

Ciò funzionerebbe bene se uno dei tuoi due gruppi fosse piuttosto statico (o almeno più piccolo) - il tuo gruppo di staff sembra ideale per questo. O almeno se avessi solo un gruppo dinamico.

Quindi rendi i collegamenti degli studenti il Tema predefinito del sito, e poi fai in modo che i tuoi membri dello staff abbiano i collegamenti dello staff manualmente (o tramite l’interfaccia utente o tramite la Console Rails).

6 Mi Piace

Stavo giusto per chiedere questo, dato che finalmente ho notato che appaiono nella schermata di accesso.

Nel mio caso, uno dei link cambia ogni mese (mentre il nome dell’intestazione rimane lo stesso). È possibile nascondere l’intestazione con un codice senza dover modificare il codice per nascondere il link? Ad esempio, usando il tuo esempio avrei

Assistenza Clienti
2022-assistenza-clienti/26903 è il mio link, poi assistenza-clienti-luglio, ecc.

Quindi, come puoi vedere, nascondere assistenza-clienti-giugno funzionerebbe bene, ma deve essere aggiornato mensilmente invece di nascondere “FAQ” (e non posso nemmeno aggiungere il /26903 dall’argomento al codice CSS, quindi non posso nascondere questo link specifico, anche se potrei aggirare questo problema pubblicando la pagina?). Se non c’è un altro modo per farlo, non è un grosso problema, non è alcuno sforzo, è più che altro che sono sicuro che me ne dimenticherò.

2 Mi Piace

Ciao, ero curioso di sapere se fosse possibile ottenere traduzioni per il testo? Magari includendo le chiavi di traduzione, se il componente le include :slight_smile:

2 Mi Piace

**C’è un motivo per cui per impostazione predefinita non viene mostrato agli utenti non registrati? **

Ignora, per qualche motivo quando applico un componente al tema, non appare. Devo invece aggiungere il componente al tema.

1 Mi Piace

Utilizzo delle icone UTF-8

Nota che puoi usare le icone UTF-8 come ancoraggi di link.

In questo caso, potresti voler provare questo CSS per abbinare altre icone a discesa dell’intestazione:

.custom-header-links .headerLink {
    margin-top: -1px;
}
.custom-header-links .headerLink a {
    padding: 3px 10px;
    color: var(--primary-low-mid);
    font-size: var(--font-up-5);
    font-weight: bold;
}
.custom-header-links .headerLink:hover {
    background-color: var(--primary-low);
}
.custom-header-links .headerLink:hover a {
    color: var(--primary-medium);
}

Fa qualcosa di simile a questo:

image

image

1 Mi Piace

Ho appena installato questo componente e aggiunto alcuni collegamenti, ma non sono stati visualizzati.

Ho scoperto che l’inserimento di una lingua impedisce la visualizzazione dei collegamenti sul mio sito. Originariamente avevo aggiunto ‘blank’ per completezza anche se non era necessario. Non sono stati visualizzati nemmeno quando ho cambiato blank in ‘en’. La rimozione completa del valore ha risolto il problema nel mio caso. Non ho idea del perché, ma ho pensato di menzionarlo nel caso in cui qualcun altro abbia un problema simile.

2 Mi Piace

Sono incappato anch’io in questo problema l’altro giorno:

Vedrò se riusciamo forse a cambiare gli esempi predefiniti per renderli più intuitivi.

2 Mi Piace

Ho rimosso la locale dalle impostazioni predefinite qui: UX: remove locale from default settings by awesomerobot · Pull Request #38 · discourse/discourse-custom-header-links · GitHub

Quindi le impostazioni predefinite dovrebbero ora apparire indipendentemente dalla locale impostata sul sito. Grazie @packman e @JammyDodger!

2 Mi Piace

I miei link sono scomparsi dopo l’ultimo aggiornamento (PC, ubuntu, brave)
Potresti controllare questo?

@cmdntd – vedi l’argomento spinoff. Probabilmente hai un aggiornamento di Discourse disponibile in Admin | Upgrade che risolverà questo problema.

1 Mi Piace

Recentemente il mio link personalizzato è stato sostituito dai tre link predefiniti. Nell’anteprima funziona.

Questo è un sito ospitato, mi è appena venuto in mente che qualcosa potrebbe essere cambiato nel tema, in modo che non venga riconosciuto dai link personalizzati dell’intestazione. Controllerò e ti farò sapere.

Quack! Ho visualizzato l’anteprima del plugin in diversi temi e hanno funzionato tutti. Ho effettuato il logout e ha funzionato. Ho cambiato browser e ha funzionato. C’è un forte odore di gatto di Schrödinger qui.

1 Mi Piace