Компонент темы заголовков категорий Discourse

[Rhidian (Rhidian Bramley)]

Этот компонент темы предоставляет ряд улучшений для заголовка категории в Discourse.

Стандартный заголовок категории Discourse отображается в верхней части каждой страницы категории, над ссылками навигации и списком тем. Обычно он виден только если в настройках категории загружено изображение логотипа. В заголовке отображается логотип и краткое описание категории, взятое из первого абзаца темы «О категории…».

Этот компонент темы предоставляет следующие улучшения

Заголовок категории теперь отображается по умолчанию для всех категорий. Он теперь включает название категории в дополнение к логотипу (если установлен) и описанию категории. Также теперь можно добавить фоновое изображение логотипа, и заголовок можно стилизовать как «коробку» или «баннер», используя настройки цвета категории. В настройках темы доступен широкий диапазон конфигурируемых опций.

Настройки темы

• показать название категории: Показать название категории в заголовке
• показать описание категории: Показать текст описания категории (первый абзац темы «О этой категории»)
• размер текста описания: Размер текста внутри описания категории
• выравнивание текста: Выравнивание текста внутри заголовка категории
• показать заголовок подкатегории: Показать заголовок для подкатегорий
• показать название родительской категории: Добавить название родительской категории перед заголовками подкатегорий (это работает как ссылка-хлебная крошка на страницу родительской категории)
• показать значок блокировки: Показать значок блокировки на категориях, защищённых правами доступа
• показать логотип категории: Показать изображение логотипа категории внутри заголовка
• показать логотип родительской категории: Показать логотип родительской категории, если логотип подкатегории не установлен
• показать логотип сайта: Показать небольшой логотип сайта, если логотип категории не установлен
• позиция логотипа: Позиция логотипа внутри коробки
  – «слева» и «справа» отображают логотип на одной линии с текстом.
  – «сверху» отображает логотип выше, выровненный по тексту
• размер логотипа: Размер логотипа в заголовке.
  – Малый — высота 50 пикселей, аналогично логотипу коробки подкатегории.
  – Стандартный — высота 150 пикселей.
  – Оригинальный — размер загруженного изображения
• стиль заголовка: Установить стиль заголовка как:
  – Коробка: заголовок категории отображается в том же стиле, что и стандартные коробки Discourse
  – Баннер: установить фоновый цвет заголовка как цвет фона категории, а цвет текста как цвет переднего плана
  – Нет: без границ или фоновой стилизации
• фоновое изображение заголовка: Применяется, если вы загрузили фоновое изображение категории
  – «contain», «cover» и «resize» отображают фон внутри заголовка.
  – «outside» — это стандартное поведение Discourse, отображающее фон за пределами заголовка, на всю страницу.
• показать на мобильных: Показать заголовок категории на мобильных устройствах
• принудительное выравнивание на мобильных: Принудительно выровнять логотип и текст по центру-сверху заголовка на мобильных устройствах
• скрыть, если нет описания категории: Скрыть заголовок, если описание категории не установлено
• исключения категорий: Заголовки не будут отображаться для этих категорий

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

Репозиторий Git: https://github.com/naidihr/discourse-category-headers

Как установить тему или компонент темы?

Благодарности

Спасибо @Johani за его превосходное Руководство разработчика по темам Discourse
Этот компонент темы был вдохновлён другими темами, особенно темой Discourse Category Banners от @awesomerobot

Примеры

Стиль «коробка»: заголовок категории отображается в том же стиле, что и коробки подкатегорий

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

Если у подкатегории есть собственный логотип, он будет отображаться вместо логотипа родительской категории.

Мобильный вид с другим выравниванием текста и иконок.

Настройки размера текста.

Примеры вариантов выравнивания: текст по центру, логотип справа.

Стиль «баннер»: использует фоновый и передний цвета категории

Фоновое изображение: использует фоновое изображение категории

[awesomerobot (Kris)]

Широкий выбор вариантов делает это действительно гибким, выглядит отлично!

[Heliosurge (Dan DeMontmorency)]

Это потрясающая работа!

[Anatolia]

Это выглядит отлично.

[labrumfield (Lauren Brumfield)]

Rhidian, не могли бы вы поделиться своими настройками конфигурации, чтобы категории отображались в виде сетки, как на скриншоте, который вы разместили (ссылка ниже)?

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

[labrumfield (Lauren Brumfield)]

На самом деле, я думаю, я разобрался. Мне не хватало следующего раздела в Настройках:

[Rhidian (Rhidian Bramley)]

Отлично, @labrumfield . Спасибо, что опубликовали ответ — думаю, он тоже пригодится другим. Надеюсь, компонент темы будет работать у вас хорошо.

[MichelleBarnett]

Случайно не знаете, можно ли предпросмотреть настройку «Блоки с подкатегориями» для новой темы, не публикуя её?

[Rhidian (Rhidian Bramley)]

Я не совсем понимаю, что вы имеете в виду под предпросмотром? Вы можете просматривать темы и компоненты тем в настройках администратора «Настроить»

[MichelleBarnett]

В идеале я хотел бы просмотреть настройку «Ящики с подкатегориями» перед публикацией. Либо, если есть способ связать эту настройку только с вашим компонентом темы, а не с другими темами или компонентами тем.

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

[Rhidian (Rhidian Bramley)]

Поля с настройкой подкатегории не являются частью этого компонента. Это настройка категории Discourse.

Discourse Category Headers theme component

Actually, I believe I figured it out. I was missing the following under Settings: [Screen Shot 2020-07-08 at 1.23.35 PM]

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

[MichelleBarnett]

Привет,

Я только что изменил настройку категории, и заголовки категорий немного «поехали» (см. изображение).

Изменённая настройка: стиль списка подкатегорий был переключён с «Коробки» на «Коробки с избранными темами». Другие настройки, насколько я помню, не менялись. Подскажите, пожалуйста, как вернуть баннер обратно — чтобы он шёл по всей ширине вверху, а не был коробкой в левом верхнем углу?

Кроме того, даже если я возвращаю настройку обратно на «Коробки», всё равно ничего не восстанавливается до нормального вида.

[JacobDK]

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

Я решил попробовать и добавил видео с YouTube и подкаст с SoundCloud, но, к сожалению, они не отображаются в блоке категории.

Было бы здорово, если бы можно было выбрать между изображением и/или видео и/или аудио, чтобы дать людям представление о том, о чём эта категория. Например, сделать короткое видео-вступление для каждой категории вместо изображения. Тогда потенциальный участник мог бы получить общее представление из небольшого текста, посмотреть видео с вступлением о категории или прослушать аудиоверсию/подкаст-вступление, если это его предпочтение.

Но ещё раз большое спасибо за вашу работу и вклад.

[satonotdead]

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

Кажется, было бы здорово отображать информацию о категории в хорошем дизайне.

Спасибо за этот модуль. Он потрясающий.

[Rhidian (Rhidian Bramley)]

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

[satonotdead]

Что ж, я вижу, что автоматически настроенная конфигурация не подходит для полноширинного баннера на настольных и мобильных устройствах.

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

Спасибо за ваш ответ, Ридиан.

[James_Lodge]

Привет,

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

Что я упускаю, пожалуйста?

[James_Lodge]

Кто-нибудь ещё следит за этой темой, или компонент темы больше не поддерживается?

[Rhidian (Rhidian Bramley)]

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

[evantill (Eric Vantillard)]

Ссылка в описании категории отображается как обычный код из-за правила CSS a,a:visited {color: inherit;} в файле component.css.

common/common.scss

Это ожидаемое поведение?