Posso colocar o formulário de busca no topo da nossa página 404?

[mattdm (Matthew Miller)]

O design atual prioriza tópicos populares, que por sua natureza tendem a ser gerais. Alguém que encontra um 404 provavelmente está procurando por algo específico. Sem adivinhar magicamente o que era, parece que fornecer proeminentemente uma caixa de pesquisa seria o ideal. Eu sei que ela está lá embaixo, mas… é meio difícil de encontrar.) Existe uma maneira fácil de reorganizar isso?

E já que estamos falando nisso, algo que se estenda pela página em vez da pequena caixa atual na parte inferior.

Também poderia ser bom pré-preencher a pesquisa com algo construído a partir da URL de não encontrado fornecida. Mas eu não pensei completamente nas implicações disso.

[cocococosti (Constanza Abarca)]

Algo assim?

Eu acho que deveria ser possível ocultar o componente page-not-found-search na parte inferior com display: none e, em seguida, inserir o código para a caixa de pesquisa na parte superior usando os plugin outlets: Using Plugin Outlet Connectors from a Theme or Plugin

Você também pode adicionar algum CSS para modificar a largura da área de texto. Note que eu não testei realmente nada disso, apenas tentei diretamente no console do navegador.

Este é o código para a caixa de pesquisa:

<div class="row">
    <div class="page-not-found-search-top">
      <h2>Search this site</h2>
      <p>
        </p><form action="/search" id="discourse-search">
          <input type="text" name="q" value="">
          <button class="btn btn-primary">Search</button>
        </form>
      <p></p>
    </div>
</div>

[mattdm (Matthew Miller)]

Gosto muito disso, sim, obrigado! Vou experimentar ainda hoje.

[mattdm (Matthew Miller)]

Você pode me ajudar a descobrir qual é a saída correta aqui? Eu já usei o conceito antes para adicionar um texto explicativo à página de Badges, mas (deprecated) Plugin outlet locations theme component não parece funcionar na página 404 e não consigo descobrir o que colocar no wrapper script.

[cocococosti (Constanza Abarca)]

Parece que não há saídas de plugin na página 404 e, de acordo com How to add custom JS code to the 404 pages?, você tem que usar JavaScript puro.

Tente adicionar algo como isto à aba Body, em um componente de tema:

<script type="text/javascript">
    var x = document.getElementsByClassName("page-not-found");
    var search = '<div class="page-not-found-search-top"><h2>Pesquisar neste site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Pesquisar</button></form><p></p></div>'
    x.item(0).innerHTML += search
</script>

Pode ser necessário fazer alguns ajustes com CSS, tente:

.page-not-found-search {
    display: none;
}

.page-not-found-search-top button {
    margin-left: 10px;
}

.page-not-found-search-top input {
    width: 600px;
}

Espero que isso ajude!

[hhlp]

Sim, sem plug-ins em 404 Página não encontrada, funciona perfeitamente com suas instruções

cole isto na tag BODY:

    var x = document.getElementsByClassName("page-not-found"); 
    var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
    x.item(0).innerHTML += search

e cole isto na parte CSS:

.page-not-found-search {
    display: none;
}

.page-not-found-search-top button {
    margin-left: 10px;
}

.page-not-found-search-top input {
    width: 600px;
}

funciona no celular também…

e obrigado pela sua resposta

Atenciosamente.,

[rmccown (Bob McCown)]

Isso funciona muito bem. Hora de personalizá-lo um pouco mais.

Editar: Isso causou erros no meu log de erros.

TypeError: null is not an object (evaluating 'x.item(0).innerHTML') URL: https://mysite.com/theme-javascripts/33ba1ce8896576423974ff03c875fe32931690cc.js?__ws=mysite.com Linha: 2

[rmccown (Bob McCown)]

Respondendo a mim mesmo. Envolvi a chamada .innerHTML em um bloco try/catch

<script type="text/javascript">
    var x = document.getElementsByClassName("page-not-found");
    var search = '<div class="page-not-found-search-top"><h2>Search this site</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">Search</button></form><p></p></div>'
    try {
        x.item(0).innerHTML += search
    } catch (error) {
    }
</script>

[hhlp]

Estamos em operação e não há erro do nosso lado.

Atenciosamente,

[mattdm (Matthew Miller)]

Obrigado @hhlp

E parece ótimo! Equipe Discourse, algum motivo para isso não ser o padrão?

[cocococosti (Constanza Abarca)]

Ao olhar para commits antigos, a posição da barra de pesquisa parece ser algo que acabou de acontecer? Herdado de onde a pesquisa do Google costumava estar, que foi adicionada com o lançamento inicial do Discourse.

Concordo que fica melhor no topo.