Portare funzionalità popolari a Discourse: Ricerca intestazione, banner di benvenuto e icone / emoji delle categorie

Abbiamo aggiunto diverse nuove funzionalità a Discourse basate su componenti tema molto apprezzati per semplificare la personalizzazione del design della tua community. In questo argomento, parleremo di queste nuove funzionalità principali, di come utilizzarle e forniremo informazioni su come si confrontano con i componenti tema che le hanno ispirate.

Ricerca nell’intestazione

La funzionalità di ricerca nell’intestazione sposta la ricerca dalla lente d’ingrandimento nell’angolo in alto a destra a un campo di inserimento più prominente nell’intestazione del sito.

Quando è necessario più spazio nell’intestazione (ad esempio, durante lo scorrimento di un argomento), la ricerca tornerà alla lente d’ingrandimento per risparmiare spazio.

Per attivare la ricerca nell’intestazione…

  1. Nell’area di amministrazione, vai su Temi e componenti.
  2. Fai clic sul pulsante Modifica per il tuo tema attivo.
  3. Trova l’impostazione Esperienza di ricerca.
  4. Aggiorna questa impostazione su “Campo di ricerca nell’intestazione del sito”.
  5. Fai clic sulla spunta verde per salvare.

Funzionalità di ricerca nell’intestazione vs. componente Ricerca Avanzata nell’Intestazione

La ricerca nell’intestazione è stata ispirata dal componente tema Ricerca nell’Intestazione, che abbiamo rinominato Ricerca Avanzata nell’Intestazione per distinguerla dalla funzionalità principale.

Dovresti utilizzare il componente Ricerca Avanzata nell’Intestazione quando hai bisogno di supportare ricerche esterne (cioè ricerche al di fuori della tua community Discourse). Altrimenti, puoi utilizzare la funzionalità di ricerca nell’intestazione che ora fa parte del core di Discourse.

Banner di benvenuto

Il banner di benvenuto saluta i membri e i visitatori e aggiunge una barra di ricerca prominente ai tuoi elenchi di argomenti.

Le funzionalità del banner di benvenuto e della ricerca nell’intestazione sono compatibili tra loro, in modo che la ricerca nell’intestazione venga nascosta mentre il banner di benvenuto è visibile.

Per attivare il banner di benvenuto…

  1. Nell’area di amministrazione, vai su Temi e componenti.
  2. Fai clic sul pulsante Modifica per il tuo tema attivo.
  3. Trova l’impostazione Abilita banner di benvenuto.
  4. Abilita questa impostazione.
  5. Fai clic sulla spunta verde per salvare.

Per personalizzare il messaggio visualizzato sul banner, vai all’area Testi del sito e cerca “welcome_banner”. Puoi modificare le stringhe di testo per il saluto ai membri registrati, il saluto agli utenti anonimi e il campo di ricerca.

Banner di benvenuto vs. componente Banner di Ricerca Avanzata

Il banner di benvenuto è stato ispirato dal componente Banner di Ricerca, che abbiamo rinominato Banner di Ricerca Avanzata per distinguerlo dalla funzionalità principale.

Dovresti utilizzare il componente Banner di Ricerca Avanzata quando desideri utilizzare immagini di sfondo personalizzate per il banner, inserire più righe di testo nel banner o modificare chi può vedere il banner (ad esempio, membri connessi, utenti disconnessi o entrambi). Altrimenti, puoi utilizzare la funzionalità del banner di benvenuto che ora fa parte del core di Discourse.

Icone e emoji delle categorie

Ora puoi utilizzare icone ed emoji per distinguere le categorie, invece del quadrato colorato.

Per utilizzare icone/emoji delle categorie…

  1. Quando crei o modifichi una categoria, cambia l’impostazione Stile in Icona o Emoji.
  2. Scegli l’icona o l’emoji che desideri utilizzare. Il colore determinerà il colore dell’icona (se utilizzata) e influenzerà altre aree in cui un colore è associato alla categoria, come nella pagina /categories.
  3. Fai clic su Salva Categoria.

Icone e emoji delle categorie vs. componente Icone delle Categorie

Le icone e le emoji delle categorie sono state ispirate dal componente Icone delle Categorie, che verrà presto deprecato a favore di questa funzionalità principale poiché supporta una maggiore personalizzazione (ad esempio, emoji) e offre un’esperienza di configurazione molto più semplice.

Per coloro che utilizzano attualmente le Icone delle Categorie, consigliamo di spostare le personalizzazioni delle icone da Icone delle Categorie alle impostazioni principali delle categorie per un supporto a lungo termine e miglioramenti continui delle funzionalità. Nei nostri test, le impostazioni del componente sovrascrivono le impostazioni della funzionalità principale, ma queste non sono state progettate per essere utilizzate insieme.

40 Mi Piace

Volevo passare al metodo nativo delle icone delle categorie. Ma ho notato che il componente del tema ha molte più icone. Di tutte le icone che ho usato, solo un piccolo sottoinsieme funziona ora con le icone native delle categorie. Suppongo che la differenza sia che uno usa FontAwesome e l’altro le emoji? Uso l’opzione “icone”, ma quando le cerco, non compaiono (dopo aver disabilitato il componente del tema per le icone delle categorie).

Un esempio di ciò che uso ora:

2 Mi Piace

Puoi aggiungere le icone mancanti all’impostazione del sito SVG icon subset.

10 Mi Piace

Come funziona? :thinking: Significa che puoi cercare fonti esterne mentre sei in Discourse? O significa solo cercare Discourse da una fonte esterna?

2 Mi Piace

Questa è un’aggiunta fantastica! Grazie! Combinata con le emoji personalizzate, aggiunge impressionanti capacità di personalizzazione!

6 Mi Piace

3 post sono stati divisi in un nuovo argomento: Bug nella creazione o modifica delle categorie

C’è ancora una differenza, tuttavia, con il componente del tema le sottocategorie ottengono questo bel tocco:

Questa non è visibile con l’opzione nativa dell’icona della categoria. L’icona in alto scompare quindi.

7 Mi Piace

Utilizzo icone di categoria per indicare se una categoria è pubblica, visibile ai membri registrati o limitata a determinati gruppi. Sarebbe possibile replicare questo con la nuova impostazione? Mi piace che le icone siano grigie, ma non vorrei impostare tutti i colori delle categorie su grigio.

3 Mi Piace

Penso che questo sarà supportato una volta che questa PR sarà unita:

Dovrebbe essere possibile con CSS.
Potresti impostare il colore predefinito per tutte le icone e poi, in base alla classe .anon (per gli utenti non registrati) e al nome del gruppo dell’utente (vedi CSS Classes for Current User's Groups), puoi nascondere l’icona o cambiarla in grigio.

Se stai usando solo icone e l’opzione per gli utenti registrati è necessaria, va bene continuare a usare anche il TC.

9 Mi Piace

Mi piace. Mi chiedo se dovremmo considerarlo un segnale di qualcosa che manca più fondamentalmente, piuttosto che scaricare questo onere sugli amministratori per risolverlo con personalizzazioni.

Correlato anche: Allow users with access to a restricted category to see who else has access

8 Mi Piace

Ciao a tutti,

Recentemente abbiamo aggiornato il nostro forum Discourse (tw.forumosa.com) e con l’ultimo aggiornamento, la nuova intestazione “Bentornato” e la barra di ricerca integrata sono state aggiunte alla homepage. Sebbene sembri a posto in linea di principio, abbiamo notato alcuni problemi di usabilità, specialmente su dispositivi mobili:

1. Il menu a discesa della ricerca può essere illeggibile a causa della trasparenza

Toccando l’icona di ricerca nella barra di navigazione in alto (su Android, ad esempio), appare il menu a discesa ma ha uno sfondo trasparente, rendendo quasi impossibile leggere i risultati della ricerca sopra il contenuto sottostante. Uno sfondo solido dovrebbe risolvere questo problema. Ho pubblicato degli screenshot di ciò che intendo di seguito.

2. L’intestazione è alta: come possiamo regolare lo spazio verticale?

Il nuovo messaggio di benvenuto e la barra di ricerca occupano una grande porzione dello schermo sui dispositivi mobili. Poiché abbiamo già l’icona di ricerca nella barra di navigazione, la barra di ricerca aggiunta sembra ridondante. Ci piacerebbe ridurre l’altezza di questa intestazione o nascondere completamente la barra di ricerca aggiuntiva/messaggio di benvenuto sugli schermi più piccoli.

Questo potrebbe interessare anche i desktop, ma al momento è particolarmente problematico sui dispositivi mobili.

Qualcuno si è imbattuto in questo problema e ha trovato un modo pulito per sovrascriverlo tramite CSS o componenti del tema?

Saluti!

7 Mi Piace

Vale la pena notare che anche il banner di aggiornamento si sovrappone in alto:

Sembra che lo z-index su .welcome-banner (attualmente 1) dovrebbe essere almeno >= 3. (il link principale e i metadati utilizzano z-index: 2)

10 Mi Piace

Temo che sia ancora rotto :sad_but_relieved_face:

Devi aggiungere le icone in SVG icon subset, se non è già stato fatto

Grazie, ma lo faccio:

1 Mi Piace

Quale pagina è questa?

Sembra che le icone vengano visualizzate correttamente su /categories, ma non sono sicuro se sia perché stai ancora usando il componente del tema o se i problemi che stai riscontrando sono su un’altra pagina che dobbiamo sistemare.

3 Mi Piace

Ho appena avuto un’ottima esperienza: sono passato al tema Horizon per il mio sito personale e ho impostato le icone per le mie categorie… dal mio dispositivo mobile!

È pazzesco e apprezzo gli sforzi per rendere l’esperienza di amministrazione così fluida.

:smiling_face_with_sunglasses::+1:

6 Mi Piace

2 post sono stati divisi in un nuovo argomento: Hai bisogno di aiuto con il passaggio alle nuove icone di categoria