현재 디자인은 인기 있는 주제를 우선시하는데, 이런 주제들은 본질적으로 일반적일 수밖에 없습니다. 404 에러에 부딪힌 사용자는 대부분 특정 내용을 찾고 있을 가능성이 높습니다. 그 내용을 마법처럼 추측하는 것이 불가능하다면, 검색 상자를 눈에 잘 띄는 곳에 배치하는 것이 이상적이라고 생각합니다. 검색 상자가 페이지 하단에 있다는 건 알고 있지만… 찾기가 좀 어렵거든요. 이 레이아웃을 쉽게 재배치할 수 있는 방법이 있을까요?
그에 맞춰, 현재 하단에 있는 작은 상자 대신 페이지 전체 너비를 가로지르는 형태로 변경하는 것도 좋을 것 같습니다.
찾지 못한 URL을 기반으로 검색어를 미리 채워 넣는 것도 괜찮을 수 있습니다. 하지만 그로 인한 모든 영향을 충분히 고려해 보지는 못했습니다.
이런 식으로?
아래쪽의 page-not-found-search 컴포넌트를 display: none으로 숨기고, 플러그인 아웃렛을 사용하여 상단에 검색 상자 코드를 삽입하면 가능할 것 같습니다: Using Plugin Outlet Connectors from a Theme or Plugin
텍스트 영역의 너비를 수정하기 위해 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>
네, 딱 그런 느낌이에요. 감사합니다! 오늘 나중에 한번 시도해볼게요.
여기서 적절한 outlet이 무엇인지 확인하는 데 도움을 받을 수 있을까요? 이전에는 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>이 사이트 검색</h2><p></p><form action="/search" id="discourse-search"><input type="text" name="q" value=""><button class="btn btn-primary">검색</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 태그에 붙여넣으세요:
<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;
}
모바일에서도 작동합니다…
답변해 주셔서 감사합니다.
감사합니다.
이건 정말 잘 작동하네요. 이제 좀 더 커스터마이징을 해봐야겠어요.
수정: 에러 로그에 오류가 발생하고 있습니다.
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 팀, 이것이 기본값이 아닌 이유가 있나요?
olds의 커밋을 살펴보면, 검색 바의 위치는 우연히 그렇게 된 것처럼 보입니다. Discourse의 초기 릴리스와 함께 추가되었던 구글 검색이 있던 위치에서 이어받은 것으로 보입니다.
상단에 배치하는 것이 더 좋아 보입니다.