AstroGlass-пен Жұмысты Бастау

AstroGlass Үлгісіне қош келдіңіз! Бұл нұсқаулық сізге әзірлеу ортаңызды (development environment) орнатуға және үлгіні қажеттіліктеріңізге сай реттеуге көмектеседі.

Алғышарттар

Бастамас бұрын, келесілердің орнатылғанына көз жеткізіңіз:

Node.js v20 немесе одан жоғары нұсқасы
pnpm (ұсынылады) немесе npm
Код редакторы (VS Code ұсынылады)

💡

Кәсіби Кеңес

Диск кеңістігін үнемді әрі пакеттерді жылдамырақ басқару үшін pnpm пайдалануды ұсынамыз.

Орнату

Репозиторийді (Repository) Клондау

Алдымен, үлгі репозиторийін жергілікті компьютеріңізге клондаңыз (clone):

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

Тәуелділіктерді (Dependencies) Орнату

Өзіңіз қалаған пакет менеджерін (package manager) пайдаланып жоба тәуелділіктерін орнатыңыз:

pnpm install

npm install

yarn install

Әзірлеу серверін (Development Server) іске қосу

Үлгінің жұмысын көру үшін әзірлеу серверін іске қосыңыз:

pnpm dev

npm run dev

yarn dev

Енді сіздің сайтыңыз http://localhost:4321 мекенжайында жұмыс істеп тұруы керек 🎉

Жоба Құрылымы

Міне, жобаның папкалар (folders) құрылымына қысқаша шолу:

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

Тақырыпты (Theme) Таңдау

Үлгі дайын 6 әдемі тақырыппен (theme) бірге келеді:

Тақырып (Theme)	Сипаттамасы
Liquid	Сұйық анимациялар, градиентті фондар
Glass	Шыны морфизмі (Glassmorphism) эффектілері, бұлыңғыратылған (frosted) панельдер
Neo	Қалың типография, күшті контраст
Luxury	Керемет алтын түстес акценттер, премиум сезім
Minimal	Таза, фокусталған, алаңдатусыз дизайн
Aurora	Иммерсивті градиенттер, геометриялық құрылым

Тақырыпты ауыстыру үшін жай ғана жоғарғы (header) бөліктегі тақырыпты ауыстырғышқа (theme switcher) өтіңіз немесе тақырыптық демо (demo) беттерге тікелей кіріңіз (мысалы, /liquid, /glass, /aurora).

Келесі Қадамдар

Әзірлеу ортаңызды (development environment) орнатып болғаннан кейін:

Тақырыптар Жүйесі (Theming System) — Динамикалық тақырып архитектурасының қалай жұмыс істейтінін біліңіз
Бағыттау (Routing) және i18n — Басқа тілдерді қолдауды қосыңыз
Cloudflare-ге орналастыру (Deployment) — Cloudflare Pages-ке орналастыру

ℹ️

Көмек Керек Пе?

Егер қандай да бір мәселелерге тап болсаңыз, Пішіндер және Тексерулер Нұсқаулығын (Forms & Validation Guide) тексеріңіз немесе мәселе (issue) ашыңыз.