Link personalizzati di navigazione superiore

[Discourse]

	Riepilogo	Link personalizzati nella barra di navigazione superiore ti consente di aggiungere link alla barra di navigazione superiore di Discourse.
	Anteprima	Anteprima su Discourse Theme Creator
	Link al repository	https://github.com/discourse/Discourse-nav-links-component
	Nuovo a Discourse Themes?	Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Poiché si tratta di un componente del tema #ufficiale mantenuto dal team di Discourse, le richieste di #supporto, bug, ux e #funzionalità possono essere inviate nelle rispettive categorie qui su Meta, contrassegnate con l’etichetta appropriata del componente del tema. Clicca su uno dei link sottostanti per iniziare.

 Supporto  Bug  UX  Funzionalità

Funzionalità

Desktop

Mobile

Impostazioni:

Nome	Descrizione
Link di navigazione	Separati da punto e virgola in questo ordine: nome visualizzato;descrizione;URL
Nascondi menu a tendina	Nasconde i menu a tendina delle categorie e dei tag
Nascondi link predefiniti	Nasconde i link predefiniti sia su mobile che su desktop.

• Link di navigazione — questi richiedono 3 parti:

  • Nome
  • Descrizione
  • Percorso o URL

  Il nome è il testo del link che appare nel menu. La descrizione appare quando passi il mouse sul nome, come in questo esempio:

  

  Il percorso/URL è la destinazione a cui vuoi che il link porti.

  Puoi aggiungere link come valori separati da punto e virgola nelle impostazioni del tema seguendo questo ordine

  nome;descrizione;URL

  L’URL può anche essere relativo, ad esempio:

  /c/staff, /t/232, /groups/plugin_authors, /about, /tags/official

• Nascondi menu a tendina

  Nasconde i menu a tendina predefiniti per categorie e tag

  

• Nascondi link predefiniti

  Nasconde i link predefiniti in questa sezione

  

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

[Cazadividendos (Luis álvarez)]

Ciao

Uso questo componente del tema. Uno degli elementi del menu punta a una categoria e vorrei mostrare il numero di argomenti non letti per questa categoria.

Invece di “Agora”, vorrei vedere “Agora (3)” per un utente che ha tre argomenti non letti in questa categoria (stesso comportamento del link standard “Non letti”).

Qualche idea?

Grazie in anticipo.

[manuel (Manuel Kostka)]

@Johani

L’URL può anche essere relativa, come
/tags/theme-component

Qualcuno sa come potrei aggiungere un link a un tag che sia effettivamente relativo al percorso corrente? Vorrei usare un tag Informazioni e offrirlo come link principale a un argomento Informazioni relativo alla categoria in cui si trova un utente.

Ad esempio, l’utente si trova nella categoria /c/feedback/7. Scegliendo Informazioni si verrà indirizzati a /tags/c/feedback/7/about.

[manuel (Manuel Kostka)]

Vorrei utilizzare il componente su un’istanza ma vari comportamenti non funzionano:

• Quando si utilizza “nascondi link predefiniti”, nasconde i primi due elementi figli (Ultimi e Categorie). Ma quando si naviga in una categoria, il link predefinito “Categorie” non viene già mostrato nel menu. Quindi questa impostazione nasconde un elemento di navigazione aggiuntivo, altrimenti il terzo in linea.

• Ho aggiunto una voce di menu per un link di categoria diretto (/c/game-talk). Quando ci navigo, non ottiene una classe attiva e non viene evidenziato. Invece, il link “Ultimi” è evidenziato e ha una classe attiva. Questo non è il link predefinito “Ultimi”, ma uno che ho aggiunto tramite il componente (collegandosi solo a /latest)

• In realtà, il link “Ultimi” non ottiene nemmeno una classe attiva quando non si chiama “Ultimi”. Quindi la classe attiva sul percorso corrente non sembra funzionare affatto a causa del componente. Questa è la visualizzazione su /latest ma con un nome diverso per il link Ultimi:

[sok777 (sok)]

Domanda veloce-
Sto cercando di creare questo e fare in modo che l’URL sia ?order=created in modo che gli utenti possano sfogliare gli argomenti recenti.

Questo funziona perfettamente sul desktop, ma fallisce sul cellulare: la barra di navigazione si ricarica e non mostra il menu a discesa.

[WJsirius (WJ)]

Ho la stessa domanda… È una soluzione?

[WJsirius (WJ)]

Penso di sapere perché è successo…
il componente ha la riga seguente:

if (window.location.pathname.match(sec2)) {
          $(navHeader).html(filter + markd);
        }

A causa dell’espressione regolare… il ? stesso viene utilizzato come segno speciale dell’espressione regolare, e il parametro dovrebbe essere confrontato con window.location.search.
Ho forzato il componente, l’ho cambiato nel codice seguente e funziona.

if (sec[2].indexOf("?") === -1) {
        if (window.location.pathname.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      } else {
        // reg ?->/?
        sec[2] = sec[2].replace(/\?/g, "/?");
        const pathWithSearch = window.location.pathname + window.location.search;
        if (pathWithSearch.match(sec[2])) {
          $(navHeader).html(filter + markd);
        }
      }

[sok777 (sok)]

Ottimo, complimenti

Dove hai inserito questo pezzo di codice?

[WJsirius (WJ)]

Discourse-nav-links-component/mobile/head_tag.html ,sostituisci il codice corrispondente.

[nathank (Nathan Kershaw)]

@WJsirius

Ho forked il componente, l’ho modificato nel codice seguente e funziona.

Perché non fare una PR in modo che tutti possano trarne beneficio?

[WJsirius (WJ)]

Posso farlo? Penso sempre che il mio livello di codice sia troppo scarso… e mi sento un po’ imbarazzato a farlo. Grazie per il consiglio!!! Lo rivedrò e farò una PR!

[nathank (Nathan Kershaw)]

@WJsirius

Penso sempre che il mio livello di codice sia troppo scarso

Penso lo stesso dei miei tentativi di contributo!!

Tuttavia, il @team (e i loro strumenti automatizzati) sembrano essere piuttosto bravi a riordinare il codice.

Una volta che l’hai reso un PR, puoi pubblicare il link del PR qui in Meta e visualizzerà un fantastico aggiornamento live incorporato dello stato del PR.

[piffy]

@manuel

Ho aggiunto una voce di menu per un link diretto alla categoria (/c/game-talk). Quando ci navigo, non ottiene una classe attiva e non viene evidenziato. Invece, il link “Latest” è evidenziato e ha una classe attiva. Tuttavia, questo non è il link “Latest” predefinito, ma uno che ho aggiunto tramite il componente (che collega solo a /latest)

Sei mai riuscito a risolvere questo problema? Sto riscontrando un problema simile

[piffy]

Non posso dire di aver trovato una soluzione ideale, ma ho capito qual era il problema per me.

Il problema si trova qui
https://github.com/discourse/Discourse-nav-links-component/blob/main/desktop/head_tag.html

Nello specifico, questa parte:

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        let contentFilterMode = this.get("content").get("filterMode");

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }
      })
    });

Sembra che questo imposti lo stato “attivo” su ogni link di navigazione. Francamente, la logica di come decide e cosa siano tutte queste variabili mi è piuttosto oscura. Ma il problema è qui:

        if (window.location.pathname === location) {
          return contentFilterMode === filter;
        } else {
          return this._super(contentFilterMode, this.get("filterMode"));
        }

Per me, questo controlla se l’URL della pagina è uguale alla posizione dell’URL della barra di navigazione e, in tal caso, restituisce il risultato di contentFilterMode === filter, entrambe le variabili sono un po’ poco chiare per me. Se la condizione fallisce, sembra che esegua semplicemente la logica normale per determinare se qualcosa debba essere contrassegnato come attivo (motivo per cui i miei link non personalizzati sembrano funzionare correttamente). Il problema è che, sebbene questo codice venga eseguito correttamente una volta per ogni link di navigazione, la variabile location sembra essere sempre “categories”, quindi l’istruzione if è sempre falsa per i link personalizzati. Inoltre, anche se correggo la variabile “location” sostituendola con this.get("content").href, anche il valore restituito è sempre falso perché la variabile filter è anch’essa sempre impostata su “categories”.

Normalmente farei una PR per risolvere questo problema, ma il problema principale mi sfugge ancora. Ho trovato una soluzione alternativa che funziona per me ma altera leggermente la funzionalità documentata di questo componente, quindi preferirei non fare una PR. Penso che ci saranno casi limite in cui non funzionerà, ad esempio se la tua homepage è impostata su /latest

    api.modifyClass("component:navigation-item", {
      pluginId: "discourse-nav-links-component",
      active: Ember.computed("contentFilterMode", "filterMode", function() {
        return window.location.pathname.includes(this.get("content").href);
      })
    });

In pratica, controlla solo se l’URL corrente include l’URL della barra di navigazione come sottostringa. Se sì, lo evidenzia.

[mononym]

Ciao. Sto scorrendo questo post. C’è un modo per indicare gli argomenti non letti per favore? Grazie.

[thaidb]

Ciao,
Come impostiamo l’apertura di un URL in una nuova scheda?
Grazie!

[carbonrich (Richard Hawkins)]

Questo potrebbe essere un componente davvero utile, ma sembra che alcuni bug di base (ma al di là delle mie capacità di correzione) ne stiano impedendo un uso più ampio. Verranno corretti?

[awesomerobot (Kris)]

Puoi essere più specifico riguardo a quali bug ti impediscono di utilizzare il componente?

[carbonrich (Richard Hawkins)]

Sì, scusa, quello principale che ho riscontrato è questo:

@manuel

• Quando si utilizza “nascondi link predefiniti”, nasconde i primi due elementi figli (Ultimi e Categorie). Ma quando si naviga in una categoria, il link predefinito “Categorie” non viene mostrato nel menu. Quindi questa impostazione nasconde un elemento di navigazione aggiuntivo, altrimenti il terzo in linea.

Presumo che abbia solo bisogno di un CSS più mirato, ma potrei sbagliarmi!