يوجد عدة طرق لإنشاء صفحات متعددة اللغات باستخدام Astro i18n Starter.

إذا كنت ترغب في تقسيم الملفات حسب اللغة

أنشئ مجلدًا لكل لغة تحت pages وأضف الملفات بتنسيق Astro أو Markdown.

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

سيتم إنشاء الصفحات التالية

• /en/page-1/index.html
• /en/page-2/index.html
• /ja/page-1/index.html
• /ja/page-2/index.html

إذا كنت ترغب في إدارة الصفحات في ملف واحد

إذا كانت النصوص غير كبيرة جدًا، يمكنك استخدام ميزة توجيه Astro الديناميكي لإنشاء صفحات اللغات المختلفة من ملف واحد بشكل دينامي.

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

استورد كائن LOCALES داخل الملف واستخدم دالة getStaticPaths() في Astro لإنشاء المسارات الديناميكية.

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

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

سيتم إنشاء الصفحات التالية

• /en/page-1/index.html
• /en/page-2/index.html
• /ja/page-1/index.html
• /ja/page-2/index.html

إذا كنت ترغب في استخدام مجموعة المحتوى

إذا كنت ترغب في إدارة صفحات مثل المدونات أو الأخبار باستخدام ملفات Markdown، يمكنك استخدام ميزة مجموعة المحتوى في Astro.

الدليل

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

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

---
import Layout from "@/layouts/Article.astro";
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog");

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

لمزيد من التفاصيل، يرجى الاطلاع على وثائق Astro.

مجموعات المحتوى | الوثائق