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

Discourse · 14.Февраль.2019 10:05:24


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

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

Возможности

Этот компонент темы является развитием предыдущих попыток создания баннеров. Цель состоит в том, чтобы обеспечить большую простоту и гибкость с помощью настроек темы.

Ниже приведены основные возможности:

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

Настройка содержимого баннера

Содержимое баннера разделено на основной заголовок и колонки. Вы можете использовать до 5 колонок, однако рекомендуется использовать 3 или меньше из-за ограничений по ширине. Предоставлены HTML-шаблоны, которые можно настроить под ваши индивидуальные потребности. Вы также можете управлять шириной каждой колонки и добавлять любое изображение или иконку Font Awesome в верхнюю часть каждой колонки.

Использование опции сохранения состояния

Опция сохранения состояния будет использовать до двух файлов cookie. Эти cookie будут содержать имя баннера и значение true/false, относящееся к состоянию баннера. Если у вас есть опасения по поводу использования файлов cookie на вашем сайте, лучше избегать использования этой настройки. Выбор относительного времени для настройки cookie_lifespan гарантирует, что баннер останется закрытым/развернутым/свернутым в течение указанного времени после нажатия пользователем соответствующей кнопки. Без этой настройки баннер сбрасывается при каждой полной загрузке страницы. Если вы внесли изменения в баннер и хотите убедиться, что все пользователи увидят эти изменения, даже те, которые ранее закрыли баннер, обязательно измените «имя cookie». Это по сути сбросит любое сохраненное состояние, а затем позволит пользователю снова закрыть баннер.

Настройки

Название	Описание
показывать для участников	Отображать баннер для пользователей, вошедших на форум
показывать для анонимов	Отображать баннер для анонимных пользователей
отображать на мобильных	Отображать баннер на мобильных устройствах
отображать на десктопах	Отображать баннер на компьютерах
отображать на главной	Отображать баннер на главной странице
url должен содержать	Введите пути, на которых должен отображаться баннер. Добавьте `*` в конец пути как подстановочный знак
закрываемый	Разрешить пользователям закрывать баннер
сворачиваемый	Разрешить пользователям сворачивать и разворачивать баннер
состояние по умолчанию (свернуто)	Состояние по умолчанию при включенной настройке сворачиваемости
срок жизни cookie	Срок действия cookie, используемой для запоминания того, был ли баннер закрыт, развернут или свернут. Если установлено значение «none», этот компонент НЕ будет использовать файлы cookie, и любые ранее созданные файлы cookie, связанные с баннером, будут удалены при следующей полной загрузке страницы пользователем. Значения измеряются в виде единой единицы, поэтому установка «year» будет означать один год, «week» — одну неделю и т.д.
имя cookie	При внесении важных изменений в баннер необходимо изменить имя cookie, чтобы все ваши пользователи увидели изменения.
баннер на всю ширину	Отображать баннер на всю ширину браузера
поменять местами с позицией по умолчанию	Если активен другой компонент, связанный с баннером, используйте это, чтобы поменять его местами с Versatile Banner
плагин outlet	below-site-header помещает его над боковой панелью, above-main-container помещает его над контентом сбоку от боковой панели
фоновое изображение баннера	URL-адрес вашего фонового изображения. Совет: вы можете загрузить изображение в свою основную тему и использовать URL-адрес оттуда, но убедитесь, что вы не используете раздел «Uploads» этого компонента. Любые загрузки, добавленные в этот компонент, будут удалены при каждом его обновлении.
фоновое изображение баннера (темная тема)	URL-адрес вашего фонового изображения при обнаружении системной темной темы.
цвет фона	Используется вместо фонового изображения
цвет фона (темная тема)	Используется вместо фонового изображения при обнаружении системной темной темы.
основной цвет текста	Основной цвет текста баннера
основной цвет текста (темная тема)	Основной цвет текста баннера при обнаружении системной темной темы
дополнительный цвет текста	Цвет текста для иконок и текстовых заголовков, а также цвет фона кнопок.
дополнительный цвет текста (темная тема)	Цвет текста для иконок и текстовых заголовков, а также цвет фона кнопок при обнаружении системной темной темы.
цвет текста ссылок	Цвет текста ссылок внутри баннера
цвет текста ссылок (темная тема)	Цвет текста ссылок внутри баннера при обнаружении системной темной темы.

Перевод	Значение по умолчанию
close.title	Закрыть баннер
close.label	Закрыть
toggle.title	Развернуть/Свернуть баннер
toggle.collapse_label	Свернуть
toggle.expand_label	Развернуть

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

Dhruvi_Butti · 19.Январь.2021 07:09:31

Всем привет! Я хочу выровнять весь текст по левому краю, но CSS-тема у меня не работает. Подскажите, пожалуйста, как именно это сделать?

tshenry · 19.Январь.2021 19:04:46

Это то, что вы искали?

Если да, вот быстрый и простой CSS, который, надеюсь, поможет вам начать:

.banner-box {
  h1,
  h2,
  h3,
  .row .single-box {
    text-align: left;
    & .banner-list {
      display: block;
      ul {
        margin: 0 0 9px 25px;
      }
    }
  }

  .section-header {
    .x-title {
      padding: 25px 15px;
    }
    .description p {
      text-align: left;
    }
  }
}

Вам нужно создать новый компонент под названием «Versatile Banner Customizations» и добавить вышеуказанный CSS в раздел Common. Обязательно добавьте новый компонент во все активные темы, использующие Versatile Banner, чтобы применить эту настройку.

Dhruvi_Butti · 20.Январь.2021 12:57:39

У меня это сработало. Большое спасибо.

charlie788 · 11.Февраль.2021 20:33:00

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

Возможно ли сделать фоновое изображение кликабельным?

Спасибо за ваш ответ.

SidV · 16.Февраль.2021 02:36:32

Можете привести пример?
Зачем вам это нужно?
Я имею в виду… всё фоновое изображение станет ссылкой?
Если пользователь кликнет в любом месте баннера, его перенаправит по этой ссылке.
Не представляю, зачем это может понадобиться.

Astra · 16.Февраль.2021 15:38:42

Как я могу изменить высоту баннера?

LeCoyote · 16.Февраль.2021 22:34:34

Привет @tshenry, я использую компонент темы Versatile Banner, но он исчезает, когда я снимаю галочку «Отображать на компьютере». На самом деле я хочу показывать баннер только на мобильных устройствах.

Однако, когда я снимаю галочку «Отображать на компьютере»… исчезают оба баннера Versatile Banner — и на компьютере, и на мобильном.
Вот ссылка на сайт, если хотите проверить: https://hec.fm

Не упустил ли я что-то?

Astra · 17.Февраль.2021 09:56:58

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

tshenry · 23.Февраль.2021 02:37:10

Спасибо за сообщение! Извините за задержку с ответом. Я смог воспроизвести описанную вами проблему. Я почти уверен, что понимаю, в чём дело. Я займусь этим в конце этой недели и вернусь к вам с ответом.

Высота баннера в первую очередь зависит от его содержимого, но при необходимости вы можете настроить всё с помощью собственного CSS. Я не уверен, насколько удачно вам удастся разместить три колонки горизонтально на мобильном устройстве, но вы определённо можете попробовать это сделать с помощью пользовательского CSS! Ознакомьтесь с рекомендациями по адресу Making custom CSS changes on your site.

MrDavis97 · 24.Февраль.2021 02:33:41

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

Вот, иконка стрелки направлена вверх:

Но после перехода в раздел документации и возвращения на главную иконка стрелки оказывается в противоположном направлении.

Это выглядит довольно странно…

augustinecicc · 28.Март.2021 22:54:56

Только что обнаружил, что универсальный баннер больше не отображается на странице входа в наш форум (это закрытый форум), как это было раньше.

В настройках компонента отмечена опция «Показывать баннер для анонимных пользователей».

При просмотре HTML-кода вижу div с классом ‘banner-box’ внутри вложенных div с классами ‘emberX’, но внутри div с классом ‘banner-box’ ничего нет — в отличие от HTML-кода для авторизованных пользователей.

Есть какие-то идеи, что может быть не так?

tshenry · 30.Март.2021 02:06:47

Я только что выкатил небольшое обновление для компонента.

Это должно быть исправлено с помощью обновления выше. Мне очень жаль, что так долго пришлось ждать исправления. Ещё раз спасибо за ваш отчёт!

Вам нужно добавить /login в настройку темы «URL должен содержать». Подробнее см. этот пост.

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

Dimitri_Nightmare · 02.Апрель.2021 07:36:13

Я использую Versatile Banner и пытаюсь превратить его в гигантскую ссылку, которая перенаправляет на другой сайт. Как это сделать?

Пытался изменить это через скрипт: api.changeWidgetSetting('banner-content-widget', 'href', '<site_address>'), но Versatile Banner перестал работать.

augustinecicc · 02.Апрель.2021 20:42:14

Спасибо, это отлично! Теперь всё работает идеально!

tshenry · 02.Апрель.2021 21:49:43

Вы, возможно, сможете сделать что-то вроде:

<script type="text/discourse-plugin" version="0.10.0">
  // Добавить ссылку на заголовок
  api.reopenWidget("banner-box-widget", {
    html(attrs) {
      let bannerBox = this._super();
      bannerBox[0].children[1].tagName = "A";
      bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
      return bannerBox;
    }
  });
  
  // Добавить ссылку на остальной контент
  api.reopenWidget("banner-content-widget", {
    html(attrs) {
      let bannerContent = this._super();
      bannerContent.tagName = "A";
      bannerContent.properties.href = "https://meta.discourse.org";
      return bannerContent;
    }
  });
</script>

И добавить правило CSS для настройки цвета ссылки:

.banner-box a {
    color: var(--primary);
}

Если вам не нужна какая-то конкретная функциональность, которую предлагает Versatile Banner, возможно, вам будет проще создать свой собственный простой HTML-баннер в новом компоненте. Примерный вариант:

Добавьте следующее в раздел Common “After Header”:

<a href="https://meta.discourse.org">
  <div class="custom-banner">
    <h2>Это пользовательский баннер!</h2>
  </div>
</a>

А следующее — в раздел Common “CSS”:

 .custom-banner {
   display: flex;
   justify-content: center;
   align-items: center;
   width: $large-width; // 1110px
   height: 200px;
   margin-bottom: 15px;
   background: grey;
   color: white;
 }

Это создаст простой баннер, который полностью кликабелен:

mercury233 · 11.Май.2021 00:41:05

Я устанавливаю этот компонент из git, но, похоже, не получил последний код. Коммит FIX: Work with new sticky header and move away from deprecated $.cookie · discourse/discourse-versatile-banner@0939120 · GitHub не обновился на моём сайте https://ygobbs.com/.

tshenry · 11.Май.2021 02:36:01

Это связано с тем, что вы используете версию Discourse 2.6.0.beta2. Указанный вами коммит требует версии 2.6.0.beta3 и выше. Обратите внимание, что в этом коммите добавлен файл discourse-compatibility, чтобы предотвратить обновление до коммита, несовместимого с вашей версией Discourse.

mercury233 · 11.Май.2021 02:45:47

Вау, это потрясающе, что Discourse находит для меня более старую версию, вместо того чтобы запрещать установку компонента. Спасибо!

gassim · 29.Июнь.2021 09:53:06

Привет, @tshenry
Я хочу установить компонент несколько раз, чтобы использовать каждый экземпляр для отображения разных баннеров в разных категориях. Поэтому я отключил опцию «Показывать на главной странице» и использовал условие «URL должен содержать», но это мешает работе основного экземпляра, который я использую для отображения компонента только на главной странице. Можете ли вы предложить другое решение или это баг? Спасибо! (:

Тема		Ответов	Просм.
Welcome Link Banner Theme component official , welcome-link-banner	39	15933	09.07.2025
Category Banners Theme component official , category-banners	85	49871	11.11.2025
Notification Banners Theme component	50	2531	19.11.2025
An update changed our versatile banner - I don't know where we can add CSS Support	30	797	22.08.2023
Discourse Persistent banner Theme component	9	550	20.10.2024

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

Возможности

Настройка содержимого баннера

Использование опции сохранения состояния

Настройки

Связанные темы