Más Recetas

Mira ejemplos guiados de cómo agregar características a tu proyecto de Astro.

Recetas oficiales

• Compartiendo Estado

  Aprende a compartir estado entre componentes de framework con Nano Stores.

• RSS

  Agrega un feed RSS a tu sitio Astro para permitir que los usuarios se suscriban a tu contenido.

• Instalando un plugin de Vite o Rollup

  Aprende como puedes importar datos en YAML añadiendo un plugin de Rollup en tu proyecto.

• Construir un componente de imagen personalizado

  Aprende a construir un componente de imagen personalizado que admita media queries utilizando la función `getImage`

• Construye formularios con rutas API

  Aprende como usar JavaScript para enviar formularios a una ruta API

• Construye formularios HTML en páginas de Astro

  Aprende como construir formularios HTML y manejar envíos en tu frontmatter

• Usa Bun con Astro

  Aprende cómo usar Bun con tu sitio de Astro.

• Llama endpoints desde el servidor

  Aprende como llamar endpoints desde el servidor en Astro.

• Verificar un Captcha

  Aprende como crear una ruta de API y consultarla desde el cliente.

• Construye tu sitio de Astro con Docker

  Aprende cómo construir tu sitio de Astro utilizando Docker.

• Importa Imágenes Dinámicamente

  Aprende a importar imágenes dinámicamente usando la función import.meta.glob de Vite

• Agregar iconos a los enlaces externos

  Aprende cómo instalar un plugin de rehype para agregar iconos a los enlaces externos en tus archivos Markdown.

• Agrega características i18n

  Utiliza enrutamiento dinámico y colecciones de contenido para agregar soporte de internacionalización a tu sitio de Astro.

• Agrega la hora de última modificación

  Crea un plugin de remark para agregar la hora de última modificación a tu Markdown y MDX

• Agregar tiempo de lectura

  Construye un plugin de remark para añadir tiempo de lectura a tus archivos Markdown o MDX.

• Comparte el estado entre componentes de Astro

  Aprende como compartir el estado entre componentes de Astro con Nano Stores.

• Utilizando transmisión para mejorar el rendimiento de la página

  Aprende cómo utilizar la transmisión para mejorar el rendimiento de la página.

• Estilo de Markdown renderizado con Tailwind Typography

  Aprende a usar @tailwind/typography para dar estilo a tu Markdown renderizado

Recursos de la comunidad

¡Agrega los tuyos aquí! Consulta nuestra guía de contribución de recetas para obtener más información.

• Utiliza un nombre de archivo dinámico al importar imágenes
• Agrega transiciones animadas de página con Swup
• Utiliza UnoCSS en Astro
• Construye una tabla de contenido a partir de los encabezados Markdown de Astro
• Crea un plugin de Remark para eliminar fragmentos de palabras sueltas de tus archivos Markdown
• Agrega la funcionalidad de búsqueda a tu sitio con Pagefind
• Agrega la funcionalidad de búsqueda a tu sitio web utilizando Fuse.js.
• Configura VSCode, ESLint y Prettier para que funcionen con Astro
• Mejora tus compilaciones de Astro: modifica archivos HTML después de la compilación
• Agrega el modo oscuro a Astro con Tailwind CSS
• Genera mapas del sitio localizados para tu proyecto de Astro y Storyblok
• Integra Prettier con Astro y Tailwind CSS
• Agrega un feed RSS a Astro utilizando las historias de Storyblok
• Usando tRPC en Astro
• Cómo hacer que tu sitio web en Astro sea multilingüe con Crowdin: Guía de localización en Astro
• Agregar imágenes de publicaciones de blog a tu feed RSS de Astro
• Configurando micro-frontends con Astro
• Añade autenticación de nombre de usuario y contraseña con Lucia
• Añade Github OAuth con Lucia
• Integrando Sentry con Astro
• Configura páginas de borrador de manera efectiva en Astro con autoría de contenido impulsada por configuración
• ¿Cómo enviar cualquier dato a tu feed RSS? Una guía con Astro + RSS