Рецепты Astro

Посмотрите примеры добавления различных функций в проект Astro.

Официальные рецепты

Официальные рецепты Astro — это короткие и сфокусированные пошаговые руководства. Они проведут вас через процесс решения конкретной задачи на рабочем примере. Рецепты — отличный способ добавить новые возможности на ваш сайт!

• Установка Vite или Rollup плагинов

  Узнайте, как вы можете импортировать данные YAML путём добавления плагина Rollup в свой проект.

• Анализ размера сборки

  Узнайте, как анализировать размер файлов, генерируемых Astro, с помощью `rollup-plugin-visualizer`.

• Создание собственного компонента изображения

  Узнайте, как создать кастомный компонент изображения с поддержкой медиа-запросов, используя функцию getImage.

• Работа с формами через API-маршруты

  Узнайте, как использовать JavaScript для отправки данных из форм на API-маршруты в Astro.

• Создание HTML-форм на страницах Astro

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

• Использование Bun с Astro

  Узнайте, как использовать среду выполнения Bun для вашего сайта на Astro.

• Вызов эндпоинтов с сервера

  Узнайте, как вызывать эндпоинты с сервера в Astro.

• Проверка Captcha

  Узнайте, как создать маршрут API и получить его от клиента.

• Настройка имен файлов в итоговой сборке

  Узнайте, как изменить стандартную схему именования файлов JavaScript, CSS и изображений в Astro с помощью настроек Rollup в Vite.

• Сборка сайта Astro с помощью Docker

  Узнайте, как собрать и запустить ваш сайт на Astro в контейнере Docker.

• Динамический импорт изображений

  Узнайте, как динамически импортировать изображения с помощью функции Vite import.meta.glob.

• Добавление иконок к внешним ссылкам

  Узнайте, как установить плагин rehype для добавления иконок к внешним ссылкам в ваших файлах Markdown.

• Реализация функций i18n

  Используйте динамическую маршрутизацию и коллекции контента для создания многоязычного сайта на Astro.

• Создание приложения для панели инструментов разработчика

  Узнайте, как создать собственное приложение для Dev Toolbar.

• Добавьте время последнего изменения

  Создайте плагин remark, чтобы добавить время последнего изменения к своим Markdown и MDX.

• Добавление времени чтения

  Создайте плагин remark для расчета времени чтения в файлах Markdown или MDX.

• Добавление RSS-ленты

  Добавьте RSS-ленту на свой сайт Astro, чтобы пользователи могли подписываться на обновления.

• Общее состояние между островками

  Узнайте, как организовать передачу данных между компонентами разных фреймворков с помощью Nano Stores.

• Общее состояние между компонентами Astro

  Узнайте, как организовать общее состояние между компонентами Astro с помощью Nano Stores.

• Использование потоковой передачи для ускорения загрузки страниц

  Узнайте, как использовать HTML streaming для повышения производительности сайта.

• Стилизация Markdown с помощью Tailwind Typography

  Узнайте, как использовать плагин @tailwindcss/typography для оформления контента из Markdown.

Ресурсы сообщества

Еще больше рецептов от сообщества можно найти на сайте Astro Tips.