Компонент подсветки навигационной кнопки — теперь работает

Настройка Компонент темы
1

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

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

Ссылка: https://github.com/focallocal/nav-buttons-highlighter

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

Десктоп:

image
image1471×247 31.4 KB

Мобильная версия:

image
image763×261 25.8 KB

image
image760×546 27.2 KB

Nav Buttons Highlighter

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

Назначение

Этот компонент помогает вам:

  • Направлять пользователей, выделяя важные ссылки навигации (например, вашу доску задач, документацию или ключевые категории)
  • Улучшить мобильный UX, делая кнопку выпадающего меню навигации более заметной
  • Создать визуальную иерархию в вашей панели навигации

Возможности

  • Чистый стиль кнопок с однотонными цветами и эффектами при наведении
  • Настраивается через админ-панель — редактирование CSS не требуется
  • Поддержка до 3 пользовательских кнопок навигации
  • Адаптивность для мобильных устройств — включает подсветку кнопки выпадающего меню на мобильных
  • По умолчанию настроен для плагина Discourse Kanban
  • Поддержка выбора цвета для легкой кастомизации

Настройки по умолчанию

По умолчанию этот компонент настроен на выделение плагина Discourse Kanban (ссылка) синим цветом (#4285F4).

Установка

  1. В административной консоли Discourse перейдите в раздел Настроить → Темы → Компоненты и нажмите Установить.
  2. Скопируйте ссылку из репозитория Git и вставьте:
    https://github.com/focallocal/nav-buttons-highlighter
  3. После установки добавьте компонент в вашу активную тему.

Как настроить

Панель настроек администратора

Вся конфигурация выполняется через простые настройки администратора — редактирование CSS не требуется!

Для настройки:

  1. Перейдите в Администрирование → Настроить → Темы.
  2. Нажмите на вашу активную тему.
  3. Найдите Nav Buttons Highlighter в разделе «Включенные компоненты».
  4. Нажмите Настройки.

Доступные настройки:

Кнопка 1 — Kanban (по умолчанию):

  • Выделить Kanban: Вкл/Выкл (по умолчанию: Вкл)
  • Цвет Kanban: Выбор цвета (по умолчанию: синий #4285F4)
  • Селектор Kanban: CSS-селектор (по умолчанию: a.kanban-nav)

Кнопка 2 — Пользовательская:

  • Выделить кнопку 2: Включить вторую кнопку (по умолчанию: Выкл)
  • Цвет кнопки 2: Выбор цвета (по умолчанию: зеленый #4CAF50)
  • Селектор кнопки 2: Введите ваш CSS-селектор (например, a[href='/page'])

Кнопка 3 — Пользовательская:

  • Выделить кнопку 3: Включить третью кнопку (по умолчанию: Выкл)
  • Цвет кнопки 3: Выбор цвета (по умолчанию: оранжевый #FF5722)
  • Селектор кнопки 3: Введите ваш CSS-селектор

Мобильная версия:

  • Выделить выпадающее меню на мобильных: Вкл/Выкл выпадающее меню «Последнее» на мобильных (по умолчанию: Вкл)
  • Цвет выпадающего меню на мобильных: Выбор цвета (по умолчанию: синий #4285F4)

Поиск CSS-селекторов:

Чтобы выделить другие ссылки навигации, вам нужно найти их CSS-селектор:

  1. Откройте ваш форум в браузере.
  2. Щелкните правой кнопкой мыши по ссылке, которую хотите выделить.
  3. Выберите «Просмотреть код элемента» (Inspect Element).
  4. Найдите тег <a> и обратите внимание на:
    • Имена классов: class="kanban-nav" → используйте: a.kanban-nav
    • Значение href: href="/c/support" → используйте: a[href="/c/support"]

Распространенные примеры:

  • Плагин Kanban: a.kanban-nav
  • Категория поддержки: a[href="/c/support"]
  • Тег документации: a[href="/tags/documentation"]
  • Пользовательская страница: a[href="/my-page"]
  • Вторая кнопка навигации: #navigation-bar > li:nth-child(2) > a

Выбор цвета:

Используйте HEX-коды цветов (например, #4285F4 для синего). Компонент автоматически генерирует:

  • Более светлый оттенок для верхней части градиента
  • Более темный оттенок для нижней части/тени
  • Цвета для состояний наведения и активности

Популярные цвета:

  • Синий: #4285F4 (по умолчанию)
  • Зеленый: #4CAF50
  • Красный: #F44336
  • Оранжевый: #FF9800
  • Фиолетовый: #9C27B0

Стабильная версия только на CSS

Если вы предпочитаете прямое редактирование CSS, предыдущая версия (2.0.1) доступна:

Установите версию только на CSS:

https://github.com/focallocal/nav-buttons-highlighter/tree/stable-v2.0.1

Инструкции по редактированию CSS см. в README этой ветки.

Разработка

Этот репозиторий содержит:

  • common/common.scss — Все стили кнопок и подробное руководство по кастомизации
  • assets/javascripts/discourse/api-initializers/nav-buttons-highlighter.js — Минимальный инициализатор (требуется для Discourse)
  • about.json — Метаданные компонента

Устранение неполадок

В: Изменения не отображаются
О: После редактирования нажмите «Сохранить» и выполните жесткую перезагрузку страницы форума (Ctrl+F5 или Cmd+Shift+R).

В: Я хочу выделить несколько кнопок
О: Скопируйте весь блок CSS для кнопки и вставьте его под существующим правилом CSS, затем измените селектор и, при необходимости, цвета.

Лицензия

MIT — Public Happiness Movement

1 лайк
2

Круто.

Но что со всем этим странным markdown?

Вы уже создали задачу, чтобы перенести это в #theme-component?

3

Спасибо :slightly_smiling_face:

Я скопировал и вставил текст напрямую из README на GitHub, не заметив, что нужно нажать переключатель, чтобы добавить разметку Markdown. Я редактирую это сообщение с момента публикации.

Вы пометили его для перемещения в раздел Компонент темы ?

Нет, сначала хотел получить обратную связь и убедиться, что всё в порядке.

1 лайк
4

У меня возникла странная проблема: Discourse закэшировал повреждённый файл (по-моему, это был about.json), и любые мои правки не приводили к обновлению или переустановке. Потребовалось очень много времени, чтобы понять, почему никакие изменения вообще не собираются.

Есть ли более удобный способ тестировать компонент, чем делать это на живом сайте?

Для тех, кто столкнётся с этой проблемой в будущем: при установке она проявляется как «ошибка 500», а в разделе /logs в качестве виновника указывается файл about.json. Проблема была решена созданием нового репозитория GitHub с другим именем, а также увеличением версии на целую цифру (с 1.0.1 до 2.0.1), что заставило Discourse воспринять компонент как новый.

Постоянные ошибки 500 при попытке установки или обновления компонента темы.
Ошибка: «invalid byte sequence in UTF-8» в файле version.rb во время импорта через Git.

ПРИЧИНА:

  • Discourse кэширует метаданные репозитория темы во время импорта.
  • Когда наш компонент содержал повреждённый файл .discourse-compatibility или некорректный about.json, Discourse закэшировал это ошибочное состояние.
  • Даже после исправления файлов и отправки обновлений кэш сохранял ошибку.

РЕШЕНИЕ:

  • Измените имя компонента в about.json (например, «Название темы» → «Название темы Fresh»).
  • Увеличьте основную версию (с 1.0.0 до 2.0.0).
  • Это заставит Discourse воспринять компонент как новый и обойти закэшированную ошибку.

ПРОФИЛАКТИКА:

  1. Всегда проверяйте JSON-файлы перед коммитом (используйте jsonlint или валидацию в VS Code).
  2. Убедитесь, что все файлы используют кодировку UTF-8 без BOM.
  3. Удалите файл .discourse-compatibility, если он не нужен (достаточно указания minimum_discourse_version в about.json).
  4. Если вы столкнулись с постоянными ошибками импорта, попробуйте увеличить номер версии или временно переименовать компонент.
5

@Drew-ART Вы смотрели на Objects type for theme setting? Возможно, это можно использовать для добавления множества правил CSS, например, используя вложенность для добавления таких свойств, как цвет фона и отступы, к каждому правилу. В SCSS есть цикл each, который вы, возможно, сможете использовать.

Возможно, это поможет?

1 лайк
6

Спасибо @NateDhaliwal. Это был мой первоначальный подход, но я столкнулся с ошибкой 500, о которой говорилось выше, и не мог преодолеть её очень долго, поэтому вернулся к подходу, основанному только на CSS.

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

1 лайк
7

Нет, совсем не получается заставить это работать.

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

9

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

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

1 лайк
10

Хорошо, я думаю, я нашел проблему в SCSS.

Я обнаружил это в компоненте карусели @NateDhaliwal:
SCSS (common.scss):

@if $pagination-button-color != "" {
  --swiper-pagination-bullet-inactive-color: #{$pagination-button-color};
}

Настройки (settings.yml):


pagination_button_color:
  type: string
  default: ""

Для всех, кто сталкивается с трудностями:

  • внедряйте в пользовательские свойства CSS с помощью синтаксиса #{$var}
  • затем используйте эти переменные CSS в других местах, чтобы библиотека Swiper могла их прочитать

Это работает, потому что:

  1. Переменные настроек можно интерполировать с помощью #{}
  2. Пользовательские свойства CSS принимают строковые значения
  3. Фактическое стилизование использует переменные CSS, а не функции SCSS

Я скоро обновлю этот плагин до более современной версии.

1 лайк