Contact

Agregar Páginas

Hay varias formas de crear páginas multilingües con Nosso.

Si quieres separar archivos por idioma

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

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

Se generarán las siguientes páginas:

Si quieres gestionar en un solo archivo

Si la cantidad de texto en la página no es demasiado grande, puedes usar la función de enrutamiento dinámico 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 quieres usar Content Collection

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

Directorio

src/
├── content.config.ts
├── blog/
│   ├── en/
│   │   ├── first-post.md
│   │   └── second-post.md
│   └── es/
│        ├── 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");

  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.

Content Collections | Docs