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

[Discourse]

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

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

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

 Поддержка  Баг  Интерфейс  Функция

Возможности

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

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

• Ограничение отображения только для авторизованных или анонимных пользователей
• Ограничение отображения только для мобильных устройств или только для десктопов
• Ограничение отображения на определенных страницах
• Опции: закрываемый, сворачиваемый/разворачиваемый, всегда видимый
• Опция на всю ширину браузера
• Управление цветами
• Настройка заголовка и колонок с помощью 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]

Всем привет! Я хочу выровнять весь текст по левому краю, но 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 должен содержать», но это мешает работе основного экземпляра, который я использую для отображения компонента только на главной странице. Можете ли вы предложить другое решение или это баг? Спасибо! (: