Могу ли я разместить форму поиска в верхней части нашей страницы 404?

Поддержка
1

Текущий дизайн отдаёт приоритет популярным темам, которые по своей природе обычно носят общий характер. Пользователь, столкнувшийся с ошибкой 404, вероятно, ищет что-то конкретное. Если не угадать магическим образом, что именно, то идеальным решением кажется выделение поисковой строки на видном месте. Я знаю, что она есть внизу, но… найти её довольно сложно.) Есть ли простой способ это изменить?

И пока мы об этом, было бы здорово сделать поисковую строку на всю ширину страницы, а не оставлять крошечное поле внизу.

Также возможно, было бы неплохо автоматически заполнять поиск строкой, составленной из отсутствующего URL. Но я ещё не продумал все последствия такого решения.

3

Что-то вроде этого?

Screen Shot 2021-12-01 at 13.22.18
Screen Shot 2021-12-01 at 13.22.181152×761 71.1 KB

Думаю, это возможно: скрыть компонент 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>Поиск по сайту</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>
</div>
4

Очень похоже, да, спасибо! Я попробую это позже сегодня.

5

Можете помочь понять, какой правильный outlet нужно использовать здесь? Я уже применял эту концепцию, чтобы добавить пояснительный текст на страницу значков, но (deprecated) Plugin outlet locations theme component, похоже, не работает на странице 404, и я не могу понять, что именно нужно указать в обёртке script.

6

Похоже, на странице 404 нет мест для плагинов, и, согласно How to add custom JS code to the 404 pages?, вам нужно использовать чистый JavaScript.

Попробуйте добавить что-то вроде этого во вкладку 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;
}

Надеемся, это поможет!

7

Да, без плагинов. Страница 404 «Страница не найдена» работает отлично благодаря вашим инструкциям.

Вставьте этот код в тег 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;
}

Работает и на мобильных устройствах…

Спасибо за ваш ответ.

С уважением.

8

Это работает отлично. Пора немного доработать его под себя.

:+1:

Редактирование: Из-за этого в мой журнал ошибок стали попадать сообщения об ошибках.

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

9

Отвечаю сам себе. Я обернул вызов .innerHTML в блок try/catch

<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>'
    try {
        x.item(0).innerHTML += search
    } catch (error) {
    }
</script>
10

Мы работаем в штатном режиме, и с нашей стороны ошибок нет.

С уважением.

11

Спасибо @hhlp :slight_smile:

И выглядит отлично! Команда Discourse, есть ли причина, почему это не установлено по умолчанию?

15

Судя по старым коммитам, положение строки поиска, похоже, возникло случайно? Оно унаследовано от места, где раньше была строка поиска Google, которая была добавлена при первоначальном выпуске Discourse.

Согласен, что сверху это выглядит лучше.