Баннеры категорий

[Discourse]

	Краткое описание	Category Banners использует существующие данные категории для создания баннеров на страницах категорий (для тегов см. Discourse Tag Banners).
	Предварительный просмотр	Предварительный просмотр на Discourse Theme Creator
	Ссылка на репозиторий	https://github.com/discourse/discourse-category-banners
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

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

Поскольку это official компонент темы, поддерживаемый командой Discourse, Support, Contribute > Bug, Contribute > UX и Contribute > Feature запросы можно оставлять в соответствующих категориях здесь, на Meta, и отмечать соответствующим тегом компонента темы. Нажмите на ссылку ниже, чтобы начать обсуждение.

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

Возможности

Category Banners использует существующие данные категории для создания баннеров на страницах ваших категорий. Он использует название категории, описание и цвет для генерации баннера в верхней части соответствующих страниц категорий (для тегов см. Discourse Tag Banners).

Описание категории определяется первым абзацем в теме «Определение категории для …» каждой категории. Цвета фона и текста баннера определяются настройками значков вашей категории.

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

Настройки

Этот компонент предлагает параметры для переопределения настроек по умолчанию:

Имя	Описание
show description	Показывать описание из поста «О данной категории»
show mobile	Показывать баннеры на мобильных устройствах
show subcategory	Показывать баннеры для подкатегорий
hide if no description	Скрывать баннеры, если описание категории не задано
show category logo	Показывать логотип категории
align text
exceptions	Баннер не будет показываться для категорий с этими ИМЕНАМИ
categories	Категории, для которых нужно показывать баннер
plugin outlet	Изменяет положение баннера на странице
show category icon	Показывать значок или эмодзи категории из настроек категории *
override category icon color	При использовании значков категорий включение этой настройки заставит значок соответствовать цвету текста баннера

* Обратите внимание, что эта настройка теперь относится к значку или эмодзи категории, установленным в настройках категории, а не к компоненту темы Category Icons (который устарел в пользу встроенной функции).

Примечания по кастомизации

Если вы хотите кастомизировать их с помощью дополнительного CSS, вы можете обратиться к заголовкам конкретных категорий, используя эту структуру (example-category — это имя вашей категории):

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

Этот компонент также добавляет класс category-header к тегу body в качестве дополнительной цели для CSS.

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

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Отсутствие префикса в названии категории — это рецепт катастрофы, поэтому я добавил category-banner- перед именем класса (например, category-banner-meta). Если вы обращались к названию категории в своём CSS, вам нужно будет просто добавить category-banner- перед ним.

@jrgong

Есть ли способ отобразить там эмодзи?

Не уверен, я не думаю, что наши стандартные описания категорий поддерживают их, но я могу это проверить…

[Hang]

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

Сжатие изображения, безусловно, вариант, но интересно, есть ли другие решения. Можно ли в коде получить миниатюру загруженного фонового изображения? Спасибо за любые подсказки!

[Vanecx]

Здравствуйте и спасибо за этот компонент темы!

Я только что попробовал установить его, следуя этому руководству (выполнил точно такие же шаги), чтобы протестировать компонент баннеров категорий, но ничего не происходит. Ни в одной категории не отображается баннер. Возможно, я что-то сделал не так, из-за чего он не работает? Единственное объяснение, которое я вижу, — это предупреждение о «bootstrap», которое блокирует его?

[simon]

@Vanecx

Ни одного баннера ни в одной из категорий. Возможно, я что-то сделал не так, из-за чего они не отображаются?

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

Описания категорий задаются при редактировании темы «О категории», которую Discourse автоматически создаёт для каждой категории. Если вы уже добавили описания категорий или отключили настройку скрытия баннеров для категорий без описаний, но баннеры по-прежнему не отображаются, дайте нам знать. Мы разберёмся, в чём дело.

[Vanecx]

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

Как видно на изображениях, в настройках всё выглядит нормально:

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

[downey (Michael Downey)]

Есть ли кто-то, кроме меня, кто считает, что было бы здорово применить этот же стиль к страницам списка групп (например, /g/foo)? К сожалению, CSS немного отличается, и, похоже, потребуется дополнительная обработка различных кнопок справа от названия группы, то есть Запрос Сообщение Удалить

Это могло бы значительно улучшить единообразие внешнего вида и сделать группы более «полноценными» элементами интерфейса. (По моему мнению)

[jord8on (Jordan)]

Мне очень нравятся эти баннеры категорий! Спасибо за создание этого компонента темы!

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

• «Последние» обсуждения или
• «Лучшие» обсуждения или
• «Категории» или
• «Подписки» (если вы используете плагин Follow )

Было бы несложно сделать так, чтобы баннер появлялся при выборе каждого из этих вариантов, в зависимости от того, что именно выбрано?

[Rhidian (Rhidian Bramley)]

@awesomerobot, надеюсь, вы не против, что я делюсь этим здесь…

Я создал форк темы discourse-category-banners под названием

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

Вы можете просмотреть его здесь:

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

Оно выполняет практически ту же функцию, но с некоторыми изменениями:

• Блок баннера категории отображается встроенным образом над основным заголовком, а не на всю ширину вверху. Это позволяет размещать тему баннера в верхней части, например, discourse-versatile-banner.

• Блок баннера категории отображается в том же стиле, что и нативные блоки подкатегорий Discourse, которые являются основным компонентом системы. Эти блоки подкатегорий — это опция отображения в настройках категорий Discourse: Показать список подкатегорий над темами в этой категории. Эта опция отображает название и описание подкатегории в виде строки или блока над списком тем, используя цвет фона категории в качестве левой границы.

• Если категория является подкатегорией, её название отображается в виде хлебных крошек следующим образом: Название родительской категории: Название подкатегории

Демонстрационный скриншот блока баннера темы для категории, расположенного над нативными блоками подкатегорий.

Скриншот подкатегории, демонстрирующий ссылку в хлебных крошках на родительскую категорию.

Это моя первая попытка модификации темы. Надеюсь, это будет полезно?

Обновление

Я переписал эту адаптацию как отдельный компонент — с множеством дополнительных функций, включая использование изображения логотипа категории и фонового изображения в заголовке. Этот новый компонент эффективно заменяет стандартный заголовок категории Discourse, в отличие от баннеров категорий, и поэтому представляет собой новый компонент. Пожалуйста, ознакомьтесь:

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

Исключения: если вы не хотите, чтобы у категории был баннер, добавьте её название сюда

У нас это не работает. Я пробовал как слайг категории, так и её ID, но баннер упрямо остаётся на месте. У кого-то ещё это работает?

[awesomerobot (Kris)]

Я только что попробовал, и у меня всё работает: он ищет категорию с учётом регистра name. В ретроспективе это был не лучший способ реализации… Я, вероятно, смогу это улучшить.

[nathank (Nathan Kershaw)]

Ах, этот сорт — для меня! И вы действительно указываете «имя» в руководстве выше — я просто не заметил.

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

[AntiMetaman]

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

[awesomerobot (Kris)]

Думаю, это зависит от конкретного сайта и сценария использования. Изначально я подумал, что скорее всего сайт захочет внедрить это повсеместно, и если будут исключения, то их будет немного.

Если вы хотите добавить баннер для небольшого числа категорий, возможно, лучше использовать более специализированный компонент темы, не предназначенный для универсального применения, например, Versatile Banner или настроить один из вариантов, описанных в https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368.

[Idan]

Было бы здорово иметь возможность загружать изображение для замены текста.

[oca]

Спасибо за этот очень полезный компонент!

Возможно ли добавить небольшую функцию?

• Добавить класс restricted к элементу <span.discourse-category-banners> или <div.category-title-header>, когда категория не является публичной, так же как это сделано для значка категории.

Это было бы полезно для стилизации баннера с помощью дополнительного CSS, чтобы показать пользователю, что эта категория особенная.

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

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

[Drew-ART (Drew)]

Можно ли заставить это работать на страницах тегов? Я нашел плагин tag-banners, но у него нет возможности добавлять текст или ссылки.