autorenew

Astro i18n Starter

الإعداد

إنشاء المشروع

npm create astro@latest -- --template psephopaiktes/astro-i18n-starter

التكوين

1. تكوين astro.config.mjs

قم بتعيين defaultLocale و locales في ملف تكوين Astro.

import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
    site: 'https://astro-i18n-starter.pages.dev',
    integrations: [mdx(), sitemap()],
    i18n: {
+   defaultLocale: 'en',
+   locales: ['en', 'ja', 'zh-cn', 'ar'],
        routing: {
            prefixDefaultLocale: true,
            redirectToDefaultLocale: false,
        },
    },
    markdown: {
        shikiConfig: {
            theme: 'one-dark-pro',
        },
    },
});

يرجى الرجوع إلى الوثائق الرسمية للحصول على خيارات التكوين المفصلة لـ Astro.

مرجع التكوين | الوثائق

التوجيه الدولي (i18n) | الوثائق

لا يُنصح بتغيير إعدادات prefixDefaultLocale و redirectToDefaultLocale. Astro i18n Starter يدير عملية إعادة التوجيه باستخدام جافا سكريبت على الجانب العميل. إذا لم يحتوي عنوان URL على لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية. على سبيل المثال، سيتم إعادة التوجيه من /setup/ إلى /en/setup/.

2. تكوين /src/locales.ts

بالمثل، قم بتحديث ملف التكوين لـ Astro i18n Starter.

قم بتعيين اللغة الافتراضية في DEFAULT_LOCALE_SETTING وقائمة اللغات المرغوبة في LOCALES_SETTING. يتبع هذا تكوين locales في Starlight.

export const DEFAULT_LOCALE_SETTING = "en";

export const LOCALES_SETTING: LocaleSetting = {
    "en": {
        "label": "الإنجليزية"
    },
    "ja": {
        "label": "اليابانية"
    },
    "zh-cn": {
        "label": "الصينية المبسطة",
        "lang": "zh-CN"
    },
    "ar": {
        "label": "العربية",
        "dir": "rtl"
    },
};

interface LocaleSetting {
    [key: Lowercase<string>]: {
        label: string;
        lang?: string;
        dir?: 'rtl' | 'ltr';
    };
 }

يرجى الرجوع إلى الرابط التالي للحصول على معلومات حول رموز اللغة.

lang - HTML: لغة ترميز النص الفائق | MDN

هيكل المشروع

اتبع هيكل المشروع Astro.

src/
├── assets/
│   └── en/, ja/ ...
├── components/
│   └── i18n/
├── content/
│   │  blog/
│   └── config.ts
├── layouts/
├── pages/
│   └── [lang]/
│   └── en/, ja/ ...
├── styles/
├── consts.ts
├── i18n.ts
└── locales.ts

src/components/i18n

المجلد لمكونات واجهة المستخدم المستخدمة في مواقع الويب متعددة اللغات.

src/pages

src/consts.ts

ملف للبيانات الثابتة التي يمكن استيرادها واستخدامها داخل المشروع. يمكن حذفه أيضًا إذا لم يكن مطلوبًا.

src/i18n.ts

ملف يحتوي على تعريفات الوظائف المستخدمة في Astro i18n Starter. عمومًا، لا يوجد حاجة لتحرير هذا الملف.