Creation:2025-04-18Last update:2026-05-31

    ترجم موقعك الإلكتروني المبني بـ Vite و Preact باستخدام Intlayer | التدويل (i18n)

    www.youtube.com

    جدول المحتويات

    لماذا Intlayer على البدائل؟

    بالمقارنة مع الحلول الرئيسية مثل preact-i18n أو i18next، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:

    تغطية كاملة للبريكت

    تم تحسين Intlayer للعمل بشكل مثالي مع Preact من خلال تقديم نطاق المحتوى على مستوى المكونات والترجمات المحملة البطيئة وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n).

    حجم البندل

    بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer في تقليل أحجام البندل وصفحاتك بنسبة تصل إلى 50%.

    الصيانة

    يؤدي تحديد نطاق محتوى تطبيقك إلى تسهيل الصيانة للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة Intlayer بالكامل لضمان دقة المحتوى الخاص بك.

    وكيل الذكاء الاصطناعي

    يؤدي تحديد موقع المحتوى المشترك إلى تقليل السياق المطلوب بواسطة نماذج اللغات الكبيرة (LLMs). يأتي Intlayer أيضًا مزودًا بمجموعة من الأدوات، مثل CLI لاختبار الترجمات المفقودة،LSP، MCP ومهارات الوكيل، لجعل تجربة المطور (DX) أكثر سلاسة للذكاء الاصطناعي وكلاء.

    الأتمتة

    استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا مترجمًا لأتمتة استخراج المحتوى، بالإضافة إلى منصة ويب للمساعدة في الترجمة في الخلفية.

    أداء

    يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.

    التحجيم مع عدم وجود مطور

    أكثر من مجرد حل i18n، يوفر Intlayer [محررًا مرئيًا] مستضافًا ذاتيًا](/ar/doc/concept/editor) وكامل CMS لمساعدتك في إدارة المحتوى متعدد اللغات في الوقت الفعلي، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.

    دليل خطوة بخطوة لإعداد Intlayer في تطبيق Vite و Preact

    راجع قالب التطبيق على GitHub.

    1. تثبيت التبعيات

      قم بتثبيت الحزم اللازمة باستخدام npm:

      bash
      npm install intlayer preact-intlayernpm install vite-intlayer --save-devnpx intlayer init

      • intlayer

        الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين والترجمة وإعلان المحتوى والترجمة البرمجية وأوامر CLI.

      • preact-intlayer

        الحزمة التي تدمج Intlayer مع تطبيق Preact. توفر مزودي السياق والخطافات لتدويل Preact.

      • vite-intlayer

        تتضمن إضافة Vite لدمج Intlayer مع أداة تجميع Vite، بالإضافة إلى وسيط لاكتشاف اللغة المفضلة للمستخدم وإدارة ملفات تعريف الارتباط والتعامل مع إعادة توجيه عناوين URL.

    2. تكوين مشروعك

      أنشئ ملف تكوين لتحديد لغات تطبيقك:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // لغاتك الأخرى
    ],
    defaultLocale: Locales.ENGLISH,
  },
  routing: {
    mode: "prefix-no-default", // افتراضي: بادئة لجميع اللغات ما عدا اللغة الافتراضية
    storage: ["cookie", "header"], // افتراضي: حفظ اللغة في ملف تعريف الارتباط والكشف من الرأس
  },
};

export default config;
      من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL الموطنة، وأوضاع التوجيه، وخيارات التخزين، وأسماء ملفات تعريف الارتباط، وموقع وامتداد إعلانات المحتوى الخاصة بك، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع وثائق التكوين.

    3. دمج Intlayer في تكوين Vite الخاص بك

      أضف المكون الإضافي intlayer إلى تكوينك.

      vite.config.ts
      import { defineConfig } from "vite";
import preact from "@preact/preset-vite";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [preact(), intlayer()],
});
      يُستخدم المكون الإضافي Vite intlayer() لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يحدد متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، فإنه يوفر أسماء مستعارة لتحسين الأداء.

    4. إعلان المحتوى الخاص بك

      أنشئ وأدر إعلانات المحتوى الخاصة بك لتخزين الترجمات:

      src/app.content.tsx
      import { t, type Dictionary } from "intlayer";
import type { ComponentChildren } from "preact";

const appContent = {
  key: "app",
  content: {
    viteLogo: t({
      en: "Vite logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),
    preactLogo: t({
      en: "Preact logo",
      fr: "Logo Preact",
      es: "Logo Preact",
    }),

    title: "Vite + Preact",

    count: t({
      en: "count is ",
      fr: "le compte est ",
      es: "el recuento es ",
    }),

    edit: t<ComponentChildren>({
      en: (
        <>
          Edit <code>src/app.tsx</code> and save to test HMR
        </>
      ),
      fr: (
        <>
          Éditez <code>src/app.tsx</code> et enregistrez pour tester HMR
        </>
      ),
      es: (
        <>
          Edita <code>src/app.tsx</code> y guarda para probar HMR
        </>
      ),
    }),

    readTheDocs: t({
      en: "Click on the Vite and Preact logos to learn more",
      fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
      es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
    }),
  },
} satisfies Dictionary;

export default appContent;
      يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان في تطبيقك طالما كانت مدرجة في دليل contentDir (افتراضيًا، ./src). وتتطابق مع امتداد ملف إعلان المحتوى (افتراضيًا، .content.{json,ts,tsx,js,jsx,mjs,cjs}).
      لمزيد من التفاصيل، راجع وثائق إعلان المحتوى.
      إذا كان ملف المحتوى الخاص بك يتضمن كود TSX، فقد تحتاج إلى استيراد import { h } from "preact"; أو التأكد من ضبط براغما JSX بشكل صحيح لـ Preact.

    5. استخدام Intlayer في كودك

      قم بالوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء تطبيقك:

      src/app.tsx
      import { useState } from "preact/hooks";
import type { FunctionalComponent } from "preact";
import preactLogo from "./assets/preact.svg"; // بفرض أن لديك preact.svg
import viteLogo from "/vite.svg";
import "./app.css"; // بفرض أن ملف CSS الخاص بك يسمى app.css
import { IntlayerProvider, useIntlayer } from "preact-intlayer";

const AppContent: FunctionalComponent = () => {
  const [count, setCount] = useState(0);
  const content = useIntlayer("app");

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />
        </a>
        <a href="https://preactjs.com" target="_blank">
          <img
            src={preactLogo}
            class="logo preact"
            alt={content.preactLogo.value}
          />
        </a>
      </div>
      <h1>{content.title}</h1>
      <div class="card">
        <button onClick={() => setCount((count) => count + 1)}>
          {content.count}
          {count}
        </button>
        <p>{content.edit}</p>
      </div>
      {/* محتوى Markdown */}
      <div>{content.myMarkdownContent}</div>

      {/* محتوى HTML */}
      <div>{content.myHtmlContent}</div>

      <p class="read-the-docs">{content.readTheDocs}</p>
    </>
  );
};

const App: FunctionalComponent = () => (
  <IntlayerProvider>
    <AppContent />
  </IntlayerProvider>
);

export default App;
      إذا كنت تريد استخدام المحتوى الخاص بك في خاصية string ، مثل alt ، title ، href ، aria-label ، وما إلى ذلك ، فيجب عليك استدعاء قيمة الدالة ، مثل:
      html
      <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />
      ملاحظة: في Preact، عادةً ما يتم كتابة className كـ class.
      لمعرفة المزيد حول الخطاف useIntlayer ، راجع الوثائق (واجهة برمجة التطبيقات مماثلة لـ preact-intlayer).
      إذا كان تطبيقك موجودًا بالفعل، يمكنك استخدام مترجم Intlayer، بالإضافة إلى أمر الاستخراج، لتحويل آلاف المكونات في ثانية واحدة.

    6. تغيير لغة المحتوى الخاص بك

      اختياري

      لتغيير لغة المحتوى الخاص بك ، يمكنك استخدام وظيفة setLocale التي يوفرها خطاف useLocale. تتيح لك هذه الوظيفة تعيين لغة التطبيق وتحديث المحتوى وفقًا لذلك.

      src/components/LocaleSwitcher.tsx
      import type { FunctionalComponent } from "preact";
import { Locales } from "intlayer";
import { useLocale } from "preact-intlayer";

const LocaleSwitcher: FunctionalComponent = () => {
  const { setLocale } = useLocale();

  return (
    <button onClick={() => setLocale(Locales.ENGLISH)}>
      Change Language to English
    </button>
  );
};

export default LocaleSwitcher;
      لمعرفة المزيد حول الخطاف useLocale ، راجع الوثائق (واجهة برمجة التطبيقات مماثلة لـ preact-intlayer).

    7. إضافة توجيه محلي إلى تطبيقك

      اختياري

      الغرض من هذه الخطوة هو إنشاء مسارات فريدة لكل لغة. هذا مفيد لتحسين محركات البحث (SEO) وعناوين URL الصديقة لمحركات البحث. مثال:

      plaintext
      - https://example.com/about- https://example.com/es/about- https://example.com/fr/about
      افتراضيًا، لا يتم إضافة بادئة للمسارات للغة الافتراضية. إذا كنت ترغب في إضافة بادئة للغة الافتراضية، يمكنك تعيين خيار routing.mode إلى "prefix-all" في التكوين الخاص بك. راجع وثائق التكوين لمزيد من المعلومات.

      لإضافة توجيه محلي إلى تطبيقك، يمكنك إنشاء مكون LocaleRouter يلف مسارات تطبيقك ويتعامل مع التوجيه المستند إلى اللغة. إليك مثال باستخدام preact-iso:

      src/components/LocaleRouter.tsx
      import { localeMap } from "intlayer";
import { IntlayerProvider } from "preact-intlayer";
import { LocationProvider, Router, Route } from "preact-iso";
import type { ComponentChildren, FunctionalComponent } from "preact";

/**
 * مكون راوتر يقوم بإعداد مسارات خاصة باللغة.
 * يستخدم preact-iso لإدارة التنقل وعرض المكونات المحلية.
 */
export const LocaleRouter: FunctionalComponent<{
  children: ComponentChildren;
}> = ({ children }) => (
  <LocationProvider>
    <Router>
      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
        .map(({ locale, urlPrefix }) => (
          <Route
            key={locale}
            path={`${urlPrefix}/:rest*`}
            component={() => (
              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
            )}
          />
        ))}
    </Router>
  </LocationProvider>
);

      بعد ذلك، يمكنك استخدام مكون LocaleRouter في تطبيقك:

      src/app.tsx
      import { LocaleRouter } from "./components/LocaleRouter";
import type { FunctionalComponent } from "preact";

// ... مكون AppContent الخاص بك

const App: FunctionalComponent = () => (
  <LocaleRouter>
    <AppContent />
  </LocaleRouter>
);

export default App;

    8. تغيير عنوان URL عند تغيير اللغة

      اختياري

      لتغيير عنوان URL عند تغيير اللغة، يمكنك استخدام خاصية onLocaleChange التي يوفرها خطاف useLocale. بالتوازي، يمكنك استخدام طريقة route من useLocation في preact-iso لتحديث مسار URL.

      src/components/LocaleSwitcher.tsx
      import { useLocation } from "preact-iso";
import {
  Locales,
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
} from "intlayer";
import { useLocale } from "preact-intlayer";
import type { FunctionalComponent } from "preact";

const LocaleSwitcher: FunctionalComponent = () => {
  const { url, route } = useLocation();
  const { locale, availableLocales, setLocale } = useLocale({
    onLocaleChange: (newLocale) => {
      // بناء عنوان URL باللغة المحدثة
      // مثال: /es/about?foo=bar
      const pathWithLocale = getLocalizedUrl(url, newLocale);

      // تحديث مسار URL
      route(pathWithLocale, true); // true للاستبدال (replace)
    },
  });

  return (
    <div>
      <button popovertarget="localePopover">{getLocaleName(locale)}</button>
      <div id="localePopover" popover="auto">
        {availableLocales.map((localeItem) => (
          <a
            href={getLocalizedUrl(url, localeItem)}
            hreflang={localeItem}
            aria-current={locale === localeItem ? "page" : undefined}
            onClick={(e) => {
              e.preventDefault();
              setLocale(localeItem);
              // سيتم التعامل مع التنقل البرمجي بعد تعيين اللغة بواسطة onLocaleChange
            }}
            key={localeItem}
          >
            <span>
              {/* اللغة - مثلاً FR */}
              {localeItem}
            </span>
            <span>
              {/* اللغة بلغتها الأصلية - مثلاً Français */}
              {getLocaleName(localeItem, localeItem)}
            </span>
            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
              {/* اللغة باللغة الحالية - مثلاً Francés مع تعيين اللغة الحالية إلى Locales.SPANISH */}
              {getLocaleName(localeItem, locale)}
            </span>
            <span dir="ltr" lang={Locales.ENGLISH}>
              {/* اللغة بالإنجليزية - مثلاً French */}
              {getLocaleName(localeItem, Locales.ENGLISH)}
            </span>
          </a>
        ))}
      </div>
    </div>
  );
};

export default LocaleSwitcher;

      مراجع التوثيق:

      - خطاف useLocale (واجهة برمجة التطبيقات مماثلة لـ preact-intlayer)> - خطاف getLocaleName> - خطاف getLocalizedUrl> - خطاف getHTMLTextDir> - خاصية hreflang> - خاصية lang> - خاصية dir> - خاصية aria-current> - واجهة برمجة تطبيقات Popover

    9. تبديل سمات اللغة والاتجاه لـ HTML

      اختياري

      عندما يدعم تطبيقك لغات متعددة، من الضروري تحديث سمتي lang و dir في وسم <html> لتتوافق مع اللغة الحالية. القيام بذلك يضمن:

      • إمكانية الوصول: تعتمد أجهزة قراءة الشاشة والتقنيات المساعدة على سمة lang الصحيحة لنطق وتفسير المحتوى بدقة.
      • عرض النص: تضمن سمة dir (الاتجاه) عرض النص بالترتيب الصحيح (على سبيل المثال، من اليسار إلى اليمين للغة الإنجليزية، ومن اليمين إلى اليسار للغة العربية أو العبرية)، وهو أمر أساسي لسهولة القراءة.
      • تحسين محركات البحث (SEO): تستخدم محركات البحث سمة lang لتحديد لغة صفحتك، مما يساعد في تقديم المحتوى المحلي المناسب في نتائج البحث.

      من خلال تحديث هذه السمات ديناميكيًا عند تغيير اللغة، تضمن تجربة متسقة وسهلة الوصول للمستخدمين عبر جميع اللغات المدعومة.

      تنفيذ الخطاف (Hook)

      أنشئ خطافًا مخصصًا لإدارة سمات HTML. يستمع الخطاف لتغييرات اللغة ويحدث السمات وفقًا لذلك:

      src/hooks/useI18nHTMLAttributes.tsx
      import { useEffect } from "preact/hooks";
import { useLocale } from "preact-intlayer";
import { getHTMLTextDir } from "intlayer";

/**
 * يقوم بتحديث سمتي `lang` و `dir` لعنصر HTML <html> بناءً على اللغة الحالية.
 * - `lang`: يخبر المتصفحات ومحركات البحث بلغة الصفحة.
 * - `dir`: يضمن ترتيب القراءة الصحيح (مثلاً، 'ltr' للإنجليزية، 'rtl' للعربية).
 *
 * هذا التحديث الديناميكي ضروري لعرض النص بشكل صحيح، وإمكانية الوصول، وتحسين محركات البحث (SEO).
 */
export const useI18nHTMLAttributes = () => {
  const { locale } = useLocale();

  useEffect(() => {
    // تحديث سمة اللغة إلى اللغة الحالية.
    document.documentElement.lang = locale;

    // تعيين اتجاه النص بناءً على اللغة الحالية.
    document.documentElement.dir = getHTMLTextDir(locale);
  }, [locale]);
};

      استخدام الخطاف في تطبيقك

      قم بدمج الخطاف في مكونك الرئيسي بحيث يتم تحديث سمات HTML كلما تغيرت اللغة:

      src/app.tsx
      import type { FunctionalComponent } from "preact";
import { IntlayerProvider } from "preact-intlayer"; // تم استيراد useIntlayer مسبقًا إذا كان AppContent يحتاجه
import { useI18nHTMLAttributes } from "./hooks/useI18nHTMLAttributes";
import "./app.css";
// تعريف AppContent من الخطوة 5

const AppWithHooks: FunctionalComponent = () => {
  // تطبيق الخطاف لتحديث سمتي lang و dir في وسم <html> بناءً على اللغة.
  useI18nHTMLAttributes();

  // بفرض أن AppContent هو مكون عرض المحتوى الرئيسي الخاص بك من الخطوة 5
  return <AppContent />;
};

const App: FunctionalComponent = () => (
  <IntlayerProvider>
    <AppWithHooks />
  </IntlayerProvider>
);

export default App;

    10. إنشاء مكون رابط محلي

      اختياري

      لضمان أن تنقل تطبيقك يحترم اللغة الحالية، يمكنك إنشاء مكون Link مخصص. يقوم هذا المكون تلقائيًا بإضافة بادئة اللغة الحالية إلى عناوين URL الداخلية.

      هذا السلوك مفيد لعدة أسباب:

      • تحسين محركات البحث وتجربة المستخدم: تساعد عناوين URL الموطنة محركات البحث على فهرسة الصفحات الخاصة بلغات معينة بشكل صحيح وتوفر للمستخدمين محتوى بلغتهم المفضلة.
      • الاتساق: باستخدام رابط محلي في جميع أنحاء تطبيقك، فإنك تضمن بقاء التنقل ضمن اللغة الحالية، مما يمنع تبديلات اللغة غير المتوقعة.
      • قابلية الصيانة: تبسيط إدارة عناوين URL من خلال مركزية منطق التوطين في مكون واحد.

      إليك تنفيذ مكون Link محلي في Preact:

      src/components/Link.tsx
      import { getLocalizedUrl } from "intlayer";
import { useLocale } from "preact-intlayer";
import { forwardRef } from "preact/compat";
import type { JSX } from "preact";

export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
  href: string;
}

/**
 * دالة مساعدة للتحقق مما إذا كان عنوان URL معين خارجيًا.
 * إذا بدأ عنوان URL بـ http:// أو https://، فإنه يعتبر خارجيًا.
 */
export const checkIsExternalLink = (href?: string): boolean =>
  /^https?:\/\//.test(href ?? "");

/**
 * مكون Link مخصص يقوم بتكييف سمة href بناءً على اللغة الحالية.
 * بالنسبة للروابط الداخلية، فإنه يستخدم `getLocalizedUrl` لإضافة بادئة اللغة إلى عنوان URL (مثل /fr/about).
 * يضمن هذا بقاء التنقل داخل نفس سياق اللغة.
 */
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
  ({ href, children, ...props }, ref) => {
    const { locale } = useLocale();
    const isExternalLink = checkIsExternalLink(href);

    // إذا كان الرابط داخليًا وتم توفير href صالح، فاحصل على عنوان URL المحلي.
    const hrefI18n =
      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;

    return (
      <a href={hrefI18n} ref={ref} {...props}>
        {children}
      </a>
    );
  }
);

Link.displayName = "Link";

      كيف يعمل

      • كشف الروابط الخارجية:
        تحدد الدالة المساعدة checkIsExternalLink ما إذا كان عنوان URL خارجيًا. تُترك الروابط الخارجية دون تغيير لأنها لا تحتاج إلى توطين.
      • استرداد اللغة الحالية:
        يوفر خطاف useLocale اللغة الحالية (مثلاً fr للفرنسية).
      • توطين عنوان URL:
        بالنسبة للروابط الداخلية (أي غير الخارجية)، يتم استخدام getLocalizedUrl لإضافة بادئة اللغة الحالية تلقائيًا إلى عنوان URL. هذا يعني أنه إذا كان مستخدمك باللغة الفرنسية، فإن تمرير /about كـ href سيحوله إلى /fr/about.
      • إرجاع الرابط:
        يعيد المكون عنصر <a> مع عنوان URL المحلي، مما يضمن أن التنقل متسق مع اللغة.

    11. عرض Markdown و HTML

      اختياري

      يدعم Intlayer عرض محتوى Markdown و HTML في Preact.

      يمكنك تخصيص عرض محتوى Markdown و HTML باستخدام طريقة .use(). تسمح لك هذه الطريقة بتجاوز العرض الافتراضي لعلامات محددة.

      tsx
      import { useIntlayer } from "preact-intlayer";const { myMarkdownContent, myHtmlContent } = useIntlayer("my-component");// ...return (  <div>    {/* العرض الأساسي */}    {myMarkdownContent}    {/* العرض المخصص لـ Markdown */}    {myMarkdownContent.use({      h1: (props) => <h1 style={{ color: "red" }} {...props} />,    })}    {/* العرض الأساسي لـ HTML */}    {myHtmlContent}    {/* العرض المخصص لـ HTML */}    {myHtmlContent.use({      b: (props) => <strong style={{ color: "blue" }} {...props} />,    })}  </div>);

    12. استخراج محتوى مكوناتك

      اختياري

      إذا كان لديك قاعدة بيانات كود موجودة، فقد يكون تحويل آلاف الملفات مستهلكًا للوقت.

      لتسهيل هذه العملية، يقترح Intlayer مترجمًا / مستخرجًا لتحويل مكوناتك واستخراج المحتوى.

      لإعداده، يمكنك إضافة قسم compiler في ملف intlayer.config.ts الخاص بك:

      intlayer.config.ts
      import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... بقية التكوين الخاص بك
  compiler: {
    /**
     * يشير إلى ما إذا كان يجب تمكين المترجم.
     */
    enabled: true,

    /**
     * يحدد مسار ملفات المخرجات
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * يشير إلى ما إذا كان يجب حفظ المكونات بعد تحويلها. بهذه الطريقة، يمكن تشغيل المترجم مرة واحدة فقط لتحويل التطبيق، ثم يمكن إزالته.
     */
    saveComponents: false,

    /**
     * بادئة مفتاح القاموس
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      قم بتشغيل المستخرج لتحويل مكوناتك واستخراج المحتوى

      bash
      npx intlayer extract

    تكوين TypeScript

    يستخدم Intlayer توسيع الوحدات (module augmentation) للحصول على فوائد TypeScript وجعل قاعدة الكود الخاصة بك أقوى.

    Autocompletion

    Translation error

    تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع التي تم إنشاؤها تلقائيًا.

    tsconfig.json
    {  // ... تكوينات TypeScript الحالية الخاصة بك  "compilerOptions": {    // ...    "jsx": "react-jsx",    "jsxImportSource": "preact", // موصى به لـ Preact 10+    // ...  },  "include": [    // ... تكوينات TypeScript الحالية الخاصة بك    ".intlayer/**/*.ts", // تضمين الأنواع التي تم إنشاؤها تلقائيًا  ],}
    تأكد من إعداد tsconfig.json الخاص بك لـ Preact، خاصةً jsx و jsxImportSource أو jsxFactory/jsxFragmentFactory لإصدارات Preact الأقدم إذا لم تستخدم إعدادات preset-vite الافتراضية.

    تكوين Git

    يوصى بتجاهل الملفات التي تم إنشاؤها بواسطة Intlayer. يتيح لك ذلك تجنب الالتزام بها في مستودع Git الخاص بك.

    للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف .gitignore الخاص بك:

    bash
    #  تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer.intlayer

    (اختياري) خريطة الموقع و robots.txt (توليد وقت البناء)

    يوفّر Intlayer الدالتين generateSitemap وgetMultilingualUrls لتنسيق مخرجات جاهزة للزحّافات (sitemap.xml متعدد اللغات وrobots.txt) وكتابتها تلقائياً إلى public/. عادةً تشغّل سكربت Node صغير قبل Vite (مثلاً خطافات npm predev / prebuild).

    خريطة الموقع

    يولّد مولّد خرائط المواقع إعدادات اللغات ويضيف البيانات الوصفية المناسبة.

    تدعم الخريطة مساحة الاسم xhtml:link (hreflang). بدلاً من قائمة عناوين مسطحة، يربط Intlayer بين جميع النسخ اللغوية لكل صفحة في الاتجاهين (مثل /about و/fr/about أو /about?lang=fr وفقًا لوضع التوجيه).

    Robots.txt

    استخدم getMultilingualUrls لتشمل قواعد Disallow كل المتغيرات المحلية للمسارات الحساسة.

    1. أضف generate-seo.mjs في جذر المشروع

    generate-seo.mjs
    import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

    يجب تثبيت حزمة intlayer. عيّن SITE_URL في بيئة الإنتاج (مثلاً في CI).

    يُفضّل generate-seo.mjs لـ ESM في Node. إن استخدمت generate-seo.js ففعّل "type": "module" في package.json أو ESM بطريقة أخرى.

    2. شغّل السكربت قبل Vite

    package.json
    {  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

    عدّل الأوامر إن كنت تستخدم pnpm أو yarn. يمكن استدعاء السكربت من CI أيضاً.

    إضافة VS Code

    لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت إضافة Intlayer الرسمية لـ VS Code.

    التثبيت من متجر VS Code

    توفر هذه الإضافة:

    • الإكمال التلقائي لمفاتيح الترجمة.
    • كشف الأخطاء في الوقت الفعلي للترجمات المفقودة.
    • معاينات داخلية للمحتوى المترجم.
    • إجراءات سريعة لإنشاء وتحديث الترجمات بسهولة.

    لمزيد من التفاصيل حول كيفية استخدام الإضافة، راجع توثيق إضافة Intlayer لـ VS Code.

    اذهب أبعد من ذلك

    للذهاب أبعد من ذلك، يمكنك تنفيذ المحرر المرئي أو توفير المحتوى الخاص بك خارجيًا باستخدام نظام إدارة المحتوى (CMS).

    SvelteKit
    Vite و Vanilla JS