Link al sito esterno dal logo principale di Discourse

Sviluppatore
1

:information_source: Discourse offre ora un componente tema #ufficiale per supportare questo caso d’uso:

Contenuto Originale

Non sono sicuro che far puntare il logo principale di Discourse a un sito esterno sia una buona idea per la maggior parte dei siti, ma ci sono eccezioni in cui ha senso portare gli utenti su un sito web esterno quando fanno clic sul logo principale di Discourse. Se vuoi farlo, ecco come.

Crea un nuovo componente tema

:warning: nota, questa sezione della guida verrà presto estratta in un argomento dedicato.

Fai clic sul link “Componenti” dalla barra laterale della pagina Admin / Personalizza / Temi. Quindi, dal fondo della barra laterale, fai clic sul pulsante “Installa”:

image
image1227×685 65.1 KB

Nella finestra modale che si apre, fai clic sul link “Crea nuovo”:

image
image840×1019 114 KB

Dai un nome al tuo componente tema e assicurati che sia selezionato il tipo “Componente”. Quindi fai clic sul pulsante “Crea”:

image
image862×394 28.6 KB

Verrai quindi portato alla pagina principale del componente tema.

Aggiungi il codice al componente tema

Il codice per sovrascrivere l’URL predefinito del logo principale deve essere aggiunto alla sezione HEAD del tuo componente tema. Per accedere all’editor del componente, fai clic sul pulsante “Modifica CSS/HTML”:

image
image1201×804 72.6 KB

Nell’editor che si apre, fai clic sul link “Head”:

image
image1196×513 33.5 KB

A seconda di varie condizioni, aggiungi i seguenti snippet di codice alla sezione HEAD dell’editor per modificare l’URL a cui punta il logo della home page. Nota che devi sostituire https://example.com nel codice con l’URL completo della home page del tuo sito esterno:

  • per cambiare il link a un URL statico:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => "https://example.com")
</script>
  • per restituire un URL dinamico basato sull’utente corrente:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      const currentUser = api.getCurrentUser();
      return `https://example.com/${currentUser.username}`;
    })
</script>
  • per restituire un URL basato su un’impostazione del componente tema:
<script type="text/discourse-plugin" version="1.3.0">
    api.registerValueTransformer("home-logo-href", () => {
      return settings.example_logo_url_setting;
    })
</script>

Fai clic sul pulsante “Salva” per salvare le modifiche. Torna alla pagina principale del componente tema dopo averlo fatto, quindi fai clic sul link “Aggiungi tutti i temi” per aggiungere il nuovo componente a tutti i temi del tuo sito:

image
image1192×530 53.6 KB

11 Mi Piace
3

:+1:grazie mille per aver condiviso!

5

image
image1816×312 30 KB

L’ho aggiunto nel tag header ma non ha avuto effetto

6

Per me funziona perfettamente.
Hai fatto un “aggiornamento forzato” del tuo sito con Ctrl + F5?

7

image
image359×153 17.5 KB

Ho usato Comando+R e ho persino attivato la modalità di navigazione in incognito, ma non ha ancora funzionato

1 Mi Piace
8

Grazie per aver condiviso questa guida! Ho bisogno di cambiare il logo principale di una community e funziona perfettamente usando lo snippet di codice.

Tuttavia, ho notato che cambierà anche il link del piccolo logo che sostituisce il logo completo quando viene mostrato il titolo di un argomento nell’intestazione. Ad esempio, l’icona qui su meta:

image

Questo sembra piuttosto poco intuitivo. È possibile aggiungere un ulteriore argomento alla funzione in modo che non influenzi il “small-logo”?

9

A causa di Upcoming Header Changes - Preparing Themes and Plugins, penso che questo debba essere modificato in

<script type="text/discourse-plugin" version="1.34.0">
    api.registerValueTransformer("home-logo-href", () => "<full_url_of_your_website_homepage>");
</script>
2 Mi Piace