Расширенный поиск заголовков

:discourse2: Краткое описание Расширенный поиск в заголовке удаляет значок поиска из меню заголовка и создает строку поиска, расположенную в центре области заголовка.
:eyeglasses: Предпросмотр Предпросмотр в конструкторе тем Discourse
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/discourse-header-search
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

:white_exclamation_mark:Примечание

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

Возможности

Настройки

Название Описание
дополнительные значки поиска Добавить дополнительные значки в строку поиска (например, для запуска внешнего поиска).
svg значки

Опциональное отображение значков внешнего поиска

Используйте параметр extra_search_icons, чтобы отображать дополнительные значки в строке поиска.

Эта настройка поддерживает следующие параметры:

  • prefix: префикс URL-адреса поиска при нажатии на соответствующий значок
  • icon: значок для отображения из набора Font Awesome (может потребоваться также добавить его в настройку svg icons)
  • target: опционально установите значение “_blank”, чтобы по умолчанию открывать ссылку в новой вкладке/окне
  • showInCategories: ID категорий, где данный значок должен отображаться исключительно (по умолчанию значок отображается везде)
  • excludeFromCategories: ID категорий, где данный значок не должен отображаться

Благодарности

Спасибо @Johani за код панели поиска на JavaScript :+1:


:discourse2: Размещено у нас? Компоненты тем доступны для использования в наших тарифах Standard, Business и Enterprise.

37 лайков

Я только что обновил компонент, благодаря чему иконка поиска по умолчанию будет отображаться на мобильных устройствах:

6 лайков

Теперь это работает отлично.

:kissing_heart: @JammyDodger

:kissing_heart: @awesomerobot

Спасибо.

5 лайков

Привет, прежде всего, действительно отличный компонент темы. У меня всё работает очень хорошо.

У меня есть небольшое предложение по улучшению. Строка поиска, безусловно, не должна отображаться в форуме, требующем входа, так как её всё равно нельзя использовать.

4 лайка

Я был бы очень рад, если бы кто-нибудь мог исправить эту ошибку. Я знаю, что это затрагивает не многих, но я люблю этот компонент темы, и эта проблема мешает мне его использовать :cry:

1 лайк

Я только что обновил код, чтобы скрыть строку поиска у неавторизованных пользователей, когда вход в систему обязателен

3 лайка

Я также добавил обновление, которое использует цвета заголовка (основной цвет заголовка и цвет фона заголовка) для поля ввода

4 лайка

Похоже, компонент отключает новый переключатель заголовка и боковой панели.

4 лайка

Спасибо, что нашли это, @manuel!

Я только что выпустил исправление :tada:

6 лайков

Ещё один небольшой сбой, с которым я столкнулся: я могу использовать стандартное сочетание клавиш «/» для перехода в поле поиска. Но выпадающий список с результатами не раскрывается. Чтобы это произошло, мне нужно вручную кликнуть в поле ввода, что делает клавиатурное сочетание практически бесполезным.

1 лайк

Использование компонента снова отключает переключатель заголовка и боковой панели. Я предполагаю, что это связано с изменением настроек боковой панели.

3 лайка

Это должно быть исправлено в последнем PR FIX: Refactor to include sidebar toggle by jordanvidrine · Pull Request #12 · discourse/discourse-header-search · GitHub

3 лайка

@jordan.vidrine Привет, могу ли я использовать этот компонент как стандартный в мобильном заголовке?

1 лайк

Я обдумывал это ещё до релиза, но в мобильном заголовке просто не хватает места для корректной работы этого элемента.

4 лайка

Спасибо за отличный компонент.

Есть ли способ настроить цвет рамки поля поиска?

Screenshot from 2023-03-02 10-13-59

Для меня она выглядит как серая, а мне бы хотелось, чтобы она была #FFFFFF белого цвета.

2 лайка

Вы можете настроить этот цвет, добавив немного CSS в локальный компонент темы, если у вас есть такой, который вы создали для добавления пользовательского CSS.

Если вы не делали этого, перейдите по адресу /admin/customize/themes и нажмите на компоненты, затем установить.

Когда появится модальное окно, выберите Создать новый, затем дайте имя вашему компоненту. Вы будете перенаправлены на новую страницу компонента, где сможете выбрать тему, к которой его применить. Примените его к установленной теме.

Чтобы добавить CSS, нажмите на Редактировать CSS/HTML, добавьте CSS на страницу common и сохраните.

Вы должны сделать что-то вроде этого:

.search-menu .search-input {
    border: 1px solid #FFFFFF
}
2 лайка

Спасибо @jordan.vidrine за подробные инструкции.

Недавно я уже научился добавлять пользовательский CSS с помощью других добрых людей на этом форуме.

3 лайка

Это может помочь вам при дальнейших изменениях :slight_smile:
https://meta.discourse.org/t/make-css-changes-on-your-site/168101#how-do-i-find-which-selectors-to-use-6
Здесь объясняется, как определить, какой элемент нужно стилизовать с помощью CSS.

4 лайка

Могу ли я убрать эту строку и использовать медиа-запросы, чтобы отключить её до 768 пикселей, не сломав всё? :slight_smile:

Я хотел бы убрать кнопку (потому что там у нас чаты и видео) на планшете, и я вижу, что поле поиска вписывается вполне нормально.

1 лайк

Всё в порядке, но в мобильной версии нужно переключиться на стандартный поиск, потому что он выглядит ужасно
image
vs
image

1 лайк