Добро пожаловать в «Понимание Астро»!
Эта книга представляет собой полное руководство по Astro, веб-фреймворку нового поколения, созданному для обеспечения скорости работы.
Понимание Astro — это результат многомесячного изучения Astro и передачи результатов в практичной и простой для понимания форме.
Если вы хотите понять Astro, вы обратились к правильному источнику.
Не просто изучайте другую структуру. Поймите это.
Хотите скачать электронные книги
Оглавление
Ниже приводится подробное оглавление «Понимание астро».
Введение
Не будь недовольным
Отличия от официальной документации
Как построена книга
Обзор глав
Предварительные условия
Типографские соглашения
Глава 1. Создайте свое первое Astro-приложение
Что вы узнаете
Обзор проекта
Начиная
Установите Node.js
Настройка редактора кода
Структура проекта
tsconfig.json
пакет.json
пакет-lock.json
astro.config.mjs
src/env.d.ts
src/pages/index.astro
Введение в страницы Astro
Анатомия компонента Astro
Стили компонентов
Макеты страниц
Рендеринг компонентов и слотов
Написание названий компонентов с заглавной буквы
Глобальная директива стиля
Пользовательские шрифты и глобальный CSS
Независимые компоненты Astro
Добавление интерактивных скриптов
Интерактивное переключение тем
Селектор :global()
Обработка событий
Темизация с помощью переменных CSS
Доступ к глобальным клиентским объектам
Магия сценариев
Использование встроенных скриптов
Глобальные селекторы в скриптах
Страницы с уценкой
Навигация между страницами
Маркдаун-макеты
Составление макетов
Реквизит компонента
Использование свойств фронтмена уценки
Интерактивное состояние навигации
Компонентный состав
Шаблонный поток данных
Темная сторона define:vars
Загрузка нескольких локальных файлов
Развертывание статического сайта Astro
1. Создайте статические производственные активы
2. Обслуживание статических ресурсов через статический веб-сервер.
Проблема с ручным развертыванием
Автоматизация развертывания статического сайта
Насколько быстр наш сайт Astro?
Заключение
Глава 2: Подробное описание астрокомпонентов
Что вы узнаете
Введение
Основа Astro
Усталость от выполнения Javascript
Отказ от среды выполнения
Что такое астрокомпонент?
1. Стили по умолчанию являются локальными.
2. Элемент HTML всегда будет присутствовать.
3. Поднимаются стили и скрипты
4. Элемент <head> и его дочерние элементы не будут подняты.
Компонент astro — это файл .astro, способный отображать любой допустимый HTML.
Компоненты Astro можно комбинировать для создания сложных страниц.
Компоненты Astro могут использовать мощный синтаксис шаблонов.
Использование переменных
Создание динамических атрибутов
Динамический HTML
Динамические теги
Пересмотр слотов
Не совсем JSX
1. Создание переменных или обращение к ним
2. Обработка импорта
3. Получение данных
Скрипт компонента
Шаблон компонента
Заключение
Глава 3: Создайте свой собственный остров компонентов
Что вы узнаете
Краткая история того, как мы сюда попали
Плюсы частичной гидратации
Минусы частичной гидратации
Плюсы рендеринга на стороне сервера с гидратацией на стороне клиента
Минусы рендеринга на стороне сервера с гидратацией на стороне клиента
Плюсы серверного рендеринга
Минусы серверного рендеринга
Плюсы рендеринга на стороне клиента (CSR)
Минусы рендеринга на стороне клиента
Где все начинается
Рендеринг на стороне клиента (CSR)
Серверный рендеринг
Рендеринг на стороне сервера с гидратацией на стороне клиента
Частичная гидратация для победы
Откуда взялась островная архитектура?
Реализация архитектуры островов частичной гидратации
Вю
Миниатюрный стиль
Предействовать
Поддержка условий client:idle и client:media.
waitForIdle
ждатьForMedia
Цели
Установка
API-дизайн
Начиная
Использование элемента шаблона контента
Обработка отложенной гидратации с помощью атрибутов client:
Поддерживаемые фреймворки: Vue, Petite-vue и Preact.
Заключение
Хотите скачать электронные книги? кликните сюда
Глава 4: Тайная жизнь островов Астрокомпонентов
Что вы узнаете
Как работают острова в Astro
Это не ошибка. Это особенность.
Шаг 1: Создайте сайт Astro
Шаг 2. Установите интеграцию с фреймворком
Шаг 3. Напишите структуру компонентов
Шаг 4. Рендеринг структуры компонентов
Ответственное увлажнение
клиент: загрузить
клиент: только
клиент:видимый
клиент: СМИ
клиент: бездействует
Использование нескольких фреймворков
Счетчик голосов в Vue
Рендеринг различных компонентов фреймворка
Совместное использование состояния между компонентными островами
Как работает наномагазин
Установить нано магазин
Создайте значение состояния
Использование значения состояния в компонентах платформы
Передача реквизитов и дочерних элементов в компоненты фреймворка
Вложенные компоненты фреймворка
Подвохи Астро-Айленда
1. Не используйте компонент Astro в компоненте платформы.
2. Не увлажняйте компонент Astro.
Почему острова?
1. Производительность
2. Ответственное увлажнение
3. Параллельная загрузка
Заключение
Глава 5: О, мой Реакт! (Клон сайта документации React)
Что вы узнаете
Настройте стартовый проект
Установка зависимостей
Стилизация Astro-проектов с помощью Tailwind
Установка попутного ветра
Как работает Tailwind?
Конфигурация попутного ветра
Псевдоним импорта машинописного текста
Острова и компоненты страницы совместного размещения
Подсветка синтаксиса
Плюсы
Минусы
Плюсы
Минусы
Компонент кода по умолчанию
Принеси свою тему
Обработка светлых и темных тем
Начало работы с коллекциями контента
Быстрый Зод
Папка .astro
Какие проблемы решают коллекции контента?
Организация коллекций контента
Создание контента с помощью MDX
Настройка коллекций контента
Запрос и отображение коллекций контента
Динамическая маршрутизация
1. Именованные параметры
2. Параметры покоя
Приоритетный порядок
Создавайте маршруты с коллекциями контента
Рендеринг каждого контента блога
Компоненты многомерных выражений
Настраиваемые HTML-элементы
Внутренние компоненты
Внешний импорт
Автоимпорт
В центре внимания интеграция: Astro SEO
Пользовательские страницы 404 в Astro
Заключение
Глава 6. Серверный рендеринг (SSR) в Astro
Что вы узнаете
Когда вам нужна ССР?
Как включить SSR
Развертывание проекта SSR
Используйте правильный адаптер
SSR со статическими страницами
От запроса к ответу
Объект запроса
Объект ответа
Перенаправить ответ
Утилиты для управления файлами cookie
IP-адрес запроса
Переменные среды
Получение переменных среды
Переменные среды по умолчанию
Создание переменных среды
Машинописный текст IntelliSense
Динамические маршруты
1. Именованные параметры
2. Параметры покоя
Приоритетный порядок
Конечные точки сервера
Создание конечных точек сервера
Запросить подробности
Динамические маршруты API
Выделенный каталог API
Поддержка других методов HTTP
Потоки, о ручьи
Что такое потоковая передача на сервере?
Почему мы должны беспокоиться?
Стриминг – это просто, но сложно
Стриминг сервера в Astro
Использование преимуществ потоковой передачи
Заключение
Глава 7: Будьте слышны! (Полный астропроект)
Что вы узнаете
Настройка проекта
Обзор проекта
Домашняя страница
Страница записи
Страница регистрации
Страница входа
Вспомогательные компоненты и утилиты
Выбор технологий
Настройка серверной части
Обработка аутентификации
Инициализация Firebase на клиенте
Использование эмуляторов Firebase
Обработка регистрации пользователей
Обработка входа пользователя в систему
Реализация защищенных страниц
Инициализация Firebase на сервере
Защита маршрута домашней страницы
Обновление URL-адреса перенаправления
Выход пользователя с защищенной страницы
Настройка облачного хранилища
Загрузка аудиозаписей
Обработка загрузок через маршрут API
Загрузка записей с клиента
Реакция на изменения пользовательского интерфейса в компонентах платформы
Получение данных с сервера
Отправка HTML-форм
Заключение
Глава 8: Создайте свою собственную астроинтеграцию
Что вы узнаете
Астро и Вите
Что такое Astro-интеграции
Привет, мир. Извините, Привет, Интеграция
Цель проекта
Ваша первая индивидуальная интеграция
Печать сообщения на консоль сервера
Пользовательские интеграции как заводские функции
Жизненный цикл хуков Astro
Когда и почему нужны крючки
Изучение порядка оценки хуков
Создайте интеграцию предварительного рендеринга по умолчанию
Цель проекта
API интеграции
Обзор технического решения
Инициализация проектов с помощью флагов CLI
Настройка интеграции
Проверка решенной конфигурации Astro
Применение плагинов Vite в пользовательских интеграциях
Написание плагинов Vite для Astro
Анализ и преобразование AST
Ручное тестирование
Создание рендереров и интеграция библиотек
Заключение
Заключение
Хотите скачать электронные книги? кликните сюда
Лицензия
Этот проект распространяется по международной лицензии Creative Commons Attribution-NonCommercial-NoDerivatives 4.0. Подробности смотрите в файле LICENSE.md.
