Подсветка категорий

[angus (Angus McLeod)]

Этот компонент темы позволяет выделять категорию (или категории) в вашем Discourse. Вы можете:

1. Присвоить определенным категориям специальный стиль фона
2. Добавить ссылку на категорию в заголовок с тем же специальным стилем

Один из примеров использования — категория с контентом «Premium».

Как установить

Получить код

---

Навигация по категориям и метка в заголовке

Список тем	Меню сайта

Страница категорий

Конфигурация

У компонента темы «Подсветка категорий» есть одна основная настройка «Выделять категории». Вы найдете эту настройку в панели настроек компонента темы «Подсветка категорий».

Каждая категория, которую вы хотите выделить, имеет свой элемент списка в этой настройке. Формат каждого элемента:

category_slug~background~text_color~header_label~header_label_mobile~parent_slug~alternate_link

Пример такого формата:

premium~linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%)~#88562e~:star:&nbsp&nbspPremium~:star:

Существует шесть возможных значений, каждое из которых разделено символом ~ (тильда). Давайте разберем каждое значение по порядку.

Слаг категории

Это «слаг» категории, которую вы хотите выделить. Вы можете найти его в настройках категории.

Если вам нужно выделить подкатегорию, используйте слаг «родительской» категории, затем слаг подкатегории, разделенный символом /.

Например, если существует подкатегория premium с слагом videos, которую вы хотите выделить, используйте:

premium/videos

Разрешения

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

Фон

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

background - CSS: Cascading Style Sheets | MDN

Свойство background в CSS задает все свойства стиля фона сразу, такие как цвет, изображение, исходная точка и размер или метод повторения.

Например: linear-gradient(319deg, #cdedfd 0%, #ffec82 37%, #ffcfd2 100%).

Цвет текста

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

color - CSS: Cascading Style Sheets | MDN

Свойство color в CSS задает значение цвета переднего плана текста элемента и его текстовых украшений, а также устанавливает значение currentcolor. currentcolor может использоваться как косвенное значение в других свойствах и является значением по умолчанию для других цветовых свойств, таких как…

В нашем примере это #88562e.

Метка в заголовке

Это значение выполняет две функции. Оно определяет:

1. Будет ли у выделенной категории метка в заголовке; и
2. Содержимое этой метки.

Если вы не хотите метку в заголовке, не включайте это значение вовсе.

Это значение поддерживает текст, HTML-сущности и эмодзи.

Значение метки в заголовке здесь: :star:&nbsp&nbspPremium. Это:

1. Шорткод для эмодзи звезды: :star:
2. Два неразрывных пробела в виде HTML-сущностей (каждый добавляет пробел): &nbsp&nbsp
3. Наш текст метки: Premium

Полный список шорткодов эмодзи можно найти здесь, а полный список HTML-сущностей — здесь.

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

Это значение также выполняет две функции. Оно определяет:

1. Будет ли у выделенной категории метка в заголовке для мобильных устройств; и
2. Содержимое этой метки.

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

Родительская категория

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

Альтернативная ссылка

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

[jrgong]

Так просто, но при этом так эффективно. У меня уже давно был план стилизовать с помощью CSS определённые части форума, чтобы выделять сообщения от платных категорий пользователей. Теперь это стало гораздо проще. Спасибо за вашу работу, это потрясающе!

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

[angus (Angus McLeod)]

Подсветка работает во всех местах, где отображается значок, поэтому она уже присутствует в списке

Список тем	Меню сайта

Страница категорий

Подробнее: https://try.thepavilion.io

[outofthebox (Carson)]

@Angus, ты потрясающий разработчик, и мне огромное удовольствие сотрудничать с тобой. Спасибо за твою креативность, профессионализм и внимательность к деталям. Ты — дар для сообщества Discourse.

[jordan.vidrine]

Это довольно крутой компонент, хорошая работа

[codinghorror (Jeff Atwood)]

ооо, это так… премиум

[Anatolia]

@angus

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

[Paracelsus]

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

@angus Подскажите, пожалуйста, как добавить border-radius для выделенного фона. Заранее спасибо.

[angus (Angus McLeod)]

@Парацельс

Хотел бы узнать, как добавить скругление углов (border-radius) для выделенного фона, спасибо заранее.

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

### Кнопка заголовка
.highlight-category-button {
    border-radius: 4px;
}

### Значки
.badge-wrapper[class*=" updates "],
.extra-info-wrapper .categories-wrapper .badge-wrapper[class*=" updates "],
.category-title-link-component[class*=" updates "] .category-text-title,
.select-kit.combo-box.category-drop .category-row[class*=" updates "] .badge-wrapper {
    &:before {
        border-radius: 4px;
    }
}

В примере “updates” — это слаг категории.

Пример: https://try.thepavilion.io/

[fzngagan (Faizaan Gagan)]

Компонент теперь поддерживает выпадающий список категорий.

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

Примечание: Если вы не хотите использовать 5-й элемент (заголовок для мобильных устройств), его необходимо передать пустым.

Спасибо за спонсорскую поддержку @outofthebox.

[outofthebox (Carson)]

Отличная работа, @fzngagan!! Команда Pavilion на высоте.

[satonotdead]

Возможно ли подсвечивать не только слаг, но и .select-kit .select-kit-row.is-highlighted?

Думаю, это было бы удобнее для глаз.

Я согласен с комментариями: ваша работа великолепна. Я изучал сайт Pavilion и активно тестирую различные варианты.

Надеюсь, что мы скоро начнём работать над некоторыми идеями, которые у нас есть для нашего сообщества

[MarcP]

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

@angus

Список тем

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

Мобильное представление лучше, чем на рабочем столе:

[jrgong]

Этот вариант всё ещё работает с последними тестами, прошедшими проверку? Если да, то у вас где-то сохранилась архивная документация? @angus

[angus (Angus McLeod)]

Я вставил документацию в первый пост выше. Дайте знать, если что-то не работает.

[jrgong]

Отлично! Особенно часть с градиентом была ключевой для достижения моей цели! Большое спасибо!

[jrgong]

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

В версиях 2.9.0.beta9 и beta10 TC вызывает исчезновение метаданных системной категории из выпадающего списка категорий, а также из списка тем.

Журнал форума пуст, в консоли есть только следующее:

[THEME 190 'Category Highlighter'] Чтобы предотвратить ошибки в тестах, добавьте ключ `pluginId` в вызов `modifyClass`. Это обеспечит применение модификации только один раз. 3 plugin-api.js:19