Баннер расширенного поиска

[Discourse]

Этот компонент темы устарел и больше не должен использоваться. Его функции теперь включены в ядро Discourse — см. нашу документацию для получения подробной информации о настройке приветственного баннера:

→ Creating a banner to display at the top of your site

	Краткое описание	Advanced Search Banner добавляет строку поиска вместе с необязательными заголовком и подзаголовком в баннер над основной навигацией списка тем.
	Предпросмотр	Предпросмотр в Discourse Theme Creator
	Ссылка на репозиторий	https://github.com/discourse/discourse-search-banner
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

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

Поскольку это #официальный компонент темы, поддерживаемый командой Discourse, запросы на #поддержка, #содействие:ошибки, #содействие:UX и #содействие:функции можно оставлять в соответствующих категориях на Meta и помечать соответствующим тегом компонента темы. Нажмите на ссылку ниже, чтобы создать тему.

Поддержка Ошибка UX Функция

Возможности

По умолчанию этот баннер отображается на всех страницах верхнего уровня (последние/новые/непрочитанные/топ/категории… всё, что находится в верхнем меню в настройках сайта), но его также можно настроить так, чтобы он отображался только на главной странице сообщества.

Настройки

Имя	Описание
показывать на	Определяет, на каких страницах отображается баннер
выход плагина	Место на странице, где появится баннер
фоновое изображение (светлая тема)	Фоновое изображение баннера для светлых цветовых схем
фоновое изображение (темная тема)	Фоновое изображение баннера для темных цветовых схем
тайловое фоновое изображение	Повторять фоновое изображение
показывать для	Кто может видеть баннер поиска (авторизованные, неавторизованные или все)
специальный стиль	Необязательные варианты, изменяющие внешний вид баннера поиска

Перевод	По умолчанию
search_banner.headline	Добро пожаловать в наше сообщество
search_banner.subhead	Мы рады видеть вас здесь. Если вам нужна помощь, пожалуйста, выполните поиск перед созданием темы.
search_banner.search_button_text

Чтобы скрыть какое-либо поле, оставьте его пустым.

Пользовательское оформление

HTML-элемент получает класс .display-search-banner везде, где появляется этот баннер, а сам баннер обернут в класс .custom-search-banner, поэтому с помощью CSS вы сможете настроить внешний вид этого баннера по своему усмотрению.

Будущие улучшения

• Добавить возможность включения баннера в конкретных категориях

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

Этот компонент сильно основан на работе @angus’ Pavilion Header Search Theme Component

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

[awesomerobot (Kris)]

Я обновил компонент темы, добавив несколько новых настроек:

show on — определяет, где будет отображаться баннер, и имеет следующие варианты:

• top_menu (последние/категории/топ/новые/непрочитанные)
• homepage
• all (все страницы, кроме страницы поиска по умолчанию и страниц администратора)

show for — определяет, кто видит баннер:

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

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

Это можно включить с помощью нового параметра «специальный стиль». Всё, что он делает, — это добавляет немного дополнительного CSS.

Возможно, в будущем я добавлю здесь ещё несколько опций!

[AndyBr (Andy)]

Как изменить цвет текста «Добро пожаловать» в этом дополнении?

[Arkshine]

Для этого нет настройки. Однако вы можете добавить это с помощью CSS:

Добавьте следующее в вашу тему или новый компонент темы и измените по своему усмотрению.

.search-banner > .custom-search-banner {
    /* заголовок */
    h1 {
        color: #286989;
    }
    
    /* описание */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

Огромное спасибо!

[RBoy]

Есть ли способ скрыть иконку поиска (с помощью CSS или другими способами)? У меня возникла проблема, при которой иконка поиска дублируется при использовании вместе с этим компонентом: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

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

Я бы порекомендовал использовать только один из этих вариантов.

[RBoy]

Спасибо! Очень полезно

@isaac

Однако стоит отметить, что использование баннера поиска и поиска в заголовке в режиме параллельного отображения вызывает некоторые негативные побочные эффекты с точки зрения UX.

Не могли бы вы уточнить, какие именно побочные эффекты с точки зрения UX?

[isaac (Isaac Janzen)]

Видео, на которое я ссылался выше, показывает несколько проблем

• Перекрывающиеся выпадающие списки поиска
• Странные состояния открытия и закрытия выпадающих списков поиска
• Иконка поиска является ссылкой на расширенный поиск в одном поле ввода, но не в другом
• и т.д.

[RBoy]

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

[مباركمبارك (مبارك)]

Может, кто-нибудь поможет? Я установил эту тему на свой Discourse, но изображение обрезается справа. Чтобы изображение поместилось полностью, мне приходится менять шрифт сайта на «Меньше». У меня две разные установки Discourse: в одной изображение отображается нормально, а в другой — почему оно обрезается?

[awesomerobot (Kris)]

Можете приложить скриншот? Это значительно упростит понимание проблемы.

[ecki (Bernd)]

У меня та же проблема: разные браузеры и режимы отображают разные части этого изображения. Я решил это, сделав изображение очень широким, чтобы правая сторона показывалась только при определённых условиях. Но для симметричных изображений это не так просто. Думаю, немного дополнительного CSS (без поиска thome-component-overwrite) помогло бы в этом.

[مباركمبارك (مبارك)]

Мне удалось решить часть проблемы: я отключил компонент темы в других темах и оставил его только в одной. Как бы это ни казалось невероятным, изображение стало «нормальным», а размер шрифта — «обычным». Однако из-за того, что я использую мобильный телефон, отображается только одна сторона изображения. Есть ли что-то, что я могу сделать, чтобы изображение отображалось полностью и на моём мобильном телефоне?

[Surbhi_Pal1 (Surbhi)]

Здравствуйте,

Есть ли способ убрать отступ между поисковым баннером и заголовком?

[Arkshine]

Привет, вы можете использовать этот CSS в новом компоненте темы:

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

Работало отлично, спасибо!

[PT_LB (Paul)]

Кажется, в Discourse та же проблема, что и в моем сообществе: оверлей тратит некоторое время на то, чтобы покрыть всё, что находится под поисковым слоем (Discover):

У меня в сообществе это выражено сильнее:

Интересно, сталкивался ли кто-то с решением этой проблемы, возможно, с задержкой отображения оверлея? Это может привести к плохому пользовательскому опыту.