Элементы редактора: что можно вставить в материал

Эта страница — образец. Каждый элемент показан так, как он выглядит на сайте, и подписан: для чего он нужен и когда его лучше не брать. Всё перечисленное вставляется из меню редактора — наберите / в теле материала.

Врезки

Врезка выделяет из текста то, что читатель должен заметить обязательно. Пяти видов хватает на всё; брать их подряд не стоит — когда выделено всё, не выделено ничего.

Выноски Nuxt UI

Кроме своей врезки в разметке доступны выноски из набора Nuxt UI. Они спокойнее по тону и хороши для замечаний по ходу текста.

Карточки

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

Вкладки

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

Аккордеон

Аккордеон подходит для вопросов и ответов: заголовки видны все сразу, а разворачивается только нужный.

Спойлер

Спойлер — то же скрытие, но без переключателей: один блок, который разворачивается по щелчку. Годится для длинных перечней и технических подробностей.

Шаги

Шаги превращают заголовки в пронумерованный порядок действий. Внутри — обычные заголовки выбранного уровня.

Бейдж

Бейдж отмечает версию, статус или короткую метку прямо в тексте.

Разметка текста

Обычные средства markdown никуда не делись: полужирный, курсив, зачёркнутый, код, ссылка и текст с оформлением.

Строчные вставки: значок прямо в строке и сочетание клавиш + S для сохранения.

Ссылки

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

• внутренний переход — обычная страница сайта;
• чужой сайт(внешняя ссылка, откроется в новом окне) — откроется в новом окне;
• документ(скачать файл) — начнётся загрузка файла;
• письмо(написать письмо) и звонок(позвонить) — откроют почтовую программу и набор номера.

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

Цитата выделяет чужие слова. Подпись ставится обычной строкой ниже.

— Из читательского отзыва

Списки

Маркированный — когда порядок не важен:

• Плоскопечатные издания
• Издания рельефно-точечным шрифтом Брайля
• «Говорящие» книги на флеш-картах

Нумерованный — когда важен:

1. Оформить читательский билет
2. Выбрать формат издания
3. Получить книги или заказать доставку

Таблица

Таблица нужна там, где у данных есть столбцы. Для перечня из одной колонки берите список — так текст читается голосом лучше.

Код

Блок кода нужен в методических материалах. У ограждения можно указать язык и имя файла — тогда над блоком появится подпись.

export default defineNuxtConfig({
  modules: ['@nuxt/ui', '@nuxt/content']
})

Видео

Ролики ВКонтакте и Rutube вставляются одним пунктом меню — компонент сам разбирает адрес и подставляет нужный плеер. Достаточно скопировать ссылку на ролик.

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

Ролику доступны те же положение и ширина, что и картинке: по центру, во всю ширину или с обтеканием — тогда текст обходит его сбоку.

На узких экранах обтекание отключается само: в колонке шириной с телефон обтекать нечем, и ролик занимает её целиком. Для видео это важнее, чем для картинки — мелкий плеер неудобно нажимать.

Встраиваются только эти два источника — остальные хосты запрещены политикой безопасности сайта. Ссылку на чужой хост компонент не теряет: показывает обычным переходом.

Картинки

Обычная картинка занимает всю ширину колонки:

Изображение без описания

Картинка с обтеканием прижимается к краю, и текст обходит её сбоку. Ширина задаётся долей колонки — панель над картинкой предложит и то и другое.

Изображение без описания

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

Разделитель

Горизонтальная черта отделяет крупные части материала друг от друга.