تم تحسين Intlayer للعمل بشكل مثالي مع Vite من خلال تقديم إدارة المحتوى المحايدة لإطار العمل، ودعم TypeScript، وجميع الميزات اللازمة لتوسيع نطاق التدويل (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 و Vanilla JS

1
تثبيت الاعتماديات

قم بتثبيت الحزم اللازمة باستخدام npm:
bash
نسخ الكود
نسخ الكود إلى الحافظة
npm install intlayer vanilla-intlayernpm install vite-intlayer --save-devnpx intlayer init
npm install intlayer vanilla-intlayernpm install vite-intlayer --save-devnpx intlayer init
- intlayer الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، الترجمة، إعلان المحتوى، التحويل البرمجي، وأوامر CLI.
- vanilla-intlayer الحزمة التي تدمج Intlayer مع تطبيقات JavaScript / TypeScript الصرفة. توفر نموذجًا مفردًا للنشر/الاشتراك (IntlayerClient) ومساعدين قائمين على رد الاتصال (useIntlayer و useLocale وما إلى ذلك) بحيث يمكن لأي جزء من تطبيقك التفاعل مع تغييرات اللغة دون الاعتماد على إطار عمل واجهة المستخدم.
- vite-intlayer تتضمن ملحق Vite لدمج Intlayer مع Vite bundler، بالإضافة إلى برمجية وسيطة لاكتشاف اللغة المفضلة للمستخدم، وإدارة ملفات تعريف الارتباط، ومعالجة إعادة توجيه عناوين 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,
  },
};

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

أضف ملحق intlayer إلى التكوين الخاص بك.
vite.config.ts
نسخ الكود
نسخ الكود إلى الحافظة
```
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

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

تهيئة Intlayer في نقطة الدخول الخاصة بك

استدعِ installIntlayer() قبل عرض أي محتوى بحيث يكون نموذج اللغة العالمي المفرد جاهزًا.

src/main.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { installIntlayer } from "vanilla-intlayer";// يجب استدعاؤه قبل عرض أي محتوى i18n.installIntlayer();// استيراد وتشغيل وحدات التطبيق الخاصة بك.import "./app.js";

import { installIntlayer } from "vanilla-intlayer";// يجب استدعاؤه قبل عرض أي محتوى i18n.installIntlayer();// استيراد وتشغيل وحدات التطبيق الخاصة بك.import "./app.js";

إذا كنت تستخدم أيضًا إعلانات محتوى md() (Markdown)، فقم بتثبيت عرض Markdown أيضًا:

src/main.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";installIntlayer();installIntlayerMarkdown();import "./app.js";

import { installIntlayer, installIntlayerMarkdown } from "vanilla-intlayer";installIntlayer();installIntlayerMarkdown();import "./app.js";

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

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

src/app.content.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { insert, t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Vanilla",

    viteLogoLabel: t({
      en: "Vite Logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),

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

    readTheDocs: t({
      en: "Click on the Vite logo to learn more",
      fr: "Cliquez sur le logo Vite pour en savoir plus",
      es: "انقر على شعار Vite لمعرفة المزيد",
    }),
  },
} satisfies Dictionary;

export default appContent;

يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان في تطبيقك بمجرد تضمينها في دليل contentDir (افتراضيًا، ./src). وتتطابق مع امتداد ملف إعلان المحتوى (افتراضيًا، .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

لمزيد من التفاصيل، راجع توثيق إعلان المحتوى.

استخدام Intlayer في JavaScript الخاص بك

تعكس vanilla-intlayer واجهة برمجة تطبيقات react-intlayer: useIntlayer(key, locale?) تعيد المحتوى المترجم مباشرة. قم بربط .onChange() مع النتيجة للاشتراك في تغييرات اللغة - المعادل الصريح لإعادة العرض في React.

src/main.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { installIntlayer, useIntlayer } from "vanilla-intlayer";installIntlayer();// الحصول على المحتوى الأولي للغة الحالية.// ربط .onChange() ليتم إعلامك متى تغيرت اللغة.const content = useIntlayer("app").onChange((newContent) => {  // إعادة العرض أو تصحيح عقد DOM المتأثرة فقط  document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(    newContent.title  );  document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =    String(newContent.readTheDocs);});// العرض الأوليdocument.querySelector<HTMLHeadingElement>("h1")!.textContent = String(  content.title);document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =  String(content.readTheDocs);

import { installIntlayer, useIntlayer } from "vanilla-intlayer";installIntlayer();// الحصول على المحتوى الأولي للغة الحالية.// ربط .onChange() ليتم إعلامك متى تغيرت اللغة.const content = useIntlayer("app").onChange((newContent) => {  // إعادة العرض أو تصحيح عقد DOM المتأثرة فقط  document.querySelector<HTMLHeadingElement>("h1")!.textContent = String(    newContent.title  );  document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =    String(newContent.readTheDocs);});// العرض الأوليdocument.querySelector<HTMLHeadingElement>("h1")!.textContent = String(  content.title);document.querySelector<HTMLParagraphElement>(".read-the-docs")!.textContent =  String(content.readTheDocs);

الوصول إلى القيم الطرفية كسلاسل من خلال تغليفها في String()، والتي تستدعي طريقة toString() للعقدة وتعيد النص المترجم.

عندما تحتاج إلى قيمة لسمة HTML أصلية (مثل alt و aria-label)، استخدم .value مباشرة:
typescript
نسخ الكود
نسخ الكود إلى الحافظة
img.alt = content.viteLogoLabel.value;
img.alt = content.viteLogoLabel.value;

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

اختياري

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

src/locale-switcher.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { getLocaleName } from "intlayer";import { useLocale } from "vanilla-intlayer";export function setupLocaleSwitcher(container: HTMLElement): () => void {  const { locale, availableLocales, setLocale, subscribe } = useLocale();  const select = document.createElement("select");  select.setAttribute("aria-label", "Language");  const render = (currentLocale: string) => {    select.innerHTML = availableLocales      .map(        (loc) =>          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>            ${getLocaleName(loc)}          </option>`      )      .join("");  };  render(locale);  container.appendChild(select);  select.addEventListener("change", () => setLocale(select.value as any));  // الحفاظ على مزامنة القائمة المنسدلة عند تغيير اللغة من مكان آخر  return subscribe((newLocale) => render(newLocale));}

import { getLocaleName } from "intlayer";import { useLocale } from "vanilla-intlayer";export function setupLocaleSwitcher(container: HTMLElement): () => void {  const { locale, availableLocales, setLocale, subscribe } = useLocale();  const select = document.createElement("select");  select.setAttribute("aria-label", "Language");  const render = (currentLocale: string) => {    select.innerHTML = availableLocales      .map(        (loc) =>          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>            ${getLocaleName(loc)}          </option>`      )      .join("");  };  render(locale);  container.appendChild(select);  select.addEventListener("change", () => setLocale(select.value as any));  // الحفاظ على مزامنة القائمة المنسدلة عند تغيير اللغة من مكان آخر  return subscribe((newLocale) => render(newLocale));}

عرض محتوى Markdown و HTML

اختياري

يدعم Intlayer إعلانات المحتوى md() و html(). في vanilla JS، يتم إدراج المخرج المترجم كـ HTML خام عبر innerHTML.

ترجمة وحقن HTML:

src/main.ts

نسخ الكود

نسخ الكود إلى الحافظة

import {  compileMarkdown,  installIntlayerMarkdown,  useIntlayer,} from "vanilla-intlayer";installIntlayerMarkdown();const content = useIntlayer("app").onChange((newContent) => {  const el = document.querySelector<HTMLDivElement>(".edit-note")!;  el.innerHTML = compileMarkdown(String(newContent.editNote));});document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =  compileMarkdown(String(content.editNote));

import {  compileMarkdown,  installIntlayerMarkdown,  useIntlayer,} from "vanilla-intlayer";installIntlayerMarkdown();const content = useIntlayer("app").onChange((newContent) => {  const el = document.querySelector<HTMLDivElement>(".edit-note")!;  el.innerHTML = compileMarkdown(String(newContent.editNote));});document.querySelector<HTMLDivElement>(".edit-note")!.innerHTML =  compileMarkdown(String(content.editNote));

TIP
String(content.editNote) تستدعي toString() على IntlayerNode التي تعيد سلسلة Markdown الخام. مررها إلى compileMarkdown للحصول على سلسلة HTML، ثم قم بضبطها عبر innerHTML.

WARNING
استخدم innerHTML فقط مع المحتوى الموثوق به. إذا كان markdown يأتي من إدخال المستخدم، فقم بتطهيره أولاً (مثل استخدام DOMPurify). يمكنك تثبيت عارض تطهير ديناميكيًا:
typescript
نسخ الكود
نسخ الكود إلى الحافظة
import { installIntlayerMarkdownDynamic } from "vanilla-intlayer";await installIntlayerMarkdownDynamic(async () => {  const DOMPurify = await import("dompurify");  return (markdown) => DOMPurify.sanitize(compileMarkdown(markdown));});
import { installIntlayerMarkdownDynamic } from "vanilla-intlayer";await installIntlayerMarkdownDynamic(async () => {  const DOMPurify = await import("dompurify");  return (markdown) => DOMPurify.sanitize(compileMarkdown(markdown));});

9
إضافة التوجيه الموطن إلى تطبيقك
اختياري

لإنشاء مسارات فريدة لكل لغة (مفيد لتحسين محركات البحث)، يمكنك استخدام intlayerProxy في تكوين Vite الخاص بك لاكتشاف اللغة من جانب الخادم.

أولاً، أضف intlayerProxy إلى تكوين Vite الخاص بك:

لاحظ أنه لاستخدام intlayerProxy في الإنتاج، تحتاج إلى نقل vite-intlayer من devDependencies إلى dependencies.
vite.config.ts
نسخ الكود
نسخ الكود إلى الحافظة
```
import { defineConfig } from "vite";
import { intlayer, intlayerProxy } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayerProxy(), // يجب وضعه أولاً
    intlayer(),
  ],
});
```

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

اختياري

لتحديث عنوان URL للمتصفح عند تغيير اللغة، استدعِ useRewriteURL() بعد تثبيت Intlayer:

src/main.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { installIntlayer, useRewriteURL } from "vanilla-intlayer";installIntlayer();// يعيد كتابة عنوان URL فورًا وعند كل تغيير لاحق للغة.// يعيد وظيفة إلغاء الاشتراك للتنظيف.const stopRewriteURL = useRewriteURL();

import { installIntlayer, useRewriteURL } from "vanilla-intlayer";installIntlayer();// يعيد كتابة عنوان URL فورًا وعند كل تغيير لاحق للغة.// يعيد وظيفة إلغاء الاشتراك للتنظيف.const stopRewriteURL = useRewriteURL();

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

اختياري

قم بتحديث سمات lang و dir لعلامة <html> لتتوافق مع اللغة الحالية لسهولة الاستخدام وتحسين محركات البحث.

src/main.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { getHTMLTextDir } from "intlayer";import { installIntlayer, useLocale } from "vanilla-intlayer";installIntlayer();useLocale({  onLocaleChange: (locale) => {    document.documentElement.lang = locale;    document.documentElement.dir = getHTMLTextDir(locale);  },});

import { getHTMLTextDir } from "intlayer";import { installIntlayer, useLocale } from "vanilla-intlayer";installIntlayer();useLocale({  onLocaleChange: (locale) => {    document.documentElement.lang = locale;    document.documentElement.dir = getHTMLTextDir(locale);  },});

تحميل القواميس ببطء حسب اللغة

اختياري

للتطبيقات الكبيرة، قد ترغب في تقسيم قاموس كل لغة إلى قطعة خاصة به. استخدم useDictionaryDynamic جنبًا إلى جنب مع import() الديناميكي من Vite:

src/app.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { installIntlayer, useDictionaryDynamic } from "vanilla-intlayer";installIntlayer();const unsubscribe = useDictionaryDynamic(  {    en: () => import("../.intlayer/dictionaries/en/app.mjs"),    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),    es: () => import("../.intlayer/dictionaries/es/app.mjs"),  },  "app").onChange((content) => {  document.querySelector("h1")!.textContent = String(content.title);});

import { installIntlayer, useDictionaryDynamic } from "vanilla-intlayer";installIntlayer();const unsubscribe = useDictionaryDynamic(  {    en: () => import("../.intlayer/dictionaries/en/app.mjs"),    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),    es: () => import("../.intlayer/dictionaries/es/app.mjs"),  },  "app").onChange((content) => {  document.querySelector("h1")!.textContent = String(content.title);});

يتم جلب حزمة كل لغة فقط عندما تصبح تلك اللغة نشطة ويتم تخزين النتيجة مؤقتًا - التبديلات اللاحقة لنفس اللغة تكون فورية.

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

اختياري

إذا كان لديك كود موجود مسبقًا، فقد يستغرق تحويل آلاف الملفات وقتًا طويلاً.

لتسهيل هذه العملية، يقترح 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;

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

npx intlayer extract

قم بتحديث vite.config.ts الخاص بك لتضمين ملحق intlayerCompiler:

vite.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // يضيف ملحق المترجم ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // يضيف ملحق المترجم ],});

bash

نسخ الكود

نسخ الكود إلى الحافظة

npm run build # أو npm run dev

npm run build # أو npm run dev

(اختياري) خريطة الموقع و 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.");

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"  }}

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

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

تكوين TypeScript

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

tsconfig.json

نسخ الكود

نسخ الكود إلى الحافظة

{  "compilerOptions": {    // ...  },  "include": ["src", ".intlayer/**/*.ts"],}

{  "compilerOptions": {    // ...  },  "include": ["src", ".intlayer/**/*.ts"],}

تكوين Git

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

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

bash

نسخ الكود

نسخ الكود إلى الحافظة

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

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

ملحق VS Code

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

تثبيت من VS Code Marketplace

يوفر هذا الملحق:

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

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

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

للذهاب أبعد من ذلك، يمكنك تنفيذ المحرر المرئي أو استخراج محتواك باستخدام CMS.

Vite و Preact

Vite و Lit

تاريخ الإصدارات

ترجم موقع الويب الخاص بك باستخدام Vite و Vanilla JS باستخدام Intlayer | التدويل (i18n)

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

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

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

تثبيت الاعتماديات

تكوين مشروعك

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

تهيئة Intlayer في نقطة الدخول الخاصة بك

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

استخدام Intlayer في JavaScript الخاص بك

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

عرض محتوى Markdown و HTML

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

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

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

تحميل القواميس ببطء حسب اللغة

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

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

خريطة الموقع

Robots.txt

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

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

تكوين TypeScript

تكوين Git

ملحق VS Code

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

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