Better Translateالرئيسية
GitHub
البدء
  • المقدمة
  • المهمة
  • التثبيت
  • CLI
  • المهارات
  • RTL
  • سجل التغييرات
المحولات
  • الأساس
  • React
  • Expo
  • Astro
  • MD & MDX
  • Next.js
  • TanStack Router

Astro

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

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

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

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

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

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:

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

4. تعيين إعداد الطلب المحلي في الوسيط

أنشئ src/middleware.ts:

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

إذا أردت القائمة المشتركة بصيغة الأقواس، استورد SUPPORTED_ASTRO_LOCALE_ROUTE_SYNTAXES من @better-translate/astro. تتضمن [locale] و[lang] و[language] و[intl] و[i18n] و[l10n] و[localization].

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

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

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 بعد أن يعمل هذا الإعداد الأساسي.

توليد ملفات الإعداد المحلي تلقائيًا

بدل كتابة كل ترجمة يدويًا، استخدم واجهة سطر الأوامر لاستخراج النصوص وتوليد ملفات الإعداد المحلي: دليل واجهة سطر الأوامر

أمثلة

  • astro-example