Banner Ricerca Avanzata

[Discourse]

Questo componente tema è deprecato e non dovrebbe più essere utilizzato. Le sue funzionalità sono ora nel Core di Discourse — consulta la nostra documentazione per i dettagli su come impostare un banner di benvenuto:

→ https://meta.discourse.org/t/creating-a-banner-to-display-at-the-top-of-your-site/153718#p-762961-welcome-banner-1

	Riepilogo	Advanced Search Banner posiziona una barra di ricerca insieme a un testo di titolo e sottotitolo opzionali in un banner sopra la navigazione principale dell’elenco degli argomenti.
	Anteprima	Anteprima su Discourse Theme Creator
	Link al Repository	https://github.com/discourse/discourse-search-banner
	Nuovo ai Temi di Discourse?	Guida per principianti all’uso dei temi di Discourse

Installa questo componente tema

Poiché si tratta di un componente tema official mantenuto dal team di Discourse, le richieste di Support, Bug, UX e Feature possono essere effettuate nelle rispettive categorie qui su Meta, e taggate con il tag appropriato del componente tema. Clicca su un link qui sotto per iniziarne una.

Supporto Bug UX Funzionalità

Funzionalità

Per impostazione predefinita, questo banner appare su tutte le pagine di argomenti di primo livello (ultimi/nuovi/non letti/migliori/categorie… tutto in top menu nelle impostazioni del sito), ma può anche essere impostato per essere visualizzato solo sulla homepage di una community.

Impostazioni

Nome	Descrizione
show on	Determina su quali pagine appare il banner
plugin outlet	Dove sulla pagina apparirà il banner
background image light	Immagine di sfondo per il banner su palette di colori chiari
background image dark	Immagine di sfondo per il banner su palette di colori scuri
tile background image	Ripeti l’immagine di sfondo
show for	Chi può vedere il Search Banner (connesso, disconnesso o entrambi)
special style	Variazioni opzionali che modificano l’aspetto del banner di ricerca

Traduzione	Predefinito
search_banner.headline	Benvenuto nella nostra community
search_banner.subhead	Siamo felici di averti qui. Se hai bisogno di aiuto, per favore cerca prima di pubblicare.
search_banner.search_button_text

Per omettere la visualizzazione di uno, lascia il campo vuoto.

Stile personalizzato

L’elemento HTML ottiene una classe denominata .display-search-banner ovunque appaia questo banner, e il banner stesso è racchiuso dalla classe .custom-search-banner, quindi con un po’ di CSS dovresti essere in grado di personalizzare l’aspetto di questo banner come preferisci.

Miglioramenti futuri

• Aggiungere un’opzione per abilitare il banner in categorie specifiche

Crediti

Questo prende molto in prestito da @angus’ https://meta.discourse.org/t/header-search-theme/67959

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

[awesomerobot (Kris)]

I’ve updated the theme component to add some new settings:

show on — this determines where the banner appears and has the options

• top_menu (latest/categories/top/new/unread)
• homepage
• all (all pages except the default search page and admin pages)

show for — this determines who sees the banner

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

Ho appena apportato un piccolo aggiornamento che aggiunge uno stile opzionale a questo componente, ti fornisce una barra di ricerca grande senza testo del titolo:

Questo può essere abilitato da una nuova impostazione “stile speciale”. Tutto ciò che fa è abilitare un piccolo CSS aggiuntivo.

Potrei aggiungere altre opzioni anche in futuro!

[AndyBr (Andy)]

Come posso cambiare il colore del testo di benvenuto in questo componente aggiuntivo?

[Arkshine]

Non esiste un’impostazione per questo. Tuttavia, puoi aggiungerla con un po’ di CSS:

Aggiungi quanto segue al tuo tema o a un nuovo componente del tema, e modifica a tuo piacimento.

.search-banner > .custom-search-banner  {
    /* title */
    h1 {
        color: #286989;
    }
    
    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

Grazie mille!

[RBoy]

C’è un modo per nascondere l’icona di ricerca (usando CSS o altro)? Ho un problema in cui l’icona di ricerca viene duplicata quando viene utilizzata in combinazione con questo componente: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

dovrebbe visualizzare solo un’icona di ricerca. Dirò però che l’uso del banner di ricerca e della ricerca nell’intestazione in modo tangenziale ha alcuni effetti collaterali negativi sull’esperienza utente.

Raccomanderei di usarne solo uno o l’altro.

[RBoy]

Grazie! Molto utile

@isaac

Dirò però che usare il banner di ricerca e la ricerca nell’intestazione in modo tangente ha alcuni effetti collaterali negativi sull’UX.

Potresti elaborare, quali effetti collaterali sull’UX?

[isaac (Isaac Janzen)]

Il video che ho linkato sopra mostra alcuni dei problemi :)\n\n- menu a discesa di ricerca sovrapposti\n- stati strani aperti e chiusi dei menu a discesa di ricerca\n- l’icona di ricerca è un link alla ricerca avanzata in un campo di ricerca e non nell’altro\n- ecc.

[RBoy]

Capito. Quindi finché non sono sulla stessa pagina, dovrebbe andare bene.

[مباركمبارك (مبارك)]

Qualcuno può aiutarmi? Ho installato questo tema sul mio Discourse ma l’immagine viene tagliata sul lato destro, affinché l’immagine si adatti completamente devo impostare il font del sito su “Più piccolo”. Ho due diverse installazioni di Discourse e in una di esse l’immagine ha funzionato normalmente, nell’altra l’immagine perché viene tagliata?

[awesomerobot (Kris)]

puoi includere uno screenshot? questo renderà molto più facile capire il problema

[ecki (Bernd)]

Ho lo stesso problema che browser/modalità diverse mostrano parti diverse di quell’immagine. L’ho risolto rendendola extra larga, in modo che il lato destro venga visualizzato solo in alcune condizioni. Ma non è così facile per le immagini simmetriche. Immagino che un po’ più di CSS (senza cercare una sovrascrittura del componente thome) aiuterebbe in questo.

[مباركمبارك (مبارك)]

Sono riuscito a risolvere parte del problema, ho disabilitato il componente tema negli altri temi e l’ho lasciato solo a 1, per quanto incredibile possa sembrare, l’immagine era “normale” con la dimensione del carattere su “normale” solo perché sul cellulare appare solo un lato dell’immagine, c’è qualcosa che posso fare per farla apparire completamente anche sul mio cellulare?

[Surbhi_Pal1 (Surbhi)]

Ciao,

C’è un modo per rimuovere lo spazio tra il banner di ricerca e l’intestazione?

[Arkshine]

Ciao, puoi usare questo CSS in un nuovo componente del tema:

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

Ha funzionato perfettamente, grazie!

[PT_LB (Paul)]

Sembra che Discourse abbia lo stesso problema che ho nella mia community, l’overlay impiega del tempo per coprire ciò che si trova sotto il sottostrato di ricerca (Discover):

È più evidente nella mia community:

Mi chiedo se qualcuno abbia trovato una soluzione, potenzialmente un ritardo nella visualizzazione dell’overlay? Potrebbe portare a una cattiva esperienza.