現在のデザインでは、自然と一般的になりがちな人気のトピックが優先されています。404エラーに遭遇したユーザーは、むしろ何か特定のものを探している可能性が高いです。それを魔法のように推測する以外に、検索ボックスを目立つように表示するのが理想的だと思われます。一番下にあるのは分かっていますが…見つけるのはかなり難しいです。)これを並べ替える簡単な方法はありますか？
ついでに、現在のページ下部にある小さなボックスではなく、ページ全体に広がるものがあると良いでしょう。
見つからなかったURLから構築された何かで検索を事前入力しておくのも良いかもしれませんが、その完全な影響についてはまだ考えていません。
こんな感じですか？
display: none を使って下部にある page-not-found-search コンポーネントを非表示にし、プラグインのアウトレットを使って検索ボックスのコードを上部に挿入することで可能になると思います: Using Plugin Outlet Connectors from a Theme or Plugin
また、textareaの幅を変更するためにCSSを追加することもできます。これはブラウザのコンソールで直接試しただけで、実際にテストしたわけではありません。
こちらが検索ボックスのコードです:
<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>
はい、その通りです。ありがとうございます！後で試してみます。
ここで適切なアウトレットを特定するのを手伝ってもらえますか？以前、Badgesページに説明テキストを追加するためにこの概念を使用しましたが、(deprecated) Plugin outlet locations theme component は404ページでは機能しないようで、scriptラッパーに何を入れるべきかわかりません。
404ページにプラグインのアウトレットがないようです。How to add custom JS code to the 404 pages? によると、ピュアJSを使用する必要があるとのことです。
テーマコンポーネントの「Body」タブに以下のようなものを追加してみてください。
<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>
CSSで調整が必要になる場合があります。以下を試してみてください。
.page-not-found-search {
display: none;
}
.page-not-found-search-top button {
margin-left: 10px;
}
.page-not-found-search-top input {
width: 600px;
}
お役に立てば幸いです！
はい、404ページが見つからない場合、プラグインのアウトレットはありません。指示通りにうまく機能します。
これを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
そして、これをCSS部分に貼り付けます。
.page-not-found-search {
display: none;
}
.page-not-found-search-top button {
margin-left: 10px;
}
.page-not-found-search-top input {
width: 600px;
}
モバイルでも動作します……
返信ありがとうございます。
敬具
これは素晴らしいですね。もう少しカスタマイズする時間です。
編集：これにより、エラーログにエラーがスローされました。
TypeError: null is not an object (evaluating 'x.item(0).innerHTML') Url: https://mysite.com/theme-javascripts/33ba1ce8896576423974ff03c875fe32931690cc.js?__ws=mysite.com Line: 2
自分で返信します。.innerHTML 呼び出しを 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 
ありがとうございます。
そして、素晴らしいですね！Discourseチーム、これがデフォルトではない理由は何ですか？
古いコミットを見ると、検索バーの位置は最近になって発生したことのようです。Discourse の初期リリース時に追加された、以前の Google 検索があった場所から継承されたものです。
上部にある方が見栄えが良いことに同意します。
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.