Kann ich das Suchformular oben auf unserer 404-Seite platzieren?

[mattdm (Matthew Miller)]

Das aktuelle Design priorisiert beliebte Themen, die naturgemäß eher allgemein sind. Jemand, der auf eine 404-Seite stößt, sucht wahrscheinlich stattdessen nach etwas Bestimmtem. Abgesehen davon, dass man magisch errät, was das war, scheint es ideal zu sein, prominent ein Suchfeld anzubieten. Ich weiß, dass es unten vorhanden ist, aber… das ist irgendwie schwer zu finden.) Gibt es eine einfache Möglichkeit, dies neu anzuordnen?

Und während wir schon dabei sind, etwas, das sich über die Seite erstreckt, anstatt der aktuellen winzigen Box unten.

Es könnte auch schön sein, die Suche mit etwas vorab zu füllen, das aus der angegebenen Nicht-gefunden-URL erstellt wurde. Aber ich habe die vollen Auswirkungen davon noch nicht durchdacht.

[cocococosti (Constanza Abarca)]

So etwas wie das?\n\n

\n\nIch denke, es sollte möglich sein, die Komponente page-not-found-search unten mit display: none auszublenden und dann den Code für das Suchfeld oben mit Plugin-Outlets einzufügen: https://meta.discourse.org/t/adding-to-plugin-outlets-using-a-theme/32727\n\nSie könnten auch etwas CSS hinzufügen, um die Breite des Textbereichs zu ändern. Beachten Sie, dass ich dies nicht wirklich getestet habe, ich habe es nur direkt in der Browserkonsole ausprobiert.\n\nDies ist der Code für das Suchfeld:\n\n<div class=\"row\">\n <div class=\"page-not-found-search-top\">\n <h2>Search this site</h2>\n <p>\n </p><form action=\"/search\" id=\"discourse-search\">\n <input type=\"text\" name=\"q\" value=\"\">\n <button class=\"btn btn-primary\">Search</button>\n </form>\n <p></p>\n </div>\n</div>\n

[mattdm (Matthew Miller)]

Sehr gut, ja, danke! Ich werde es später heute ausprobieren.

[mattdm (Matthew Miller)]

Können Sie mir helfen herauszufinden, was hier die richtige Steckdose sein sollte? Ich habe das Konzept zuvor verwendet, um der Badges-Seite erklärenden Text hinzuzufügen, aber (deprecated) Plugin outlet locations theme component scheint auf der 404-Seite nicht zu funktionieren und ich kann nicht herausfinden, was ich in den script-Wrapper einfügen soll.

[cocococosti (Constanza Abarca)]

Es scheint, dass es keine Plugin-Ausgänge auf der 404-Seite gibt und laut How to add custom JS code to the 404 pages? reines JS verwendet werden muss.

Versuchen Sie, etwas wie das Folgende zum Tab Body in einer Theme-Komponente hinzuzufügen:

<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>'
    x.item(0).innerHTML += search
</script>

Möglicherweise müssen Sie einige Anpassungen mit CSS vornehmen. Versuchen Sie:

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

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

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

Ich hoffe, das hilft!

[hhlp]

Ja, keine Plugins-Outlets auf der 404-Seite nicht gefunden, funktioniert wie ein Zauber mit Ihren Anweisungen

Fügen Sie dies in den BODY-Tag ein:

    var x = document.getElementsByClassName("page-not-found"); 
    var search = '<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>'
    x.item(0).innerHTML += search

und fügen Sie dies in den CSS-Teil ein:

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

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

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

funktioniert auch auf dem Handy…

und danke für Ihre Antwort

Mit freundlichen Grüßen,

[rmccown (Bob McCown)]

Das funktioniert wunderbar. Zeit für mich, es noch ein wenig anzupassen.

Bearbeiten: Dies hat dazu geführt, dass Fehler in mein Fehlerprotokoll eingetragen wurden.

TypeError: null ist kein Objekt (Auswertung von 'x.item(0).innerHTML') URL: https://mysite.com/theme-javascripts/33ba1ce8896576423974ff03c875fe32931690cc.js?__ws=mysite.com Zeile: 2

[rmccown (Bob McCown)]

Antworte auf mich selbst. Ich habe den .innerHTML-Aufruf in einen try/catch-Block eingeschlossen

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

[hhlp]

Wir sind im Geschäft und es gibt keine Fehler auf unserer Seite.

Mit freundlichen Grüßen.

[mattdm (Matthew Miller)]

Danke @hhlp

Und es sieht großartig aus! Discourse-Team, gibt es einen Grund, warum dies nicht der Standard ist?

[cocococosti (Constanza Abarca)]

Durch die Betrachtung alter Commits scheint die Position der Suchleiste etwas zu sein, das gerade erst passiert ist? Übernommen von dort, wo sich früher die Google-Suche befand, die mit der ersten Veröffentlichung von Discourse hinzugefügt wurde.

Ich stimme zu, dass sie oben besser aussieht.