autorenew

Astro i18n Starter

Agregar Páginas

Hay varias formas de crear páginas multilingües con Astro i18n Starter.

Si deseas separar archivos por idioma

Crea carpetas para cada idioma dentro de pages y agrega archivos en formato Astro o Markdown.

src/pages
├── en/
│   ├── page-1.astro
│   └── page-2.mdx
└── ja/
  ├── page-1.astro
  └── page-2.mdx

Se generarán las siguientes páginas:

Si deseas gestionar en un solo archivo

Si la cantidad de texto en la página no es demasiado grande, puedes usar la función de rutas dinámicas de Astro para generar dinámicamente páginas para cada idioma desde un solo archivo.

src/pages
└── [lang]/
    ├── page-1.astro
    └── page-2.astro

Importa el objeto LOCALES en el archivo y genera rutas dinámicas usando la función getStaticPaths() de Astro.

---
import { LOCALES } from "@/i18n";

export const getStaticPaths = () =>
  Object.keys(LOCALES).map((lang) => ({
    params: { lang },
  }));
---

Se generarán las siguientes páginas:

Si deseas usar Content Collection

Si deseas gestionar páginas como blogs o noticias en archivos Markdown, puedes usar la función de colección de contenido de Astro.

Estructura de directorios

src/
├── content.config.ts
├── blog/
│   ├── en/
│   │   ├── first-post.md
│   │   └── second-post.md
│   └── ja/
│        ├── first-post.md
│        └── second-post.md
└── pages/[lang]/blog/
  ├── index.astro
  └── [...id].astro

pages/[lang]/blog/[…id].astro

---
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog", ({ data }) => !data.draft)

  return posts.map((post) => {
    const [lang, ...id] = post.id.split("/");
    return { params: { lang, id: id.join("/") || undefined }, props: post };
  });
}
---

Para más detalles, consulta la documentación de Astro.

Colecciones de Contenido | Documentación