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

[Discourse]

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

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

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

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

Возможности

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

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

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

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

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

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

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

Настройки

Имя	Описание
show for members	Отображать баннер для пользователей, вошедших в форум
show for anon	Отображать баннер для анонимных пользователей
display on mobile	Отображать баннер на мобильных устройствах
display on desktop	Отображать баннер на настольных компьютерах
display on homepage	Отображать баннер на главной странице
url must contain	Введите пути, на которых должен отображаться баннер. Добавьте * в конец пути как подстановочный знак
dismissible	Разрешить пользователям закрывать баннер
collapsible	Разрешить пользователям разворачивать и сворачивать баннер
default collapsed state	Состояние по умолчанию (свернут) при включении настройки collapsible
cookie lifespan	Срок жизни файла cookie, используемого для запоминания, был ли баннер закрыт, развернут или свернут. Если установлено значение «none», файлы cookie не будут использоваться с этим компонентом, и любые ранее созданные файлы cookie, связанные с баннером, будут удалены при следующей полной перезагрузке страницы пользователем. Значения измеряются в единицах времени, поэтому установка «year» означает один год, «week» — одну неделю и т. д.
cookie name	При внесении важных изменений в баннер необходимо изменить имя файла cookie, чтобы все пользователи увидели изменения.
full width banner	Отображать баннер на всю ширину браузера
swap default positioning	Если активен другой компонент, связанный с баннерами, используйте эту настройку для замены его позиции на позицию Versatile Banner
plugin outlet	below-site-header размещает его над боковой панелью, above-main-container — над контентом сбоку от боковой панели
banner background image	Исходный URL для фонового изображения. Совет: вы можете загрузить изображение в свою основную тему и использовать URL оттуда, но убедитесь, что вы не используете раздел «Uploads» этого компонента. Все загрузки, добавленные в этот компонент, будут удалены при каждом обновлении.
banner background image dark	Исходный URL для фонового изображения при обнаружении темной темы системы.
background color	Используется вместо фонового изображения
background color dark	Используется вместо фонового изображения при обнаружении темной темы системы.
primary text color	Основной цвет текста баннера
primary text color dark	Основной цвет текста баннера при обнаружении темной темы системы
secondary text color	Цвет текста иконок и заголовков, а также цвет фона кнопки.
secondary text color dark	Цвет текста иконок и заголовков, а также цвет фона кнопки при обнаружении темной темы системы.
link text color	Цвет текста ссылок внутри баннера
link text color dark	Цвет текста ссылок внутри баннера при обнаружении темной темы системы.

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

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

[Dhruvi_Butti]

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

[tshenry (Taylor)]

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

Если да, вот быстрый и простой 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]

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

[charlie788 (Charlie)]

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

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

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

[SidV]

@charlie788

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

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

[Astra]

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

[LeCoyote (https://hec.fm)]

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

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

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

[Astra]

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

[tshenry (Taylor)]

@LeCoyote

Когда я снимаю галочку с пункта «Отображать на рабочем столе»… оба баннера Versatile Banner (на рабочем столе и на мобильных устройствах) исчезают.

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

@Astra

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

@Astra

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

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

[MrDavis97 (Miles Davis)]

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

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

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

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

[augustinecicc]

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

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

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

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

[tshenry (Taylor)]

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

Fix show/hide on mobile/desktop behavior and remove ember selectors

@LeCoyote

Когда я снимаю галочку с пункта «Отображать на рабочем столе»… оба баннера Versatile Banner (на рабочем столе и на мобильном) исчезают.

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

@augustinecicc

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

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

@MrDavis97

Кажется, на моём сайте есть ошибка, связанная с временем жизни cookie при сохранении состояния развёрнутого/свёрнутого вида.

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

[Dimitri_Nightmare (chris)]

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

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

[augustinecicc]

@tshenry

Вам нужно добавить /login в настройку темы «url must contain». Подробнее см. в этом сообщении.

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

[tshenry (Taylor)]

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

<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]

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

[tshenry (Taylor)]

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

[mercury233]

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

[gassim (Al-Gassim Sharaf Addin)]

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