Empezando con AstroGlass

¡Bienvenido a la Plantilla AstroGlass! Esta guía le mostrará cómo configurar su entorno de desarrollo y personalizar la plantilla para que se adapte a sus necesidades.

Requisitos Previos

Antes de comenzar, asegúrese de tener lo siguiente instalado:

Node.js v20 o superior
pnpm (recomendado) o npm
Un editor de código (Se recomienda VS Code)

💡

Consejo Profesional

Recomendamos usar pnpm para una gestión de paquetes más rápida y eficiente en el uso del disco.

Instalación

Clonar el Repositorio

Primero, clone el repositorio de la plantilla en su máquina local:

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

Instalar Dependencias

Instale las dependencias del proyecto usando su administrador de paquetes preferido:

pnpm install

npm install

yarn install

Iniciar el Servidor de Desarrollo

Ejecute el servidor de desarrollo para ver su plantilla en acción:

pnpm dev

npm run dev

yarn dev

Su sitio debería estar funcionando ahora en http://localhost:4321 🎉

Estructura del Proyecto

Aquí hay una descripción general de la estructura de carpetas del proyecto:

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

Elección de un Tema

La plantilla viene con 6 hermosos temas listos para usar:

Tema	Descripción
Liquid	Animaciones fluidas, fondos degradados
Glass	Efectos de glassmorphism, paneles esmerilados
Neo	Tipografía audaz, fuerte contraste
Luxury	Elegantes acentos dorados, sensación premium
Minimal	Limpio, enfocado, sin distracciones
Aurora	Degradados inmersivos, estructura geométrica

Para cambiar de tema, simplemente navegue hacia el selector de temas en el encabezado o visite las páginas de demostración del tema directamente (por ejemplo, /liquid, /glass, /aurora).

Próximos Pasos

Ahora que tiene configurado su entorno de desarrollo:

Sistema de Temas — Conozca cómo funciona la arquitectura de temas dinámicos
Enrutamiento e i18n — Agregue soporte para más idiomas
Despliegue en Cloudflare — Despliegue en Cloudflare Pages

ℹ️

¿Necesita Ayuda?

Consulte la Guía de Formularios y Validación o abra un issue si se encuentra con algún problema.