Riordina menu laterale

Personalizzazione Componente del tema
1
:information_source: Riepilogo Consente di riordinare le sezioni del menu laterale predefinite e personalizzate
:eyeglasses: Anteprima https://discourse.theme-creator.io/theme/Lilly/discourse-sidebar-menu-reorder
:hammer_and_wrench: Repository https://github.com/Lillinator/sidebar-menu-reorder
:question: Guida all’installazione Come installare un tema o un componente del tema

Installa questo componente del tema

:bulb: Introduzione

Ho visto numerose richieste da amministratori Discourse che desideravano riordinare le sezioni del menu laterale, incluse le sezioni personalizzate globali. Poiché al momento non è molto intuitivo o immediato per la maggior parte delle persone farlo con CSS, e farlo può essere difficile da gestire e modificare, ho creato un componente del tema che rende tutto molto più semplice nell’interfaccia utente dell’amministratore.

:woman_technologist:t2: Panoramica

Questo componente del tema Discourse consente agli amministratori di riordinare le sezioni del menu laterale del proprio forum nell’interfaccia utente dell’amministratore, incluse tutte le sezioni predefinite nonché qualsiasi sezione personalizzata visibile globalmente.

Il componente funziona sia per le visualizzazioni laterali desktop che mobili, nonché per la modalità a tendina dell’intestazione (anche se idealmente è progettato per la modalità laterale).

:wrench: Installazione e configurazione

  • Installa questo componente del tema seguendo la Guida per principianti all’uso dei temi Discourse.
  • La sezione community si riferisce alla sezione superiore predefinita della barra laterale - il menu con l’intestazione Argomenti e include il sottomenu a tendina Altro; si consiglia di spostare sopra la sezione community non più di una o due sezioni (predefinite o personalizzate).
  • Non eliminare nessuna delle sezioni predefinite nelle impostazioni, altrimenti risulteranno in ordine errato (puoi sempre aggiungerle nuovamente o reimpostare le impostazioni).
  • Il modo migliore per configurare questo componente è avere lo schermo di amministrazione del componente con l’impostazione dell’elenco di riordino in una finestra del browser, e la visualizzazione della barra laterale del forum come utente di test in un’altra finestra accanto ad essa; ricarica la pagina dopo ogni modifica dell’ordine delle sezioni del menu nell’elenco.
  • Nelle impostazioni di amministrazione del componente, assicurati di utilizzare il formato di denominazione slug per le sezioni personalizzate, altrimenti verranno ignorate (ad esempio: usa custom-menu-name per “Custom Menu Name”, useful-links per “Useful Links”, ecc.)

:gear: Impostazioni

Impostazione Descrizione
Ordine menu laterale Un’impostazione elenco che contiene le sezioni del menu predefinite. (community è la sezione superiore predefinita nella barra laterale e include il sottomenu a tendina Altro.) Riordina le sezioni del menu con le frecce su e giù sul lato. È possibile aggiungere anche sezioni personalizzate visibili globalmente - usa lo slug del nome del menu (ad esempio, per un menu personalizzato intitolato Test Menu, aggiungi test-menu nelle impostazioni).

Il componente del tema ha inizialmente le impostazioni predefinite. Gli amministratori devono aggiungere eventuali sezioni di menu personalizzate globali che desiderano mescolare nell’elenco di ordinamento, e poi riordinarle insieme alle sezioni predefinite.

screenshot delle impostazioni predefinite del componente

image
image1632×2188 262 KB

:camera_flash: Screenshot

Gli screenshot seguenti mostrano la sezione community, e due sezioni di menu personalizzate di esempio chiamate “Dev Links” (dev-links) e “Toolbox” (toolbox) così come appaiono nel pannello di amministrazione del componente a sinistra, e a un utente normale a destra. Le frecce per spostare una sezione del menu su e giù nelle impostazioni di amministrazione del componente sono mostrate nella piccola casella rossa.

image
image1709×1200 222 KB

Qui, l’impostazione è configurata per mostrare la sezione predefinita categories sopra la sezione community (modalità compatta ed espansa):

image
image1632×2188 279 KB

image
image1363×2188 193 KB

image
image1462×2188 307 KB

Ecco un esempio che utilizza due sezioni personalizzate: una chiamata dev-links che è sopra la sezione predefinita community, e un’altra chiamata toolbox che si trova sotto la sezione predefinita tags.

image
image1632×2188 281 KB

image
image1411×2188 280 KB

image
image1425×2188 266 KB

Nota inoltre la sezione chiamata inbox-section nello screenshot di amministrazione sopra - questa è la sezione Messaggi che il componente Sezione messaggi per la barra laterale inserisce nella barra laterale (sotto il menu personalizzato toolbox sopra), mostrando che questo componente può essere utilizzato anche per spostarla.

Inoltre, questo componente del tema può essere utilizzato insieme ai componenti Menu laterali di gruppo e Sotto-categorie rientrate (vedi nello screenshot sopra).

:backhand_index_pointing_right: Note

  • Dopo aver aggiunto nuove sezioni personalizzate globali all’impostazione sidebar_menu_order, gli utenti del forum vedranno il nuovo ordine corretto del menu quando ricaricano il browser o comprimono/espandono la barra laterale.
  • La creazione di nuove sezioni di menu personalizzate globali mentre questo componente è attivo può comportare sezioni duplicate temporanee per l’amministratore fino a quando la barra laterale non viene ridisegnata, sia con un aggiornamento della pagina che comprimendo ed espandendo.
  • Le sezioni di menu personalizzate create dagli utenti appariranno sempre in fondo alla barra laterale per quell’utente, ma sono altrimenti non influenzate.
  • Se l’impostazione Amministrazione -> Tutte le impostazioni del sito -> Modalità barra laterale chat separata è impostata su Sempre, il pulsante della chat apparirà come al solito in fondo, e il componente ignorerà le sezioni di menu della chat predefinite (chat-dms, chat-channels, e chat-search).
Dai un'occhiata ad altre mie creazioni Discourse
28 Mi Piace
Configuring the default sidebar for your users
Group Sidebar Menus
Messages section for sidebar
2

È fantastico. Mi piace molto usare la configurazione con le categorie (1) e poi la chat (2). Grazie mille per il tuo bel lavoro, Lilly

4 Mi Piace
3

Questo è ancora supportato? Ho provato a installare e ho ricevuto il seguente errore. Ho provato da qui e anche usando le istruzioni manuali.

Screenshot_20260225-174622
Screenshot_20260225-1746221008×2244 182 KB

4

Sì, lo è. Il link nel pulsante “installa questo componente tema” è obsoleto, ma il link in alto è ancora corretto e puoi usarlo per installare il componente manualmente

Oppure prova questo pulsante

Installa questo componente tema

2 Mi Piace
5

Ho appena corretto il link nel pulsante di installazione nell’OP, quindi ora è tutto a posto.

4 Mi Piace
6

Ho riscontrato un piccolo bug, per cui l’ordine specificato non funziona quando ho uno schermo “desktop” insolitamente stretto, come sul mio telefono pieghevole.

Ecco come voglio che appaia:

image
image458×851 33.5 KB
   
image
image1059×862 74.5 KB

Quando ho uno schermo di dimensioni strane (sembra una larghezza di circa 640-820), perdo l’ordine:

image
image670×862 60.9 KB

1 Mi Piace
7

oh dio mio, il ritorno della barra laterale a 2 colonne. pensavo che fosse sparita? darò un’occhiata…

4 Mi Piace
8

Ero davvero io ad essere un po’ tonto! Stavo usando il vecchio componente e non me ne ero nemmeno accorto.

Ho notato una cosa però: quello che era chiamato community ora è chiamato the-forum. Ecco una PR per sistemare questo nelle impostazioni predefinite:

1 Mi Piace
9

Sul mio forum è ancora chiamato community e anche qui su Meta.

image
image1258×159 35.2 KB

Mi chiedo come tu l’abbia cambiato.

2 Mi Piace
10

Questo è davvero strano! Ricordo di aver cambiato il testo su di esso a un certo punto, ora che ci penso. Ma non sono sicuro di come sia finito nell’HTML!

Ritirerò quella PR e mi gratterò un po’ di più la testa. Potrebbe dover rimanere una ‘stranezza’ del mio sito!

1 Mi Piace
11

dovresti essere in grado di eseguire alcuni comandi rails per rinominarlo. se la tua sezione si chiama effettivamente the-forum, allora penso che questo dovrebbe funzionare dalla console rails:

cd /var/discourse
./launcher enter app
rails c

section = SidebarSection.find_by(title: 'the-forum', public: true)
if section
  section.update!(title: 'community')
  puts "Fatto: rinominato in 'community'."
else
  puts "Sezione non trovata."
end

fai sicuramente un backup prima.

3 Mi Piace
12

L’ho provato (finalmente) ora. Non ha trovato la sezione però:

image
image1147×245 29.6 KB

Penso che questa debba rimanere una stranezza del sito, eh?

1 Mi Piace
13

(post cancellato dall’autore)

2 Mi Piace
14

Nota: ho appena applicato alcune correzioni per dispositivi mobili per questo componente: aveva iniziato a visualizzare le linee orizzontali tra le sezioni della barra laterale, che dovrebbero essere visibili solo nelle visualizzazioni desktop e tablet.

2 Mi Piace
15

Sto utilizzando questo splendido componente del tema insieme all’equamente meraviglioso componente di Lilly Discourse Group Sidebar Menus. Il mio caso d’uso consiste nel creare menu personalizzati per i clienti, in modo che tutti in un’organizzazione possano avere collegamenti rapidi pertinenti e specifici per loro, proprio in alto, subito dopo la sezione della community.

Volevo segnalarlo per i futuri viaggiatori (incluso me stesso) che il nome della sezione della barra laterale è molto sensibile e deve corrispondere esattamente, con gli spazi nel nome convertiti in trattini. Quindi “Doing business” diventa “doing-business”.

Tutto questo va bene, ma quando ho creato la sezione della barra laterale del gruppo ho inserito accidentalmente uno spazio alla fine del nome del gruppo, che è diventato “doing-business-”. Ci è voluto un po’ di risoluzione dei problemi con gli strumenti per sviluppatori per scoprirlo.

Queste funzionalità sono così importanti per me che apprezzerei davvero che vengano prese in considerazione per l’inclusione nel nucleo, in modo che siano più facilmente disponibili e semplici da usare su qualsiasi sito Discourse. :folded_hands:

2 Mi Piace
16

Grazie, Tobias. Ho effettivamente menzionato di utilizzare gli slug dei nomi delle sezioni nella descrizione delle impostazioni, ed è indicato anche negli esempi degli screenshot (vedi “dev-links” = DEV LINKS).

Forse dovrei aggiungerlo anche altrove, oltre alle descrizioni delle impostazioni. :thinking:

edit: fatto

6 Mi Piace