Démarrer avec AstroGlass

Bienvenue dans le Modèle AstroGlass ! Ce guide vous accompagnera pour configurer votre environnement de développement et personnaliser le modèle pour répondre à vos besoins.

Prérequis

Avant de commencer, assurez-vous d’avoir installé ce qui suit :

Node.js v20 ou supérieur
pnpm (recommandé) ou npm
Un éditeur de code (VS Code recommandé)

💡

Conseil de pro

Nous recommandons d’utiliser pnpm pour une gestion de paquets plus rapide et économe en espace disque.

Installation

Cloner le dépôt

Tout d’abord, clonez le dépôt du modèle sur votre machine locale :

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

Installer les dépendances

Installez les dépendances du projet en utilisant votre gestionnaire de paquets préféré :

pnpm install

npm install

yarn install

Démarrer le serveur de développement

Lancez le serveur de développement pour voir votre modèle en action :

pnpm dev

npm run dev

yarn dev

Votre site devrait maintenant fonctionner sur http://localhost:4321 🎉

Structure du Projet

Voici un aperçu de la structure des dossiers du projet :

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

Choisir un Thème

Le modèle est livré avec 6 superbes thèmes prêts à l’emploi :

Thème	Description
Liquid	Animations fluides, arrière-plans dégradés
Glass	Effets de glassmorphism, panneaux dépolis
Neo	Typographie audacieuse, fort contraste
Luxury	Élégants accents dorés, sensation premium
Minimal	Épuré, ciblé, sans distraction
Aurora	Dégradés immersifs, structure géométrique

Pour changer de thème, accédez simplement au sélecteur de thème dans l’en-tête ou visitez directement les pages de démonstration des thèmes (par ex., /liquid, /glass, /aurora).

Prochaines Étapes

Maintenant que votre environnement de développement est configuré :

Système de Thèmes — Découvrez comment fonctionne l’architecture de thèmes dynamiques
Routage & i18n — Ajoutez le support de langues supplémentaires
Déploiement Cloudflare — Déployez sur Cloudflare Pages

ℹ️

Besoin d'aide ?

Consultez le Guide des Formulaires & Validation ou ouvrez un problème si vous rencontrez des difficultés.