🇨🇳 Руководство по форматированию постов в Discourse: добавьте стиль и сделайте посты красочными

Иногда небольшие правки в сообщении могут значительно повысить его читаемость и вовлечённость! Эта статья посвящена именно таким «маленьким штрихам» в оформлении постов.

Для лучшего усвоения материала рекомендуем сразу открыть редактор сообщений — в нём есть встроенная панель предпросмотра:

Сделайте паузу, выпейте воды, потянитесь. Готовы открыть редактор? Отлично, приступаем!



Заголовки

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

Ввод:

# Заголовок первого уровня
## Заголовок второго уровня
### Заголовок третьего уровня
#### Заголовок четвёртого уровня

Результат:

:bulb: Если сообщение объёмное и имеет чёткую структуру, добавление заголовков помогает читателям быстрее понять организацию контента и делает пост более понятным.

:bulb: Заголовки в сообщении автоматически получают ссылки для навигации (при наведении курсора на заголовок появляется значок :link:, обозначающий ссылку). Это позволяет быстро переходить к нужному разделу.

:bulb: Обратите внимание: между символом # и текстом заголовка должен быть пробел.

:bulb: Некоторые пользователи используют жирный шрифт вместо заголовков. Однако это не рекомендуется, так как жирный шрифт не несёт семантики заголовка, не создаёт иерархию, не имеет встроенных ссылок и не подходит для автоматического создания оглавления, о котором речь пойдёт ниже.

:bulb: При публикации постов рекомендуется использовать заголовок второго уровня как самый верхний, так как заголовок первого уровня уже используется для названия темы.



Оглавление

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

Если в вашей теме есть заголовки, вы можете добавить такое оглавление.

Как добавить: убедитесь, что в сообщении есть заголовки (они будут использованы для построения оглавления). В редакторе установите курсор на пустую строку, затем нажмите кнопку, показанную на изображении ниже.

После нажатия в редакторе появится следующая строка кода:

 <div data-theme-toc="true"> </div>

Этот код автоматически генерирует оглавление и не отображается в опубликованном сообщении, поэтому его нельзя удалять. Оставьте его и продолжайте писать текст. После публикации оглавление появится автоматически.

:bulb: Оглавление группирует все заголовки, позволяя быстро переходить к нужным разделам. Если в вашей теме есть заголовки, добавление оглавления — отличная идея!



Жирный шрифт, курсив, выделение

Ввод:

Текст, заключённый в двойные звёздочки, отображается как **жирный шрифт**
Текст, заключённый в одинарные звёздочки, отображается как *курсив*
Для выделения текста используйте специальные теги <mark>выделение</mark>.

Результат:
Текст, заключённый в двойные звёздочки, отображается как жирный шрифт
Текст, заключённый в одинарные звёздочки, отображается как курсив
Для выделения текста используйте специальные теги выделение.

:bulb: Жирный шрифт хорошо заметен и подходит для акцентирования важных сведений.

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

:bulb: Выделение тоже очень заметно; используйте его по мере необходимости.



Цитаты

Чтобы оформить абзац как цитату, добавьте символ > в начале строки.
Ввод:

> Белые перья плавают на зелёной воде, красные лапки拨ят чистую волну.

Результат:

Белые перья плавают на зелёной воде, красные лапки拨ят чистую волну.

Один блок цитаты может содержать несколько абзацев. Между абзацами внутри цитаты обязательно ставьте > на пустой строке.
Ввод:

> Первый абзац текста.
>
> Второй абзац текста.

Результат:

Первый абзац текста.

Второй абзац текста.

:bulb: Формат цитаты часто используется для воспроизведения текстов, творческих работ или других материалов из внешних источников.

:bulb: Визуальное оформление цитат позволяет чётко выделить заимствованный текст, чтобы читатели сразу видели, где заканчиваются слова автора темы и начинаются цитаты.



Цитирование контента форума

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

Как использовать:
Выделите нужный текст, появится кнопка «Цитата». Нажмите на неё — редактор откроется автоматически, и выбранный текст будет оформлен как цитата.

:bulb: При цитировании или ответе на конкретное сообщение такой формат позволяет другим участникам форума чётко понять, на чьё сообщение и какую именно фразу вы отвечаете, а также легко найти контекст. Это делает обсуждение более понятным.



Разделительная линия

Чтобы создать разделительную линию, введите три символа - на пустой строке.
Ввод:

---

Результат: Над каждым заголовком этого поста есть разделительная линия!

:bulb: Строка над разделительной линией должна быть пустой, иначе могут возникнуть нежелательные эффекты (попробуйте сами!).



Несколько пустых строк

Иногда хочется добавить несколько пустых строк между двумя абзацами. Парадоксально, но если вы введёте несколько пустых строк, отобразится только одна. Чтобы принудительно добавить несколько пустых строк, используйте специальный символ <br> на каждой пустой строке. Пример:
Ввод:

Вышеуказанный текст отделён от нижнего двумя пустыми строками
<br>
<br>
Нижний текст отделён от верхнего двумя пустыми строками

Результат:
Вышеуказанный текст отделён от нижнего двумя пустыми строками




Нижний текст отделён от верхнего двумя пустыми строками



Примечания

Существует два формата примечаний:
Примечания внутри строки
Ввод:

Фраза, требующая примечания ^[содержание примечания] 
Ещё одна фраза с примечанием ^[другое содержание примечания]

Результат:

Фраза, требующая примечания [1]
Ещё одна фраза с примечанием [2]

Примечания вне строки
Ввод:

Фраза, требующая примечания [^1]
Ещё одна фраза с примечанием [^2]

[^1]: Содержание примечания
[^2]: Другое содержание примечания

Результат:



Скрытие подробной информации

Пример:
Скрытие подробной информации

Как использовать:

:bulb: Если в вашем сообщении есть длинный, но менее важный фрагмент, вы можете скрыть его с помощью этой функции.



Кнопки быстрого форматирования

Некоторые форматы можно добавить с помощью кнопок в редакторе.



Дополнительные форматы

Выше приведено описание нескольких наиболее важных форматов. Вы уже освоили их? Остальные форматы оставьте для самостоятельного изучения.
Если возникнут вопросы, пишите в разделе обратной связи форума. Желаем вам приятного общения!

Источники:


  1. содержание примечания ↩︎

  2. другое содержание примечания ↩︎

6 лайков

Отлично, отлично, отлично :star_struck: Ждём ещё больше уроков

2 лайка

@Dotila_Li
Подскажите, пожалуйста, как настроить отображение разделов оглавления в формате Markdown для полосы прокрутки справа? Есть ли для этого какой-то плагин?


1 лайк

Это DiscoTOC - automatic table of contents #theme-component

1 лайк

Спасибо!
Это здорово!