C'è un modo per cambiare il menu a comparsa di navigazione su mobile in testo normale come sul desktop?

[Kuro22]

Su mobile:

“Rimuovi dall’elenco”
↓

Su desktop:

Vorrei cambiarlo perché potrebbe mostrare in modo più evidente che ci sono alcune opzioni in attesa di essere cliccate e ci sono ampi spazi vuoti a destra del menu a discesa.

[Don]

Ciao,

È possibile con Overriding Discourse template. Ma ti suggerisco di leggere l’intera documentazione.

In questo caso dobbiamo trovare il template della barra di navigazione. Qui puoi trovare tutti i template. https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates

La barra di navigazione è un componente quindi possiamo trovarla nella cartella dei componenti. navigation-bar.hbs questo è il template che vogliamo usare.

Questo è il template della barra di navigazione in vista desktop.

{{#each this.navItems as |navItem|}}
  <NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />

Ma aspetta… sappiamo che la barra di navigazione ha una versione mobile che vogliamo cambiare con la versione desktop, quindi se guardiamo attentamente i template possiamo vedere una cartella mobile. In questa cartella possiamo trovare quei template che hanno una versione mobile. Ad esempio la barra di navigazione. Quindi dobbiamo prima andare nella cartella mobile, poi andare nei componenti e cercare navigation-bar.hbs. Sovrascriveremo questo template con la versione desktop, che ho incollato sopra.

Dalla documentazione che ho linkato sopra sappiamo che dovremmo iniziare così:

Con data-template-name dobbiamo puntare al template che vogliamo sovrascrivere.
Ora sappiamo che il percorso è: mobile → componenti → navigation-bar

<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">

</script>

Dopo di che incolliamo semplicemente il codice desktop all’interno:

Ora puoi incollare questo template in un componente nella sezione header mobile.

<script type="text/x-handlebars" data-template-name="mobile/components/navigation-bar">
  {{#each this.navItems as |navItem|}}
  <NavigationItem @content={{navItem}} @filterMode={{this.filterMode}} @category={{this.category}} @class={{concat "nav-item_" navItem.name}} />
{{/each}}
<CustomHtml @name="extraNavItem" @tagName="li" />
<PluginOutlet @name="extra-nav-item" @connectorTagName="li" @args={{hash category=this.category filterMode=this.filterMode}} />
</script>

Assicurati che il tuo template personalizzato sia sempre aggiornato. Se ci sono modifiche nel template principale navigation-bar dovresti aggiornare anche il tuo template personalizzato affinché tutto funzioni correttamente.

Sul tema predefinito ha questo aspetto

---

Forse è necessario uno stile CSS per adattarlo al mobile. Ma dipende dal tema che usi.

Ad esempio, il tema predefinito ha un bordo che vorrei nascondere.

Sezione Mobile / CSS

.list-controls .nav-pills > li {
  border: none;
}

[Kuro22]

Ciao Don.

Apprezzo sinceramente la tua guida dettagliata e ben spiegata, che è estremamente utile per qualcuno come me che non ha molta familiarità con il codice. Con il tuo testo, non solo ho apportato con successo la modifica, ma ho anche imparato un’abilità utile e acquisito una comprensione più approfondita di Discourse.

Le parole non possono esprimere appieno la mia gratitudine. Buona giornata!

[Kuro22]

@Don

alla sezione header mobile

A proposito, penso che ti riferissi alla sezione head.