Создание баннера для отображения в верхней части вашего сайта

:bookmark: Это руководство объясняет различные методы создания и настройки баннеров на вашем сайте Discourse — от простых закрываемых баннеров до более продвинутых вариантов.

:person_raising_hand: Требуемый уровень доступа пользователя: Модератор (закрываемый баннер), Администратор

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

Приветственный баннер

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

Чтобы включить и настроить приветственный баннер, перейдите в административную панель и выберите ссылку Внешний вид > Приветственный баннер в боковом меню.

В этом разделе вы найдете следующие настройки:

  • Включено для тем…: Позволяет указать, какие из ваших активных тем должны отображать приветственный баннер.
  • Фоновое изображение: Загрузите изображение, которое будет служить фоном для вашего приветственного баннера.
  • Цвет текста: Если цвет текста по умолчанию, управляемый вашей цветовой палитрой, конфликтует с фоновым изображением, вы можете выбрать здесь новый цвет. Обратите внимание, что эта настройка применяется только при наличии загруженного фонового изображения.
  • Видимость на страницах: Определяет, на каких страницах отображается приветственный баннер. По умолчанию он показывается на Страницах верхнего меню (то есть на страницах, выбранных в настройке сайта Верхнее меню), но вы можете изменить это на:
    • Только главная страница: Приветственный баннер отображается только на главной странице сайта (то есть на первой странице, указанной в настройке сайта Верхнее меню).
    • Страницы обнаружения: Приветственный баннер отображается на всех страницах Верхнего меню, даже если они не отображаются в фактическом верхнем меню вашего сайта (то есть не выбраны в настройке).
    • Все страницы: Приветственный баннер отображается на всех страницах вашего сайта. Это обычно не рекомендуется, так как может создать визуальный шум на страницах тем, отвлекая участников от чтения и участия в обсуждениях.
  • Расположение: Определяет, где на странице отображается приветственный баннер. По умолчанию он показывается Над содержимым темы, но вы также можете выбрать Под заголовком сайта. Разница довольно тонкая и показана на скриншотах ниже:

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

  • Заголовок для новых участников: Основное приветствие, показываемое новым участникам при их первом входе на сайт.
  • Заголовок для авторизованных участников: Основное приветствие, показываемое возвращающимся участникам.
  • Заголовок для анонимных посетителей: Основное приветствие, показываемое анонимным (то есть не авторизованным) пользователям.
  • Подзаголовок для авторизованных участников: Дополнительная строка текста под заголовком, показываемая возвращающимся участникам.
  • Подзаголовок для анонимных посетителей: Дополнительная строка текста под заголовком, показываемая анонимным (то есть не авторизованным) пользователям.
  • Текст-заполнитель поиска: Текст-заполнитель, отображаемый в поле поиска приветственного баннера.

Закрываемый баннер

Закрываемый баннер — это временное уведомление, которое пользователи могут закрыть. Вот как его создать:

  1. Создайте или перейдите к теме в любой публичной категории. Первый пост (OP) вверху темы станет источником вашего баннера.
  2. Откройте административные опции, нажав на значок гаечного ключа справа или внизу темы.
  3. Выберите «Закрепить тему…»
  4. В новом окне выберите :pushpin: Сделать тему баннером

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

:information_source: Советы по созданию эффективных закрываемых баннеров:

  • Держите текст четким и лаконичным
  • Максимальная высота составляет 20vh (настраивается через CSS)
  • Для более длинного текста пользователи могут прокручивать его внутри баннера
  • Рассмотрите возможность добавления ссылки на соответствующую публичную тему для получения дополнительной информации
  • Если вы хотите скрыть тему, используемую в качестве баннера, вы можете исключить её из списка, используя административное меню темы

Постоянный баннер

Чтобы создать баннер, который всегда виден и не может быть закрыт пользователями:

  1. В настройках вашего сайта найдите global_notice.
  2. Введите текст баннера или HTML-код в это поле.

:information_source: Советы по постоянным баннерам:

  • Этот тип баннера обычно используется для срочных сообщений сайта, но может применяться для любого постоянного сообщения
  • Этот баннер виден всем, включая анонимных пользователей на сайтах с требованием login_required
  • Баннер можно удалить, сбросив настройку сайта global notice

Продвинутые баннеры

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

Баннер приветствия со ссылками

Этот компонент позволяет добавлять на баннер пользовательский текст и от 1 до 4 ссылок. Он предлагает различные варианты настройки, включая:

  • Выбор места отображения баннера (главная страница, списки тем или все страницы)
  • Добавление ссылок с иконками Font Awesome
  • Ограничение видимости в зависимости от уровня доверия пользователя
  • Настройка фоновых изображений или цветов
  • Изменение цветов текста и иконок

Универсальный баннер

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

  • Ограничение отображения баннера только для:
    • авторизованных или анонимных пользователей
    • мобильных или настольных устройств
    • главной страницы, списка тем или всех страниц
  • Варианты: закрываемый, расширяемый или постоянный
  • Настройка на полную ширину браузера
  • Управление цветами
  • Настройка заголовков и колонок с использованием HTML

Настройка баннеров с помощью CSS

Вы можете настроить все типы баннеров с помощью CSS. Для получения дополнительной информации о использовании CSS для настройки вашего сайта Discourse см. Руководство для начинающих по использованию тем Discourse.

43 лайка

Я не смог найти эту опцию… Это новая функция в бета-версии?

Обновление: после обновления с версии 3.4.6 до 3.5.0 она стала видна:

2 лайка

В сборке 3.6.0.beta1-dev (e44347414a) обнаружена ошибка.

Изменение этого текста сайта не влияет на текст в строке поиска: там по-прежнему всегда отображается Search. Протестировано на Windows 10 x64 с браузером Chrome.

3 лайка

Работаю над исправлением этого здесь: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

7 лайков

Потрясающе, спасибо — это решило проблему!

2 лайка

Возникла проблема с фоновым изображением приветственного баннера.
Я использую бакеты Cloudflare R2 S3 для объектного хранения на рассматриваемом сайте.
При загрузке фонового изображения в разделе администратора оно отображается корректно: если нажать, чтобы показать его в полном размере, всё работает. Если же щёлкнуть правой кнопкой мыши и открыть изображение в новой вкладке, оно тоже отображается, используя публичный URL бакета:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg


Однако то, что внедряется в CSS, — это такой URL:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

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

Это баг в коде или я что-то делаю не так?

После дополнительного изучения выяснилось, что за фоновое изображение отвечает этот CSS:

Если вручную заменить URL в инспекторе, всё работает.
Я попытался переопределить это следующим образом:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

Но это не помогло. Всё ещё кажется, что это баг.

1 лайк

@tknospdr, я не совсем понимаю, с какой проблемой вы столкнулись?

Я проверил ваш сайт https://eu.technospider.com и вижу, что фоновое изображение отображается как ожидалось:

Кажется, я наконец-то заставил работать переопределение CSS. Проблема в том, что в нём вообще не должно быть необходимости.

Похоже, код баннера использует неверный ресурс, если вы размещаете сайт на Cloudflare S3.

Какой именно у вас переопределение?

С нашей стороны мы можем убедиться, что в CSS применяется только путь URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Полагаю, это правило будет работать у вас без необходимости каких-либо переопределений?

Мое полное переопределение:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

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

1 лайк

Всем привет,

с последним обновлением Discourse компонент темы Advanced Search Banner больше не поддерживается и, судя по всему, больше не обновляется. Вместо него теперь доступна официальная расширенная версия Welcome Banner.

Проблема в том, что в новой компоненте в данный момент можно выбрать только одно фоновое изображение. В старой компоненте Advanced Search Banner было возможно задать разные фоновые изображения для светлой и тёмной тем, что, конечно же, идеально подходило для различных макетов и тем.

Мой вопрос к сообществу:

  • Существует ли способ воспроизвести эту функциональность в Welcome Banner?

  • Может, кто-то уже реализовал расширение или обходное решение для использования разных фоновых изображений в светлой и тёмной темах?

  • Планируется ли, что разработчики когда-нибудь добавят эту возможность?

Буду рад любым подсказкам, советам или идеям!

Заранее спасибо!

2 лайка