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

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

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

الأتمتة

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

أداء

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

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

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

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

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

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

قم بتثبيت الحزم اللازمة باستخدام npm:
bash
نسخ الكود
نسخ الكود إلى الحافظة
npm install intlayer angular-intlayer vite-intlayernpx intlayer init
npm install intlayer angular-intlayer vite-intlayernpx intlayer init
- intlayer
  
  الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، الترجمة، إعلان المحتوى، التحويل، و أوامر CLI.
- angular-intlayer الحزمة التي تدمج Intlayer مع تطبيق Angular. توفر موفري السياق وخطافات لتدويل Angular.
- vite-intlayer الحزمة التي تدمج Intlayer مع Vite. توفر مكونًا إضافيًا للتعامل مع ملفات إعلان المحتوى وتعد المسارات البديلة (aliases) لتحقيق الأداء الأمثل.
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 في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع توثيق التكوين.

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

لدمج Intlayer مع Analog، تحتاج إلى استخدام مكون vite-intlayer الإضافي.

قم بتعديل ملف vite.config.ts الخاص بك:

vite.config.ts

نسخ الكود

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

import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";import analog from "@analogjs/platform";// https://vitejs.dev/config/export default defineConfig(() => ({  plugins: [    analog(),    intlayer(), // أضف مكون Intlayer الإضافي  ],}));

import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";import analog from "@analogjs/platform";// https://vitejs.dev/config/export default defineConfig(() => ({  plugins: [    analog(),    intlayer(), // أضف مكون Intlayer الإضافي  ],}));

يقوم مكون intlayer() الإضافي بتكوين Vite مع Intlayer. يتعامل مع ملفات إعلان المحتوى ويقوم بإعداد المسارات البديلة (aliases) لتحقيق الأداء الأمثل.

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

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

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

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

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

لاستخدام ميزات التدويل الخاصة بـ Intlayer في تطبيق Analog الخاص بك، تحتاج إلى توفير Intlayer في تكوين تطبيقك.

src/app/app.config.ts

نسخ الكود

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

import { ApplicationConfig } from "@angular/core";import { provideIntlayer } from "angular-intlayer";export const appConfig: ApplicationConfig = {  providers: [    provideIntlayer(), // أضف موفر Intlayer هنا  ],};

import { ApplicationConfig } from "@angular/core";import { provideIntlayer } from "angular-intlayer";export const appConfig: ApplicationConfig = {  providers: [    provideIntlayer(), // أضف موفر Intlayer هنا  ],};

بعد ذلك، يمكنك استخدام وظيفة useIntlayer داخل أي مكون.

src/app/pages/index.page.ts

نسخ الكود

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

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-home",  standalone: true,  template: `    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-home",  standalone: true,  template: `    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

يتم إرجاع محتوى Intlayer كـ Signal ، لذا يمكنك الوصول إلى القيم عن طريق استدعاء الإشارة: content().title.

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

اختياري

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

قم بإنشاء مكون للتبديل بين اللغات:

src/app/locale-switcher.component.ts

نسخ الكود

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

import { Component } from "@angular/core";import { CommonModule } from "@angular/common";import { useLocale } from "angular-intlayer";@Component({  selector: "app-locale-switcher",  standalone: true,  imports: [CommonModule],  template: `    <div class="locale-switcher">      <select        [value]="locale()"        (change)="setLocale($any($event.target).value)"      >        @for (loc of availableLocales; track loc) {          <option [value]="loc">{{ loc }}</option>        }      </select>    </div>  `,})export class LocaleSwitcherComponent {  localeCtx = useLocale();  locale = this.localeCtx.locale;  availableLocales = this.localeCtx.availableLocales;  setLocale = this.localeCtx.setLocale;}

import { Component } from "@angular/core";import { CommonModule } from "@angular/common";import { useLocale } from "angular-intlayer";@Component({  selector: "app-locale-switcher",  standalone: true,  imports: [CommonModule],  template: `    <div class="locale-switcher">      <select        [value]="locale()"        (change)="setLocale($any($event.target).value)"      >        @for (loc of availableLocales; track loc) {          <option [value]="loc">{{ loc }}</option>        }      </select>    </div>  `,})export class LocaleSwitcherComponent {  localeCtx = useLocale();  locale = this.localeCtx.locale;  availableLocales = this.localeCtx.availableLocales;  setLocale = this.localeCtx.setLocale;}

ثم استخدم هذا المكون في صفحاتك:

src/app/pages/index.page.ts

نسخ الكود

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

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";import { LocaleSwitcherComponent } from "../locale-switcher.component";@Component({  selector: "app-home",  standalone: true,  imports: [LocaleSwitcherComponent],  template: `    <app-locale-switcher></app-locale-switcher>    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";import { LocaleSwitcherComponent } from "../locale-switcher.component";@Component({  selector: "app-home",  standalone: true,  imports: [LocaleSwitcherComponent],  template: `    <app-locale-switcher></app-locale-switcher>    <div class="content">      <h1>{{ content().title }}</h1>      <p>{{ content().congratulations }}</p>    </div>  `,})export default class HomeComponent {  content = useIntlayer("app");}

تكوين TypeScript

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

Autocompletion

Translation error

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

tsconfig.json

نسخ الكود

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

{  // ... تكوينات TypeScript الحالية الخاصة بك  "include": [    // ... تكوينات TypeScript الحالية الخاصة بك    ".intlayer/**/*.ts", // تضمين الأنواع التي يتم إنشاؤها تلقائيًا  ],}

{  // ... تكوينات TypeScript الحالية الخاصة بك  "include": [    // ... تكوينات TypeScript الحالية الخاصة بك    ".intlayer/**/*.ts", // تضمين الأنواع التي يتم إنشاؤها تلقائيًا  ],}

تكوين Git

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

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

bash

نسخ الكود

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

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

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

إضافة VS Code

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

تثبيت من VS Code Marketplace

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

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

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

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

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

Angular 19 (Webpack)

React CRA

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

ترجمة تطبيق Analog (Angular) الخاص بك باستخدام Intlayer | التدويل (i18n)

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

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

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

تثبيت التبعيات

تكوين مشروعك

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

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

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

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

تكوين TypeScript

تكوين Git

إضافة VS Code

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