Posso mettere il modulo di ricerca in cima alla nostra pagina 404?

[mattdm (Matthew Miller)]

L’attuale design dà priorità agli argomenti popolari, che per loro natura tendono ad essere generali. Qualcuno che incontra un 404 sta probabilmente cercando qualcos’altro di specifico. A parte indovinare magicamente di cosa si trattasse, sembra che fornire in modo prominente una casella di ricerca sarebbe l’ideale. So che è lì in fondo, ma… è difficile da trovare.) C’è un modo semplice per riorganizzare questo?

E già che ci siamo, qualcosa che si estenda per tutta la pagina invece dell’attuale piccola casella in fondo.

Potrebbe anche essere bello pre-compilare la ricerca con qualcosa costruito dall’URL non trovato fornito. Ma non ho pensato a tutte le implicazioni di questo.

[cocococosti (Constanza Abarca)]

Qualcosa del genere?

Penso che dovrebbe essere possibile nascondere il componente page-not-found-search in basso con display: none e poi inserire il codice per la casella di ricerca in alto usando i plugin outlets: Using Plugin Outlet Connectors from a Theme or Plugin
Potresti anche aggiungere del CSS per modificare la larghezza della textarea. Nota che non ho testato nulla di tutto ciò, l’ho solo provato direttamente nella console del browser.

Questo è il codice per la casella di ricerca:

<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)]

Molto bene, sì, grazie! Ci proverò più tardi oggi.

[mattdm (Matthew Miller)]

Puoi aiutarmi a capire quale sia la presa corretta qui? Ho già usato il concetto per aggiungere del testo esplicativo alla pagina Badge, ma (deprecated) Plugin outlet locations theme component non sembra funzionare sulla pagina 404 e non riesco a capire cosa inserire nel wrapper script.

[cocococosti (Constanza Abarca)]

Sembra che non ci siano punti di estensione per i plugin nella pagina 404 e, secondo How to add custom JS code to the 404 pages?, devi usare JavaScript puro.

Prova ad aggiungere qualcosa di simile alla scheda Body, in un componente del tema:

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

Potrebbe essere necessario apportare alcune modifiche al CSS, prova:

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

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

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

Spero che questo aiuti!

[hhlp]

Sì, nessun plugin è stato inserito nella pagina 404 Pagina non trovata, funziona a meraviglia con le tue istruzioni

incolla questo nel 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 incolla questo nella 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;
}

funziona anche su mobile…

e grazie per la tua risposta

Saluti.,

[rmccown (Bob McCown)]

Funziona benissimo. È ora che lo personalizzi un po’ di più.

Modifica: Questo ha causato errori nel mio registro degli errori.

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

[rmccown (Bob McCown)]

Rispondendo a me stesso. Ho racchiuso la chiamata .innerHTML in un blocco 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]

Siamo in attività e non ci sono errori da parte nostra

Saluti.,

[mattdm (Matthew Miller)]

Grazie @hhlp

E sembra fantastico! Team Discourse, c’è un motivo per cui questo non è l’impostazione predefinita?

[cocococosti (Constanza Abarca)]

Guardando i vecchi commit, la posizione della barra di ricerca sembra essere qualcosa che è appena successo? Ereditata da dove si trovava la ricerca di Google, che è stata aggiunta con il rilascio iniziale di Discourse.

Concordo sul fatto che sembri meglio in alto.