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

[Discourse]

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

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

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

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

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

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

Возможности

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

Настройки

Имя	Описание
show on	Определяет, на каких страницах отображается баннер
plugin outlet	Место на странице, где будет отображаться баннер
background image light	Фоновое изображение для баннера на светлых цветовых палитрах
background image dark	Фоновое изображение для баннера на темных цветовых палитрах
tile background image	Повторять фоновое изображение
show for	Кто может видеть Search Banner (авторизованные, неавторизованные или оба)
special style	Необязательные вариации, изменяющие внешний вид поискового баннера

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

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

Пользовательские стили

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

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

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

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

Этот проект сильно заимствует идеи из Pavilion Header Search Theme Component пользователя @angus

Размещены у нас? Компоненты тем доступны для использования в наших тарифах 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):

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

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