Инструмент стиля тегов

:information_source: Краткое описание Tag Style Tool позволяет настраивать внешний вид тегов.
:eyeglasses: Предпросмотр Будет заполнено позже
:hammer_and_wrench: Репозиторий TagStyleTool на GitHub
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse

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

О компоненте

TagStyleTool — это вдохновлённая версия (3) существующих компонентов, позволяющая настраивать внешний вид тегов в Discourse!

v0.2
Добавлен визуальный конструктор стилей — позволяет искать иконки, выбирать цвета и импортировать категории!

Возможности:

  • Устранены проблемы совместимости (в частности, между удалением дефисов и иконками тегов).
  • Возможность назначить иконку Font Awesome для конкретных тегов.
  • Добавлена опция применения иконки тега по умолчанию для любого тега, который не определён.
  • Инвертированное наследование, например, цвет метки или текста.
  • Решена проблема контрастности цвета текста при использовании настройки раскраски метки.
  • Предоставлена возможность выбора между существующими стилями тегов.
  • Гибкость настроек, позволяющая отключить тег по умолчанию или функцию дефисов.
  • Формат настроек остался прежним (с добавлением новых настроек), как в Tag Icons, что обеспечивает лёгкую переносимость и адаптацию.

Начиная с версии v0.2

  • Реализована опция применения ко всей категории. (У этого есть недостатки; я думаю, это возможно, но требует дополнительного обслуживания).
  • Поиск идеальной иконки в базе данных Font Awesome!
  • Выбор любимого цвета с помощью визуального палитры.

Что ещё предстоит сделать:

  • Цвет тега по умолчанию :sweat_smile: сценарий «а что, если» нужен только цвет, а не иконка.
  • Улучшения для удобства пользователей в настройках.

Прочее:

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

Вдохновение (а в некоторых случаях форматирование и настройки) было напрямую заимствовано из следующих существующих проектов:
Удаление дефисов из названий тегов
Tag Icons
Цветовые стили тегов

Полезные ресурсы
Оба ресурса теперь интегрированы в компонент
Font Awesome
HTML Палитра цветов

9 лайков

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

1 лайк

Только что попробовал быстро. Два комментария от «новичка»:

  • Немного запутался в FontAwesome. Только бесплатные иконки? Какая версия? Есть ли где-то список всех иконок (или их слишком много для этого)?
  • Цвет: насколько сложно было бы добавить палитру цветов для тех, кто не разбирается в RGB? :innocent:

Но уже спасибо, выглядит хорошо!

Не переживайте, что потеряетесь — я с радостью помогу любым доступным способом. В конце концов, для этого и существует Discourse, верно?

Font Awesome

Компонент должен автоматически поддерживать любые иконки Font Awesome из текущей версии, которые есть в текущей версии Discourse. Насколько я знаю, сейчас поддерживается версия 6. Все их можно найти здесь: Font Awesome.

Что касается второй части вашего вопроса: да, это бесплатно. Существует премиум-версия, но я не уверен, как она работает с Discourse, поскольку Font Awesome уже включён в ядро.

Выбор цвета

Я могу посмотреть и попробовать реализовать такой инструмент, но поскольку это компонент темы, не уверен, насколько далеко я могу зайти, прежде чем это потребует создания отдельного плагина. Тем не менее, вы можете воспользоваться этим полезным инструментом: нажмите на область «Use HTML 5» рядом с выбором цвета. Для этого компонента нужно использовать HEX-код цвета. HTML Color Picker

1 лайк

Спасибо! На самом деле, ссылки на эти два ресурса в интерфейсе настроек уже были бы очень полезны!

1 лайк

В наши дни существует нативный HTML-компонент для выбора цвета:

Мы также оборачиваем его в компонент для ещё более удобного использования.

4 лайка

Огромное спасибо!

Чендлер Бинг улыбается в сериале «Друзья»

Что ж, я добился некоторого прогресса. Мне ещё нужно сделать несколько вещей, чтобы привести всё в порядок перед пушем: логика вставки не работает (копирование работает), кнопка видна на всём сайте и, что особенно заметно, как вы можете видеть, находится в нижнем углу.

Также я :eyes: понял, как применять настройки ко всем тегам группы тегов.


colorpickdemo

3 лайка

Такой конструктор стилей стал бы убийственной фичей!

:smiley: Я отправил это. Дайте знать, если возникнут проблемы.

1 лайк

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

Если обновить страницу, кнопка появляется лишь на мгновение, а затем снова исчезает.

Также мне не удаётся отобразить одну из иконок (например, lock-keyhole) на теге, хотя конструктор её предлагает. Я добавил её в список SVG-иконок, сохранил, но результата нет.

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

1 лайк

:sweat_smile: Я делал всё это в 1–2 часа ночи, а опубликовал в 6 утра, так что простите меня за несколько сбоев.

  • Я могу воспроизвести исчезновение кнопки, чёрт возьми, она упрямая. Мне удалось её исправить, я думаю.
  • Похоже, я что-то упустил насчёт иконок Font Awesome. Вам нужно зайти в настройки вашего сайта, перейти к подмножеству SVG и добавить их вручную. Если Discourse ещё не использует их, они не будут отображаться по умолчанию. Хотя, даже сделав это, у меня всё ещё была проблема с их отображением. Я разберусь с этим подробнее.

Это уже развернуто.

2 лайка

Мне бы хотелось, чтобы так и было.

Итак, мне пришлось удалить компонент и переустановить его (оба раза), чтобы кнопка конструктора вообще появилась.

В последней версии я могу заставить кнопку сохраняться после начальной настройки моих тегов. И я могу заставить её сохраняться после обновления страницы. Но при возвращении в экран редактирования компонента из раздела «Темы и компоненты» кнопка снова исчезает. Хитрый гадёныш.

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

2 лайка

:sweat_smile: Это действительно надоедливая мелочь.

Я пробую несколько вариантов, отправил тебе свой последний бета-сборку. Не стесняйся сообщить, если возникнут какие-либо проблемы, так как я работаю именно с этой кодовой базой.

Это должно исправить некоторые из этих проблем. Я добавил список задач с возможностью отката к переопределениям, например: Tag1, Pencil, NoColor просто отобразит Tag1, Pencil, <Color, если используется значение по умолчанию, True или False, использовано ли значение по умолчанию, иначе цвет не применяется>.

Это отличный процесс обучения для меня! :joy:

1 лайк