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

: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 лайка