Временные шкалы Qingwa для Discourse — пользовательские BBCode-теги для красивых макетов временных шкал

[scavin]

	Сводка	Компонент темы Discourse для создания красивых макетов временной шкалы
	Предпросмотр	https://meta.appinn.net/t/topic/76953
	Репозиторий	GitHub - scavin/discourse-qingwa-timelines: A Discourse theme component for creating beautiful timeline layouts · GitHub
	Руководство по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Начинающее руководство по использованию тем Discourse

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

Я с радостью делюсь новым компонентом темы, который добавляет элегантные макеты временной шкалы в ваше сообщество Discourse!

Это мой первый компонент темы, созданный с помощью LLM.

Что это?

Discourse Timelines — это компонент темы, реализующий пользовательский BBCode [timelines]...[/timelines] для создания красивых, минималистичных макетов временной шкалы. Идеально подходит для дорожных карт проектов, пошаговых руководств, истории компании, разделов глав и многого другого.

Пример опубликованной временной шкалы

Кнопка на панели инструментов редактора

Вид в редакторе Markdown

Ключевые возможности

Пользовательский BBCode — простой синтаксис [timelines]
Кнопка на панели инструментов редактора — не нужно вручную вводить теги (решает проблему экранирования скобок в новом редакторе!)
Красивый дизайн — вертикальная градиентная линия с чистым, минималистичным стилем
Поддержка Markdown — сохраняет все форматирование внутри временной шкалы
Многоязычность — встроенные переводы на 9 языков (EN, ZH_CN, ZH_TW, DE, ES, FR, JA, KO, RU)
Совместимость с темами — работает как в светлой, так и в тёмной теме
Настраиваемость — легко изменить цвета через настройки администратора
Адаптивность — макет, удобный для мобильных устройств
Безопасность — встроенная защита от XSS
Без зависимостей — использует только нативные API Discourse

Использование

Использование кнопки на панели инструментов (самый простой способ!)

1. Откройте редактор сообщения
2. Нажмите кнопку меню “+” (опции)
3. Выберите “Вставить временную шкалу”
4. Отредактируйте свой контент
5. Опубликуйте!

Кнопка на панели инструментов решает проблему, при которой новый редактор Discourse автоматически экранирует вручную введённые квадратные скобки.

Пример синтаксиса

[timelines]
## Январь 2024 — Запуск проекта
Проект официально запущен, сформирована команда.
​
## Март 2024 — Первый релиз
Разработка основной функциональности завершена, начато бета-тестирование.
​
## Июнь 2024 — Версия 2.0
Крупное обновление с новыми функциями:
- Функция A
- Функция B
- Функция C
[/timelines]

Настройка

Все цвета можно настроить через параметры темы:

• timeline_gradient_start — верхний цвет градиента (по умолчанию: #ff7a18)
• timeline_gradient_end — нижний цвет градиента (по умолчанию: #ffb800)
• timeline_heading_color — цвет заголовка (по умолчанию: #d96d14)
• timeline_dot_color — цвет точки на временной шкале (по умолчанию: #ff7a18)
• timeline_heading_color_dark — цвет заголовка в тёмной теме (по умолчанию: #ff9854)
• timeline_dot_border_color_dark — цвет границы точки в тёмной теме (необязательно)

Надеюсь, этот компонент окажется вам полезным! Пожалуйста, дайте знать, если у вас возникнут вопросы, предложения или пожелания.

[Heliosurge (Dan DeMontmorency)]

Это очень хороший компонент! Очень полезен.

[Heliosurge (Dan DeMontmorency)]

Поддерживает ли это также фото/видео?

[scavin]

Да, он поддерживает как изображения, так и видео.

Вот быстрая демонстрация [ДЕМО ССЫЛКА]

[Heliosurge (Dan DeMontmorency)]

Действительно очень мило. Отличная работа!

[jordanjay29]

Это работает с DiscoTOC?

Кажется, он опирается на более крупные заголовки, что делает его немного менее гибким в отношении иерархии оглавления.

[scavin]

Я протестировал это с DiscoTOC и не обнаружил никаких проблем.

Я добавил оглавление на страницу демонстрации — не стесняйтесь открыть её и посмотреть, как это работает.

[jordanjay29]

Спасибо за ссылку.

При использовании в посте с автооглавлением (autoTOC) он выделяется, опираясь на заголовки 2 и 3 уровня в Markdown. Есть ли способ изменить это так, чтобы использовались заголовки 4 или 5 уровня вместо них или дополнительно, для большей гибкости?

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

РЕДАКТИРОВАНИЕ: Я могу обернуть это в теги [details], и заголовки временной шкалы перестанут отображаться в оглавлении. Это разумное обходное решение для моих целей, если что.

[scavin]

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

[scavin]

Теперь вы можете исключить заголовки таймлайнов из оглавления без обходных путей:

используйте псевдо-заголовки внутри [timelines], добавляя префикс ##! (для стиля H2) или ###! (для стиля H3).

Пример:

[timelines]

##! 2020 – Основание
Содержание…
[/timelines]

Эти заголовки отображаются как H2/H3 внутри таймлайна, но не считаются настоящими заголовками, поэтому autoTOC остаётся аккуратным независимо от расположения таймлайна.

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

Ранее, если внутри [timelines] встречался хотя бы один ##! (или ###!), оглавление пропускало весь таймлайн.

Смешивание обоих стилей в одном таймлайне пока не поддерживается.

Теперь вы можете их смешивать: ##/### по-прежнему отображаются в оглавлении, а ##!/###! отображаются только внутри таймлайна и исключаются из оглавления.

Пожалуйста, обновите компонент и попробуйте.

[jordanjay29]

Это отличная идея для обходного пути!

Это хорошо работало для:

[timelines]
##! 2020 - Foundation
Content...
###! March
Content
[/timelines]

Но не работало для псевдо-заголовка, идущего после другого элемента форматирования, например списка:

[timelines]
##! 2020 - Foundation
* Listicle
###! March 
Dooooooom!
[/timelines]

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

[timelines]##! 2020 - Foundation
Content...
[/timelines]

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

Спасибо за вашу работу над этим — инструмент становится невероятно гибким в использовании.

[scavin]

Спасибо, что сообщили об этом.

Я наблюдаю то же самое. Сейчас корректно отображаются:

  [timelines]##! 2020 - Foundation
  Content...
  [/timelines]

и

  [timelines]

  ##! 2020 - Foundation
  Content...
  [/timelines]

Но это не работает:

  [timelines]
  ##! 2020 - Foundation
  Content...
  [/timelines]

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

[jordanjay29]

Код, похоже, активируется также везде, где в посте присутствует [timelines], даже если он заключён в обратные кавычки, как выше. Экранирование с помощью обратной косой черты \[timelines] также не даёт результата.

ETA: теги [timelines] и [/timelines], похоже, экранируют переносы строк и отображаются на той же строке, что и ближайший текст в блоках кода с тремя обратными кавычками ```.

Так что

[timelines]
Blah
Blah
[/timelines]

Отображается как

[timelines]Blah
Blah[/timelines]

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