К содержанию

Главное

Урок: первый лендинг

За этот урок вы соберёте страницу-лендинг для выдуманного сервиса заметок: первый экран с заголовком и кнопкой, три преимущества и призыв к действию. Урок занимает около 15 минут.

Вы сделаете шесть шагов:

  1. Создадите проект.
  2. Опишете страницу лендинга.
  3. Добавите первый экран.
  4. Добавите преимущества.
  5. Закончите призывом к действию.
  6. Соберёте сайт и откроете его в браузере.

Понадобятся PHP 8.2+, Composer и Node.js 20+ — как в быстром старте.

1. Создайте проект

Bash
mkdir notes-site
cd notes-site
composer require simai/docara:^3.0
php vendor/bin/docara init . --lang=ru

Появится небольшой сайт на русском с главной страницей в content/ru/index.md.

2. Опишите страницу лендинга

Лендинг — обычная страница с другим каркасом: без бокового меню, с блоками во всю ширину окна. Каркас задаёт файл настроек страницы. Создайте content/ru/product.page.json:

content/ru/product.page.json
{
  "schema": "docara.page.v1",
  "title": "Сервис заметок",
  "description": "Лендинг сервиса заметок: что он умеет и как начать.",
  "preset": "landing",
  "layout": { "container": { "max": 7 } },
  "navigation": { "hidden": true }
}
  • "preset": "landing" выбирает каркас лендинга.
  • "navigation": { "hidden": true } убирает страницу из бокового меню документации: на лендинг обычно ведут ссылки, а не меню.

3. Добавьте первый экран

Создайте content/ru/product.md с первым экраном:

content/ru/product.md
:::hero {layout=centered padding=2xl}
# Заметки, которые находятся сами

Сервис собирает заметки из почты, чата и документов и показывает их там,
где вы работаете.

[Начать бесплатно](/getting-started/first-page/)
:::

Внутри первого экрана — один заголовок #, описание и ссылка, которая станет кнопкой. layout=centered ставит всё по центру, padding=2xl делает экран высоким.

4. Добавьте преимущества

Допишите в тот же файл:

Markdown
## Что умеет сервис

:::features
- :icon[search]{size=2 container=square variant=tonal scheme=primary} **Поиск по смыслу.** Находит заметку, даже если вы не помните точных слов.
- :icon[sync]{size=2 container=square variant=tonal scheme=primary} **Синхронизация.** Одни и те же заметки на телефоне и компьютере.
- :icon[lock]{size=2 container=square variant=tonal scheme=primary} **Приватность.** Заметки хранятся зашифрованными.
:::

Каждый пункт списка в блоке features становится карточкой: значок, жирный заголовок и текст. Имена значков — на странице «Значок».

5. Закончите призывом к действию

Допишите в конец файла:

Markdown
## Попробуйте сегодня

Первые 30 дней бесплатно, карта не нужна.

:::cta
[Создать аккаунт](/getting-started/first-page/)
:::

В блоке cta — ровно одна ссылка. Заголовок и пояснение стоят перед блоком обычным текстом.

6. Соберите и откройте

Bash
php vendor/bin/docara build production
php vendor/bin/docara verify-static build_production
php vendor/bin/docara serve production --host=127.0.0.1 --port=8000 --no-build

Откройте http://127.0.0.1:8000/product/. Вы увидите первый экран с заголовком «Заметки, которые находятся сами» и кнопкой, ниже — три карточки преимуществ и кнопку «Создать аккаунт». Переключите тему в меню с шестерёнкой справа в шапке и проверьте страницу в светлой и тёмной теме.

Остановите просмотр клавишами Ctrl+C.

Если что-то пошло не так

Сообщение Что сделать
MARKDOWN_CTA_LINK_REQUIRED В блоке cta должна быть ровно одна ссылка и ничего больше. Вынесите заголовок и текст перед блоком.
MARKDOWN_BLOCK_UNCLOSED Не хватает строки ::: после блока. Проверьте, что каждый блок закрыт.
MARKDOWN_HERO_H1_REQUIRED, MARKDOWN_HERO_STRUCTURE_INVALID В первом экране нарушен порядок: сначала один заголовок #, потом текст, ссылки и картинка.

Остальные коды — в справочнике ошибок.

Что дальше