Оглавление
Astro
Фреймворк для быстрых сайтов с содержимым: страницы, коллекции содержимого, острова интерактивности.
1.Начало работы
- Что такое AstroДля каких сайтов подходит Astro, почему он по умолчанию не отправляет JavaScript и что такое острова.
- Создание проектаКак создать проект Astro командой npm create astro, запустить сервер разработки и что лежит в папках проекта.
- Компоненты .astroИз чего состоит компонент Astro: фронтматтер и шаблон, выражения, условия и списки, подключение одного компонента в другой.
- Страницы и маршрутыКак Astro превращает файлы из src/pages в адреса сайта, как связать страницы ссылками и сделать страницу 404.
- ПропсыКак передать данные в компонент Astro через атрибуты, описать их тип и задать значения по умолчанию.
- Макеты и слотыКак вынести общую разметку страниц в макет и вставить содержимое страницы через слот.
- СтилиСтили в компонентах Astro: изолированный тег style, общий CSS-файл, class:list и подключение Tailwind.
2.Содержимое
- Страницы на MarkdownКак сделать страницу сайта из файла Markdown, задать ей макет и получить данные из фронтматтера.
- MDXКак подключить MDX к Astro и вставлять в текст на Markdown компоненты и выражения JavaScript.
- Коллекции содержимогоКак описать коллекцию статей блога в src/content.config.ts: загрузчик glob и схема фронтматтера на zod.
- Выборка из коллекцийКак получить записи коллекции функциями getCollection и getEntry и вывести текст статьи через render.
- Динамические маршрутыКак одной страницей с параметром в имени файла создать страницы всех статей и тегов через getStaticPaths.
- ПагинацияКак разбить длинный список статей на страницы функцией paginate и вывести ссылки на соседние страницы.
- ИзображенияКак вывести картинку компонентом Image из astro:assets, чтобы Astro оптимизировал её при сборке, и как добавить обложку статье.
3.Интерактивность
- Острова и компоненты ReactКак подключить React к Astro, вставить React-компонент на страницу и оживить его в браузере директивой client:load.
- Директивы clientКогда остров загружается в браузере: client:load, client:idle, client:visible, client:media и client:only.
- Скрипты в компонентахКак добавить в компонент Astro обычный JavaScript для браузера через тег script и передать в него данные.
- Переходы между страницамиКак включить плавные переходы между страницами компонентом ClientRouter и анимировать отдельные элементы.
4.Данные и сервер
- Загрузка данных при сборкеКак получить данные из внешнего API или JSON-файла во фронтматтере компонента и вывести их на странице.
- Рендеринг по запросуКак подключить адаптер сервера и сделать страницу, которая собирается заново при каждом запросе: параметры адреса, cookies, редирект.
- API-эндпоинтыКак сделать в Astro адрес, который отдаёт JSON вместо HTML: функции GET и POST в файлах src/pages.
- MiddlewareКак перехватить каждый запрос в src/middleware.ts: передать данные страницам через locals, закрыть раздел и изменить ответ.
- Actions и формыКак принять форму комментария через Astro Actions: описать действие с проверкой zod и вызвать его из браузера.
- Переменные окруженияКак хранить настройки и секретные ключи в файле .env и читать их через astro:env с проверкой типов.
5.Публикация
- SEO и карта сайтаКак задать адрес сайта, вывести мета-теги и канонический адрес в макете и создать sitemap интеграцией @astrojs/sitemap.
- RSS-лентаКак сделать RSS-ленту блога пакетом @astrojs/rss из коллекции статей и подключить её к страницам.
- Несколько языковКак настроить в Astro маршрутизацию для нескольких языков: папки локалей, Astro.currentLocale и ссылки через astro:i18n.
- Сборка и публикацияКак собрать сайт Astro командой npm run build и выложить его: статический хостинг для статики, сервер Node.js для страниц по запросу.