HERON
Начать

Справочник

Формы секций

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

Ниже все формы, которые рисует тема этого сайта. У каждой видно, как её писать, живой результат, HTML, который выдаёт тема, и CSS за ним. Переключите цветные точки — тот же блок покажется в другой палитре.

Как HERON определяет форму

Секция начинается с заголовка и якоря: ## Заголовок {#якорь}. Ей принадлежит всё до следующего заголовка того же уровня. HERON смотрит, что внутри, и проверяет правила по порядку, срабатывает первое подходящее:

  1. markdown-таблица со строкой-разделителем — таблица;
  2. строки ключ | значение без разделителя — факты;
  3. нумерованный список — шаги;
  4. группы ###, в каждой список: ровно две — две колонки, три и больше — карточки;
  5. группы ### без списков — вопросы;
  6. маркированный список — список;
  7. цитата > без списка — врезка;
  8. всё остальное — текст.

Класс в якоре сильнее правил: {#tips .list}, {#guide .prose}, {#plans .checklist}. Если класс не подходит к содержимому, секция показывается текстом, а отчёт сборки об этом пишет. Полные правила — в контракте.

Форма · prose

Текст

Обычные абзацы, подзаголовки, ссылки и код. Подходит для объяснений, которые читают сверху вниз. Длинная текстовая секция сохраняет подзаголовки ###, если добавить класс .prose.

Почему достаточно папки

Сайт на HERON — это папка текстовых файлов. Её можно прочитать, скопировать и хранить в git, а на сервере работает только nginx.

Что внутри

Страницы в content/, фото в media/, настройки в site.yaml.

Тема получает всю секцию как HTML (section.html) и рисует её модулем modules/prose.html.

Форма · list

Список

Маркированный список. Если пункт начинается с жирного термина с точкой, HERON делит его на термин и пояснение, и тема может нарисовать термин отдельно.

Что вы получите с первой сборки

Карта сайта

Все страницы с датой последней правки.

llms.txt

Короткая карта сайта для нейросетей.

Настоящая 404

На каждом языке, с правильным кодом ответа.

Тема получает items — список пар term, text, links — и рисует их модулем modules/list.html.

Форма · steps

Шаги

Нумерованный список. Каждый пункт — шаг с заголовком, текстом и ссылками. Метка заглавными буквами в квадратных скобках в начале пункта становится ярлыком шага.

От папки до живого сайта

  1. 1

    Создайте

    heron new my-site -y делает папку с демо-страницами.
  2. 2

    Заполните

    Поменяйте тексты, добавьте фото, скопируйте страницу для новой.
  3. 3

    Опубликуйте Когда готово

    Соберите файлы или образ и опубликуйте выбранным способом.

Тема получает список шагов n, tag, title, text, links и рисует его модулем modules/steps.html.

Форма · checklist

Карточки

Три и больше групп ###, в каждой список. Каждая группа становится карточкой: первый абзац виден сразу, список и всё после него открываются по клику. Если первый абзац начинается с «Доступно.», «Скоро.» или «Платно.», у карточки появляется метка.

Что HERON делает за вас

Тема получает группы title, html, items и рисует их модулем modules/cards.html. Ряды выглядят ровно при 2, 3, 4, 6 или 8 карточках.

Форма · two-lists

Две колонки

Ровно две группы ### со списками. Пишется как карточки, но по смыслу это противопоставление: подходит / не подходит, было / стало.

Подойдёт ли вам HERON

Подходит

  • Сайты компаний, блоги и документация.
  • Несколько языков.

Не цель

  • Интернет-магазин с корзиной.
  • Правка страниц в браузере.

Тема получает те же группы, что у карточек, и ставит их рядом модулем modules/cards.html.

Форма · table

Таблица

Markdown-таблица со строкой-разделителем, колонок сколько угодно. В этой теме ячейка, которая начинается с +, подсвечивается как сильная сторона, а код в обратных кавычках остаётся кодом.

Способы хранения и публикации

СпособЧто делаетеСтоимость
git pushПравите и отправляетеБесплатно на GitHub
Docker HubСобираете и отправляете образНужен сервер
СтатикаСобираете и копируетеБесплатно на Pages

отмечает, в чём инструмент силён.

Тема получает head и rows и рисует их модулем modules/table.html.

Форма · faq

Вопросы

Группы ### без списков: заголовок — вопрос, текст под ним — ответ. Из этой секции HERON ещё и собирает разметку FAQPage для поисковиков.

Вопросы

Нужно ли уметь программировать?

Нет. Страницы — текстовые файлы с несколькими простыми пометками.

Это бесплатно?

Да. HERON — открытый код под AGPL-3.0.

Тема получает пары q, a и рисует их раскрывающимся списком модулем modules/faq.html.

Форма · facts

Факты

Строки ключ | значение без шапки таблицы. Короткие данные: формат, цена, срок, адрес.

Коротко

Лицензия
AGPL-3.0
Образ
ghcr.io/fmstm/heron:prod
Языки
сколько нужно

Тема получает пары key, value и рисует их модулем modules/facts.html.

Форма · callout

Врезка

Цитата > в секции без списка. Одно важное замечание, которое должно выделяться на фоне текста.

Перед публикацией

Сначала запустите строгую сборку: она останавливается на любом предупреждении, и битая ссылка не дойдёт до посетителей.

Тема получает цитату как HTML и рисует её модулем modules/callout.html.

Блоки темы по якорю

Некоторые блоки темы этого сайта — не отдельные формы: тема узнаёт их по якорю.

  • {#publish} или {#ship} с карточками становится вкладками со схемой рядом.
  • {#story} с шагами становится слайдами, которые листаются прокруткой.
  • {#llms-gen} рисует генератор llms.txt.
  • {#learn} на главной становится списком карточек-ссылок.

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