← Назад к записям
Обложка статьи про картинки в блоге

Как в этом блоге работают картинки

Как в этом блоге работают картинки

Каждая статья в этом блоге — обычный Markdown-файл. Картинки в нём делятся на два вида: обложка и иллюстрации внутри текста. Разберём оба на коротком примере.

Обложка

Обложка задаётся во frontmatter через поле cover. Это локальный файл в репозитории, а не внешняя ссылка. Рядом с ним обязательно должно быть поле coverAlt — короткое описание для читателей и поисковиков.

Схема frontmatter статьи с полями cover и coverAlt

Иллюстрации

Иллюстрации вставляются прямо в текст обычным Markdown-синтаксисом. Важно, чтобы alt был непустым — иначе валидатор не пропустит статью:

![Подпись к картинке](assets/kak-v-etom-bloge-rabotayut-kartinki/render.png)

Обратите внимание: пример выше стоит внутри блока кода, поэтому он не считается настоящей иллюстрацией. А вот эта картинка — настоящая:

Как статья превращается в страницу сайта

Что проверяет валидатор

Перед публикацией скрипт validate-post проходит по тексту статьи и проверяет: обложка существует, у каждой иллюстрации есть alt, а файлы лежат рядом со статьёй. Блоки кода при этом пропускаются, поэтому синтаксис в примерах не путает проверку.

Такой подход держит статьи самодостаточными: вся графика живёт в репозитории вместе с текстом.