Link personalizzati di navigazione superiore

:discourse2: Summary Custom Top Navigation Links allows you to add links to Discourse top navigation.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/Discourse-nav-links-component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

Desktop

Mobile

Settings:

Name Descriptions
Nav links Semicolon delimited in this order: display name;description;URL
Hide dropdowns Hide category and tag dropdowns
Hide default links Hide the default links on both mobile and desktop.
  • Nav links — these need 3 parts:

    • Name
    • Description
    • Path or URL

    Name is the text for the link that shows up on the menu. Description shows up when you hover the name like this:

    Path/URL is where you want the link to go.

    You can add links as semicolon delimited values in theme settings following this order

    name;description;URL

    URL can also be relative like

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

  • Hide dropdowns

    Hides the default category and tag dropdowns

    Screenshot 2023-05-11 at 3.10.55 PM

  • Hide default links

    Hides the default links in this section

    Screenshot 2023-05-11 at 3.11.29 PM


:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T23:40:05Z

Check documentPerform check on document:
63 Mi Piace

Hi

I use this theme component. One of the items in the menú points to a category and I would like to inform the unread topics for this category.

image

Instead of Agora I would like Agora (3) for an user who has three unread topics in this category (same behaviour as standard link “Unread”).

Any idea?

Thanks in advance.

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.

2 Mi Piace

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.

Screenshot from 2022-05-10 18-29-05

  • 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)

Screenshot from 2022-05-10 18-25-39

  • 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:

Screenshot from 2022-05-10 18-39-15

1 Mi Piace

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.

Ho la stessa domanda… È una soluzione? :face_with_monocle:

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);
        }
      }
1 Mi Piace

Ottimo, complimenti :clap:

Dove hai inserito questo pezzo di codice?

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

1 Mi Piace

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

4 Mi Piace

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!

1 Mi Piace

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.

5 Mi Piace

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

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.

4 Mi Piace

4 post sono stati divisi in un nuovo argomento: Filtro tag relativo personalizzato sulla barra di navigazione

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

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

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?

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

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

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

1 Mi Piace