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

MD & MDX

استخدم @better-translate/md عندما تكون مستنداتك أو منشورات مدونتك أو صفحات محتواك في ملفات .md أو .mdx مُعَرَّفة حسب اللغة.

هذه الحزمة لا تستبدل المترجم الأساسي. إنها تقرأ قواعد اللغة من المترجم الذي أنشأته مسبقًا.

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

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

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

أنشئ src/i18n.ts:

ts
1import { configureTranslations } from "@better-translate/core";23const en = {4  docs: {5    title: "Docs",6  },7} as const;89const es = {10  docs: {11    title: "Documentacion",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. إنشاء مجلدات المحتوى

ضع مجلدًا واحدًا لكل لغة تحت نفس الجذر:

txt
1content/docs/2  en/3    getting-started.mdx4  es/5    getting-started.mdx

4. إنشاء مساعدات Markdown

أنشئ src/docs.ts:

ts
1import { createMarkdownHelpers } from "@better-translate/md";23import { translator } from "./i18n";45export const docs = createMarkdownHelpers(translator, {6  rootDir: "./content/docs",7});

5. قراءة مستند واحد

ts
1import { docs } from "./docs";23const englishDoc = await docs.getDocument("getting-started", {4  locale: "en",5});67const spanishDoc = await docs.getDocument("getting-started", {8  locale: "es",9});

6. تجميعه عندما تحتاج إلى المخرجات

ts
1const compiled = await docs.compileDocument("getting-started", {2  locale: "en",3});45compiled.kind; // "md" أو "mdx"6compiled.path;7compiled.usedFallback;

متى تستخدم مساعدات الخادم

إذا كان تطبيقك يحل لغة الطلب بالفعل على الخادم، استخدم @better-translate/md/server بحيث يتبع تحميل Markdown نفس لغة الطلب تلقائيًا.

إنشاء Markdown مُعَرَّف حسب اللغة تلقائيًا

استخدم خيار markdown.rootDir في واجهة سطر الأوامر لجعل المولد يترجم ملفات Markdown الخاصة بك: دليل واجهة سطر الأوامر

أمثلة

  • md-nextjs-example