Навигация
Part 1

Начало работы с AstroGlass

Узнайте, как настроить и персонализировать ваш Astro шаблон с темами, интернационализацией и облачным развертыванием.

Добро пожаловать в шаблон AstroGlass! Это руководство поможет вам настроить среду разработки и адаптировать шаблон под ваши нужды.

Предварительные требования

Прежде чем начать, убедитесь, что у вас установлено следующее:

  • Node.js версии 20 или выше
  • pnpm (рекомендуется) или npm
  • Редактор кода (рекомендуется VS Code)
💡
Совет

Мы рекомендуем использовать pnpm для быстрой и эффективной работы с пакетами.

Установка

Клонируйте репозиторий

Сначала клонируйте репозиторий шаблона на свой локальный компьютер:

Terminal
git clone https://github.com/kamsqee/astroglass.git my-project
cd my-project

Установите зависимости

Установите зависимости проекта, используя ваш любимый менеджер пакетов:

Terminal window
pnpm install
Terminal window
npm install
Terminal window
yarn install

Запустите сервер разработки

Запустите сервер разработки, чтобы увидеть шаблон в действии:

Terminal window
pnpm dev
Terminal window
npm run dev
Terminal window
yarn dev

Ваш сайт теперь должен быть доступен по адресу http://localhost:4321 🎉

Структура проекта

Обзор структуры папок проекта:

  • src/
    • components/
      • sections/
        • hero/
          • HeroLiquid.astro
          • HeroGlass.astro
          • HeroNeo.astro
          • …
        • features/
        • pricing/
        • about/
        • portfolio/
        • …
      • layout/
        • header/
      • ui/
      • docs/
      • mdx/
    • config/
      • themes.ts
      • locales.ts
      • docs.ts
      • navigation.ts
    • content/
      • docs/
        • en/
        • ru/
      • blog/
    • locales/
      • en/
      • ru/
    • pages/
      • index.astro
      • [theme].astro
      • docs/
      • blog/
    • styles/
      • global.css
      • _themes.css
      • components/
  • public/
  • astro.config.mjs
  • package.json

Выбор темы

Шаблон поставляется с 6 великолепными темами:

ТемаОписание
LiquidПлавные анимации, градиентные фоны
GlassЭффекты стекломорфизма, полупрозрачные панели
NeoСмелая типографика, сильный контраст
LuxuryЭлегантные золотые акценты, премиальный вид
MinimalЧистый, сфокусированный дизайн без лишних деталей
AuroraИммерсивные градиенты, геометрическая структура

Чтобы переключить тему, воспользуйтесь переключателем в шапке сайта или посетите демонстрационные страницы тем напрямую (например, /liquid, /glass, /aurora).

Следующие шаги

Теперь, когда ваша среда разработки настроена:

  1. Система тем — Узнайте, как работает архитектура динамических тем
  2. Маршрутизация и i18n — Добавьте поддержку новых языков
  3. Развёртывание на Cloudflare — Разверните проект на Cloudflare Pages
ℹ️
Нужна помощь?

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