Astro

استخدم @better-translate/astro عندما يحتاج تطبيق Astro إلى ترجمات مرتبطة بالطلب.

1. تثبيت الحزم

npm install @better-translate/core @better-translate/astro astro

2. إنشاء المترجم

أنشئ src/lib/i18n.ts:

1import { configureTranslations } from "@better-translate/core";23const en = {4  home: {5    title: "Hello from Astro",6  },7} as const;89const es = {10  home: {11    title: "Hola desde Astro",12  },13} as const;1415export const translator = await configureTranslations({16  availableLocales: ["en", "es"] as const,17  defaultLocale: "en",18  fallbackLocale: "en",19  messages: { en, es },20});

3. تعريض إعدادات الطلب

أنشئ src/lib/request.ts:

1import { getRequestConfig } from "@better-translate/astro";23import { translator } from "./i18n";45export const requestConfig = getRequestConfig(async () => ({6  translator,7}));

4. تعيين لغة الطلب في الوسيط

أنشئ src/middleware.ts:

1import { createBetterTranslateMiddleware } from "@better-translate/astro/middleware";23import { requestConfig } from "./lib/request";45export const onRequest = createBetterTranslateMiddleware(requestConfig, {6  resolveLocale: ({ params }) => params?.lang,7});

5. قراءة الترجمات في الصفحة

أنشئ src/lib/server.ts:

1import { createServerHelpers } from "@better-translate/astro";23import { requestConfig } from "./request";45export const { getLocale, getTranslations } =6  createServerHelpers(requestConfig);

أنشئ src/pages/[lang]/index.astro:

astro

1---2import { getLocale, getTranslations } from "../../lib/server";34const locale = await getLocale();5const t = await getTranslations();6---78<html lang={locale}>9  <body>10    <h1>{t("home.title")}</h1>11  </body>12</html>

الخطوة التالية الاختيارية

إذا كانت مستندات Astro أو منشورات المدونة الخاصة بك موجودة في مجموعات محتوى مترجمة، أضف مساعدي محتوى Astro أو محول MDX بعد أن يعمل هذا الإعداد الأساسي.

إنشاء ملفات اللغة تلقائيًا

بدلاً من كتابة كل ترجمة يدويًا، استخدم CLI لاستخراج السلاسل وإنشاء ملفات اللغة: دليل CLI

أمثلة

astro-example