Banner di ricerca avanzata

[Discourse]

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

→ Creating a banner to display at the top of your site

	Riepilogo	Advanced Search Banner inserisce una barra di ricerca, insieme a un titolo e un sottotitolo opzionali, in un banner posizionato sopra la navigazione principale dell’elenco dei topic.
	Anteprima	Anteprima su Discourse Theme Creator
	Link al repository	https://github.com/discourse/discourse-search-banner
	Nuovo ai temi di Discourse?	Guida introduttiva all’uso dei temi di Discourse

Installa questo componente del tema

Trattandosi di un componente del tema #ufficiale mantenuto dal team di Discourse, le richieste di #supporto, Contribute > Bug, Contribute > UX e Contribute > Feature possono essere avanzate nelle rispettive categorie qui su Meta, utilizzando l’etichetta appropriata del componente del tema. Clicca su uno dei link sottostanti per crearne uno.

Supporto Bug UX Feature

Funzionalità

Di default, questo banner appare in tutte le pagine di primo livello (latest/new/unread/top/categories… qualsiasi cosa impostata nell’impostazione del sito top menu), ma può anche essere configurato per apparire solo nella home page della community.

Impostazioni

Nome	Descrizione
show on	Determina in quali pagine appare il banner
plugin outlet	Dove nella pagina apparirà il banner
background image light	Immagine di sfondo per il banner nei temi chiari
background image dark	Immagine di sfondo per il banner nei temi scuri
tile background image	Ripeti l’immagine di sfondo
show for	Chi può vedere il banner di ricerca (utenti loggati, non loggati o entrambi)
special style	Varianti opzionali che modificano l’aspetto del banner di ricerca

Traduzione	Default
search_banner.headline	Benvenuti nella nostra community
search_banner.subhead	Siamo felici di averti qui. Se hai bisogno di aiuto, cerca prima di pubblicare.
search_banner.search_button_text

Per omettere uno di questi elementi, lascia il campo vuoto.

Stile personalizzato

L’elemento HTML riceve una classe denominata .display-search-banner ogni volta che questo banner appare, e il banner stesso è racchiuso nella 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

Ringraziamenti

Questo componente si basa pesantemente su Pavilion Header Search Theme Component di @angus

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

[awesomerobot (Kris)]

Ho aggiornato il componente del tema per aggiungere alcune nuove impostazioni:

show on — determina dove appare il banner e offre le seguenti opzioni:

• top_menu (ultimi/categorie/più visti/novi/non letti)
• homepage
• all (tutte le pagine tranne la pagina di ricerca predefinita e le pagine di amministrazione)

show for — determina chi vede il 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.