Требования
Чтобы использовать эти советы и приемы, вы должны быть администратором либо самостоятельно размещенного экземпляра Discourse, либо тарифного плана Discourse выше уровня Basic.
Введение
Discourse поддерживает несколько методов форматирования и настройки содержимого поста. Список можно найти здесь:
Однако иногда вам понадобится что-то более специфичное, например, ссылка, выглядящая как кнопка.
Именно такие изменения мы и изучим здесь.
Логика
Я кратко объясню лежащую в основе логику, но вы можете сразу перейти к следующему шагу и посмотреть практический пример 
Discourse разрешает использование любых HTML-атрибутов, начинающихся с data-, в содержимом поста.
Именно эти атрибуты мы будем нацеливать с помощью CSS для настройки нашего контента.
В этом руководстве я буду называть их атрибутами data-
Один из способов создания элементов с такими атрибутами — использование тега, похожего на BB-код: [wrap], к которому мы добавим значение по нашему выбору. Здесь мы выбираем «button» (это может быть что угодно, даже имя вашей собаки 
):
[wrap=button]какой-то текст[/wrap]
Это создаст HTML-элемент со следующим атрибутом: data-wrap="button".
Первый пример: розовый фон
Давайте начнем с практического примера. Мы создадим текст с розовым фоном.
Как блочный элемент
В вашем посте на пустой строке напишите:
[wrap=pink]розовый текст[/wrap]
Это создаст элемент div с атрибутом data-wrap="pink".
Затем добавьте следующий CSS в вашу тему.
Перейдите в Панель администратора → Настроить → Темы → Ваша тема → Редактировать CSS/HTML → CSS.
Вставьте следующий код CSS внутрь:
[data-wrap="pink"] {
background: pink;
}
Затем нажмите кнопку «Сохранить».
Вернитесь к своему посту и посмотрите результат:
Да, это уже красиво 
Вы заметите, что фон занимает всю ширину поста. Поскольку наш wrap является единственным элементом на своей строке, он выводит блочный элемент.
Вы можете узнать больше о разнице между блоками и строчными HTML-элементами здесь: HTML Block and Inline Elements.
Если вы хотите, чтобы розовый фон занимал несколько строк (все еще как блок), вам нужно, чтобы оба ваших тега [wrap] не содержали другого контента или текста на одной строке:
[wrap=pink]
розовый текст
розовый текст
розовый текст
розовый текст
[/wrap]
Это будет выглядеть так:
Как строчный элемент
Теперь давайте добавим немного текста перед [wrap], после или и то, и другое 
. Например:
Вот какой-то [wrap=pink]розовый текст[/wrap], и это круто ✨
Вот результат:
Если текст или другие элементы находятся на одной строке с одним из ваших тегов [wrap], он выведет строчный элемент.
Второй пример: ссылка с внешностью кнопки.
Работа с тегом [wrap] иногда может приводить к нежелательным результатам по разным причинам, одна из которых — он может быть блочным или строчным элементом в зависимости от контекста.
Поэтому мы опишем два разных метода, которые дают один и тот же результат, но вы сможете выбрать тот, который вам больше подходит 
Строчная ссылка-кнопка с помощью [wrap]
Синтаксис для создания ссылки с помощью Markdown: [какой-то текст](https://какая-то-ссылка.и-т-д).
Чтобы настроить текст и сделать его похожим на кнопку, мы вставим wrap внутрь квадратных скобок. Вот пример:
Это [[wrap=button]хорошая ссылка[/wrap]](https://discourse.org/) — синяя кнопка 🐳 !
Мы не будем комментировать, что выводит этот код. Вы знаете, что, поскольку вы написали [wrap=button], вам нужно будет нацелиться на [data-wrap="button"] в вашем CSS.
Итак, давайте добавим немного стильного CSS, чтобы это выглядело красиво! 
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: DodgerBlue;
color: White;
}
Мы не будем подробно разбирать правила CSS здесь. В интернете много ресурсов по CSS, поэтому, если вы хотите внести более специфичные изменения, вам сначала придется изучить эту тему.
Результат 
:
Выглядит хорошо, верно?
Строчная ссылка-кнопка с обычным HTML-содержимым
Поскольку Discourse принимает HTML-код, мы можем решить не использовать теги [wrap] и использовать HTML с атрибутом data-. В этом примере мы используем обычный синтаксис Markdown для ссылки и окружим его тегами <span>.
Мы не можем напрямую использовать тег ссылки <a>, так как это исключение, и он не позволит использовать атрибуты data-.
Напишите:
Это <span data-button>[ссылка](https://discourse.org/)</span> — зеленая кнопка 🐸 !
Это создаст ссылку внутри тега <span> с атрибутом data-button, что означает, что CSS будет немного сложнее. Нам придется нацеливаться и на data-button, и на ссылку:
[data-button] {
display: inline-block;
padding: 0.5em 1em;
background: ForestGreen;
a {
color: White;
}
}
И вот результат!
Для дальнейшего развития
Настроенный список с использованием [wrap]
Теги [wrap] и атрибуты data- можно использовать во многих контекстах, и вы можете настраивать более сложный контент. Ограничение в основном зависит от ваших знаний CSS (и в меньшей степени HTML).
Я приведу один пример без объяснения, настроив список, в котором каждый элемент будет начинаться с эмодзи кошки:
Текст:
[wrap=cat]
- Феликс
- Гарфилд
- Кошка Ната
[/wrap]
CSS:
[data-wrap="cat"] ul {
list-style: none;
li:before {
content: "🐈";
margin-right: 0.25em;
}
}
Результат:
Использование переменных цветов вашей собственной темы
Если вы разрешаете пользователям использовать разные темы или цвета, ваши изменения могут выглядеть плохо для каждого из них, особенно если у них есть выбор между светлой и темной цветовыми схемами.
Хорошей практикой является использование переменных цветов Discourse вместо «закодированных» цветов, таких как red, #FF0000 или rgb(255,0,0).
Вот пример, в котором цвет фона кнопки будет использовать основной цвет текущей палитры, а текст — вторичный цвет:
Текст:
Это [[wrap=button]хорошая ссылка[/wrap]](https://discourse.org/) — кнопка 🌈 !
CSS:
[data-wrap="button"] {
display: inline-block;
padding: 0.5em 1em;
background: var(--primary);
color: var(--secondary);
}
Вот как это будет выглядеть для пользователя, использующего цветовую схему Solarized Light:
А если они используют цветовую схему Solarized Dark:
Заключение
Теперь у вас есть основы для создания пользовательских элементов с использованием элемента [wrap] и атрибутов data-.
Для более сложных настроек изучение CSS является первоочередной задачей. В интернете вы найдете множество учебных пособий.
Следующее руководство Discourse также может помочь: Making custom CSS changes on your site.
Использование инструментов разработчика вашего интернет-браузера также легко покажет вам список переменных цветов вашего Discourse и то, как выглядит каждая из них:
Не стесняйтесь предлагать любые изменения для этого руководства!
Этот документ находится под версионным контролем — предлагайте изменения на GitHub.
