Banner de Pesquisa Avançada

[Discourse]

Este componente de tema está obsoleto e não deve mais ser usado. Seus recursos agora estão no Discourse Core — consulte nossa documentação para obter detalhes sobre como configurar um banner de boas-vindas:

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

	Resumo	O Advanced Search Banner (Banner de Pesquisa Avançada) coloca uma barra de pesquisa juntamente com texto opcional de título e subtítulo em um banner acima da navegação principal da lista de tópicos.
	Prévia	Prévia no Discourse Theme Creator
	Link do Repositório	https://github.com/discourse/discourse-search-banner
	Novo em Temas do Discourse?	Guia para iniciantes sobre como usar Temas do Discourse

Instalar este componente de tema

Como este é um componente de tema official mantido pela equipe do Discourse, solicitações de Support, Bug, UX e Feature podem ser feitas nas respectivas categorias aqui no Meta, e marcadas com a tag apropriada do componente de tema. Clique em um link abaixo para iniciar uma.

Suporte Bug UX Recurso

Recursos

Por padrão, este banner aparece em todas as páginas de tópicos de nível superior (latest/new/unread/top/categories… tudo na configuração de site top menu), mas também pode ser configurado para aparecer apenas na página inicial de uma comunidade.

Configurações

Nome	Descrição
show on	Isso determina em quais páginas o banner aparece
plugin outlet	Onde na página o banner aparecerá
background image light	Imagem de fundo para o banner em paletas de cores claras
background image dark	Imagem de fundo para o banner em paletas de cores escuras
tile background image	Repetir a imagem de fundo
show for	Quem pode ver o Search Banner (logado, deslogado ou ambos)
special style	Variações opcionais que alteram a aparência do banner de pesquisa

Tradução	Padrão
search_banner.headline	Bem-vindo à nossa comunidade
search_banner.subhead	Estamos felizes em ter você aqui. Se precisar de ajuda, por favor, pesquise antes de postar.
search_banner.search_button_text

Para omitir um da exibição, deixe o campo em branco.

Estilização personalizada

O elemento HTML recebe uma classe chamada .display-search-banner onde quer que este banner apareça, e o próprio banner é envolvido pela classe .custom-search-banner, então com algum CSS você deve ser capaz de personalizar a aparência deste banner como achar melhor.

Melhorias futuras

• Adicionar uma opção para habilitar o banner em categorias específicas

Créditos

Isto empresta muito do @angus’ https://meta.discourse.org/t/header-search-theme/67959

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Standard, Business e 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)]

Acabei de fazer uma pequena atualização que adiciona um estilo opcional a este componente, ele fornece uma barra de pesquisa grande sem texto de título:

Isso pode ser ativado por uma nova configuração de “estilo especial”. Tudo o que isso faz é ativar um pequeno CSS adicional.

Talvez eu adicione mais algumas opções aqui no futuro também!

[AndyBr (Andy)]

Como altero a cor do texto de boas-vindas neste complemento?

[Arkshine]

Não há configuração para isso. No entanto, você pode adicioná-la com um pouco de CSS:

Adicione o seguinte ao seu tema ou a um novo componente de tema e altere como desejar.

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

[AndyBr (Andy)]

Muito obrigado!

[RBoy]

Existe uma maneira de ocultar o ícone de pesquisa (usando CSS ou de outra forma)? Estou tendo um problema em que o ícone de pesquisa está sendo duplicado quando usado em conjunto com este componente: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

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

deve exibir apenas um ícone de pesquisa. No entanto, devo dizer que usar o banner de pesquisa e a pesquisa no cabeçalho em conjunto tem alguns efeitos colaterais negativos de UX.

Eu recomendaria usar um ou outro.

[RBoy]

Obrigado! Super útil

@isaac

Eu direi, no entanto, que usar o banner de pesquisa e a pesquisa no cabeçalho em conjunto tem alguns efeitos colaterais ruins de UX.

Você poderia elaborar, quais efeitos colaterais de UX?

[isaac (Isaac Janzen)]

O vídeo que linkei acima mostra alguns dos problemas :)\n\n- dropdowns de pesquisa sobrepostos\n- estados estranhos de abertura e fechamento dos dropdowns de pesquisa\n- o ícone de pesquisa é um link para pesquisa avançada em um campo de pesquisa e não no outro\n- etc

[RBoy]

Entendido. Desde que não estejam na mesma página, tudo bem.

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

Alguém pode me ajudar? Instalei este tema no meu Discourse, mas a imagem está cortando um pedaço no lado direito, para que a imagem caiba completamente tenho que definir a fonte do site como “Menor” Eu tenho duas instalações diferentes do Discourse e em uma delas a imagem funcionou normalmente, na outra a imagem por que está cortada?

[awesomerobot (Kris)]

você pode incluir uma captura de tela? isso tornará muito mais fácil entender o problema

[ecki (Bernd)]

Eu tenho o mesmo problema que navegadores/modos diferentes mostram partes diferentes dessa imagem. Eu resolvi tornando-a extra larga, então o lado direito só aparece em algumas condições. Mas isso não é tão fácil para imagens simétricas. Acho que mais CSS (sem procurar por uma substituição de componente thome) ajudaria com isso.

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

Consegui resolver parte, desativei o componente de tema nos outros temas e deixei apenas em 1, por incrível que pareça, a imagem ficou “normal” com o tamanho da fonte em “normal” apenas por causa do celular que só aparece um lado da imagem, será que tem algo que eu possa fazer para que apareça completamente no meu celular também?

[Surbhi_Pal1 (Surbhi)]

Olá,

Existe alguma forma de remover o espaçamento entre o banner de pesquisa e o cabeçalho?

[Arkshine]

Olá, você pode usar este CSS em um novo componente de tema:

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

[Surbhi_Pal1 (Surbhi)]

Funcionou perfeitamente, obrigado!

[PT_LB (Paul)]

Parece que o Discourse tem o mesmo problema que tenho em minha comunidade, a sobreposição leva algum tempo para cobrir o que está sob a sobreposição de pesquisa (Discover):

É mais pronunciado em minha comunidade:

Gostaria de saber se alguém encontrou uma solução para isso, potencialmente um atraso para exibir a sobreposição? Pode levar a uma má experiência.