 |
Краткое содержание | Добавляет вызовы в стиле Obsidian в качестве альтернативы цитатам Markdown. |
 |
Предварительный просмотр | Theme Creator |
 |
Репозиторий | GitHub - Arkshine/discourse-quote-callouts · GitHub |
 |
Руководство по установке | Как установить тему или компонент темы |
 |
Новичок в темах Discourse? | Начинающий гид по использованию тем Discourse |
Установить этот компонент темы
Этот компонент темы добавляет поддержку вызовов в стиле Obsidian в Discourse в качестве альтернативы цитатам Markdown.
Вызовы — отличный способ выделить контент и добавить примечания, предупреждения или другие специальные сообщения к вашим постам.
Использование
Чтобы создать вызов, у вас есть несколько способов.
Синтаксис Markdown
Добавьте [!type] к первой строке цитаты, где type — это идентификатор типа. Идентификатор типа определяет внешний вид и поведение вызова. Чтобы увидеть все доступные типы, обратитесь к разделу Поддерживаемые типы.
> [!tip]
> **Совет**: Используйте `фрагменты кода`, чтобы повысить читаемость. Они обеспечивают ясность и точность.
Предварительный просмотр
Вы можете изменить тип, нажав на значок:
Визуальный редактор
Теперь полная поддержка, пожалуйста, обратитесь к разделу Поддержка визуального редактора.
Горячие клавиши
- Ctrl + q — Вставить пустой вызов
Панель инструментов
Чат
В панели инструментов доступна кнопка для вставки вызова по умолчанию.
Пользовательский заголовок
По умолчанию заголовок вызова — это его идентификатор типа в заглавных буквах. Вы можете изменить его, добавив текст после идентификатора типа:
> [!question] Пользовательская метка 🤗
> Метки вызовов можно настраивать.
> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> Они также могут содержать специальную встроенную разметку, например динамические даты.
Вы также можете создавать вызовы только с заголовком:
> [!success] решено.
Сворачиваемые вызовы
Вы можете сделать вызов сворачиваемым, добавив плюс + или минус - непосредственно после идентификатора типа.
+разворачивает вызов по умолчанию-сворачивает его
> [!todo]- Мой список дел
>
> - [x] Написать документацию
> - [ ] Добавить тесты
> - [ ] Провести ревью кода
> [!todo]+ Мой развернутый список дел
>
> - [x] Создать репозиторий
> - [ ] Настроить CI/CD
> - [ ] Развернуть в продакшн
Вложенные вызовы
Вы можете встраивать вызовы на несколько уровней.
> [!question] Можно ли встраивать вызовы?
>
> > [!todo] Да!, можно.
> >
> > > [!example] Вы даже можете использовать несколько уровней вложенности.
> [!tip]
> Вот полезный совет
>
> > [!info]
> > С дополнительной информацией
> >
> > > [!example]
> > > И вложенный пример
>
> Вернемся к основному совету
Поддерживаемые типы по умолчанию
Вы можете использовать несколько типов вызовов и их псевдонимы.
Каждый тип имеет свой цвет фона и значок.
См. настройкуcallouts.
note. См. раздел «Возврат по умолчанию» для получения дополнительной информации.
| Тип | Описание | Псевдонимы |
|---|---|---|
note |
Для общих примечаний и информации | - |
abstract |
Для резюме или абстрактных разделов | summary, tldr |
info |
Для информационного контента | - |
todo |
Для списков задач или пунктов дел | - |
tip |
Для советов и важной информации | hint, important |
success |
Для сообщений об успехе | check, done |
question |
Для вопросов и FAQ | help, faq |
warning |
Для предупреждений | caution, attention |
failure |
Для уведомлений об ошибках | fail, missing |
danger |
Для сообщений об опасности или ошибках | error |
bug |
Для отчетов об ошибках или известных проблем | - |
example |
Для примеров | - |
quote |
Для цитат | cite |
Настройка
Значок
Вы можете использовать значок FontAwesome или напрямую предоставить элемент SVG.
Элемент SVG
Хотя бесплатная версия FontAwesome предлагает множество вариантов, иногда вам может показаться их недостаточно.
Вы можете предоставить элемент SVG <svg>...</svg>.
Пример: Иконки Lucide — это отличный набор с преимуществом выбора толщины штриха.
- Выберите значок
- Отрегулируйте толщину штриха
- Нажмите на Копировать SVG
- Перейдите в настройки компонента темы и вставьте содержимое
Возврат по умолчанию
Вы можете установить значения по умолчанию для случаев, когда указанный тип вызова не найден, с помощью следующих настроек:
callout_fallback_typecallout_fallback_iconcallout_fallback_color
> [!discourse is fantastic]
> Да.
Глобальная конфигурация
Вы можете настроить различные аспекты вызовов через
- Прозрачность фона
- Свойства границы (ширина, стиль, цвет, радиус)
- Отступы
- Свойства шрифта заголовка (размер, начертание)
- Расстояние между значком и заголовком
Настройка для каждого вызова
Каждый тип вызова можно настроить с помощью:
- Пользовательского значка
- Текста заголовка
- Цветовой схемы
- Свойств границы
См. раздел «Настройки» ниже.
Настройки
Список
| Настройка | Описание |
|---|---|
| callouts | Определение вызовов. |
| callout_fallback_type | Тип вызова по умолчанию, используемый, когда указанный тип не найден. Значение по умолчанию: note |
| callout_fallback_icon | Значок по умолчанию, используемый, когда указанный тип не найден. Значение по умолчанию: far-pen-to-square |
| callout_fallback_color | Цвет по умолчанию, используемый, когда указанный тип не найден. Значение по умолчанию: #027aff |
| callout_background_opacity | Глобальная прозрачность фона для вызова (от 1 до 100). Значение по умолчанию: 10 |
| callout_border_width | Глобальная ширина границы для вызова. Значение по умолчанию: пусто |
| callout_border_style | Глобальный стиль границы для вызова. Значение по умолчанию: пусто |
| callout_border_color | Глобальный цвет границы для вызова. Значение по умолчанию: пусто |
| callout_border_radius | Глобальный радиус границы для вызова. Значение по умолчанию: var(--d-border-radius) |
| callout_padding | Глобальный отступ для вызова. Значение по умолчанию: 0.75em 0.75em 0.75em 1.5em |
| callout_title_font_size | Глобальный размер шрифта для заголовка вызова. Значение по умолчанию: inherit |
| callout_title_font_weight | Глобальное начертание шрифта для заголовка вызова. Значение по умолчанию: bold |
| callout_title_gap | Глобальный зазор между значком и заголовком вызова. Значение по умолчанию: 0.5em |
| callout_icon_sizep | Глобальный размер значка вызова. |
| callout_transition_duration_ms | Длительность анимации открытия и закрытия (мс). |
| svg_icons | Список значков FontAwesome 6, используемых в этом компоненте темы. |
Страница настройки для каждого вызова:
| Настройка | Описание |
|---|---|
| Тип* | Тип вызова. Этот идентификатор будет использоваться в синтаксисе вызова: [!type] |
| Псевдоним | Псевдонимы для вызова, разделенные символом |.Пример: cite|quote |
| Значок | Значок fontawesome для вызова. Возможно, вам потребуется добавить его в настройку svg_icons, если он недоступен в стандартном наборе.Альтернативно, вы можете напрямую предоставить элемент SVG, например, <svg>...</svg> |
| Размер значка | Размер значка вызова. Примечание: используйте только допустимые значения CSS, например 1em, 16px, 1.5rem |
| Заголовок | Заголовок для вызова. Если в вызове не указан заголовок, будет использована эта настройка. Примечание: если оба поля пусты, заголовком будет тип вызова. |
| Цвет | Цвет для вызова. Он будет использоваться для фона, заголовка и значка. Примечание: используйте только шестнадцатеричные коды цветов, например #027aff |
| Ширина границы | Ширина границы для вызова. |
| Стиль границы | Стиль границы для вызова. |
| Цвет границы | Цвет границы для вызова. Важно: если вы используете функции CSS для получения альфа-значения, например rgba, убедитесь, что между значениями нет пробелов, например, rgba(145,145,145,0.1) |
| Радиус границы | Радиус границы для вызова. |
* Обязательная настройка
Поддержка визуального редактора
Этот компонент теперь поддерживает визуальный редактор Discourse, что упрощает создание, редактирование и организацию вызовов.
Создание вызовов
Вы можете вставлять вызовы несколькими способами:
- Горячие клавиши: Ctrl + Q
- Кнопка на панели инструментов
- Правила ввода:
/callout<:type>!!<type>
- Поддержка вставки
Видео
Редактирование вызовов
Элементы управления для редактирования вызова появляются только после его предварительного выбора.
-
Выбор типа
При нажатии на значок появится всплывающее меню. -
Пользовательский заголовок
Поддерживает встроенную разметку и эмодзи -
Сворачивание
Можно сделать вызовы сворачиваемыми. Доступно через меню опций.
Видео
Перемещение элементов управления
-
Рабочий стол
- Перетаскивание с помощью ручки
-
Устройства с сенсорным экраном
- Перемещение вызовов вверх/вниз
- Встраивание в соседние вызовы
- По умолчанию отключено (можно включить в опциях)
Видео
Навигация с клавиатуры
Улучшает навигацию внутри вложенных вызовов:
- ← в начале заголовка открывает выбор типа
- ↑ / ↓ внутри пустых областей создает/удаляет абзацы
- Enter в заголовке перемещает курсор в тело
Видео
Вставка по клику
- Кликните в пустых областях, чтобы создать абзац
- Опциональные кнопки позволяют вставлять контент внутри или снаружи вызовов
Видео
Дорожная карта
Планы на будущее могут включать:
- Автодополнение типов при вводе
Благодарности
- @StefanoCecere – Предложение функции, Style blockquotes as callouts in Obsidian
Ваш сайт может не работать из-за ошибок в теме или компоненте.
