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

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

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

بالمقارنة مع الحلول الرئيسية مثل ngx-translate أو angular-l10n، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:

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

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

1. 1

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

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

   bash

   نسخ المحتوى

   نسخ الكود

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

   npx intlayer init --interactive
   

   علامة --interactive اختيارية. استخدم intlayer-cli init إذا كنت وكيل ذكاء اصطناعي.

   سيقوم هذا الأمر باكتشاف بيئتك وتثبيت الحزم المطلوبة. على سبيل المثال:

   bash

   نسخ المحتوى

   نسخ الكود

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

   npm install intlayer angular-intlayer
   npm install @angular-builders/custom-webpack --save-dev
   

   • intlayer

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

   • angular-intlayer الحزمة التي تدمج Intlayer مع تطبيق Angular. توفر مزودي السياق والخطافات لتدويل Angular.

   • @angular-builders/custom-webpack مطلوب لتخصيص تكوين Webpack لـ Angular CLI.

2. 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. 3

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

   لدمج Intlayer مع Angular CLI، تحتاج إلى استخدام منشئ مخصص. يفترض هذا الدليل أنك تستخدم Webpack (الافتراضي للعديد من مشاريع Angular).

   أولاً، قم بتعديل ملف angular.json لاستخدام منشئ Webpack المخصص. قم بتحديث تكوينات build و serve:

   angular.json

   نسخ المحتوى

   نسخ الكود

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

   {
     "projects": {
       "your-app-name": {
         "architect": {
           "build": {
             "builder": "@angular-builders/custom-webpack:browser", // replace "@angular-devkit/build-angular:application",
             "options": {
               "customWebpackConfig": {
                 "path": "./webpack.config.ts",
                 "mergeStrategies": { "module.rules": "prepend" },
               },
               "main": "src/main.ts", // replace "browser": "src/main.ts",
               // ...
             },
           },
           "serve": {
             "builder": "@angular-builders/custom-webpack:dev-server",
           },
         },
       },
     },
   }
   

   تأكد من استبدال your-app-name بالاسم الفعلي لمشروعك في angular.json.

   بعد ذلك، أنشئ ملف webpack.config.ts في جذر مشروعك:

   webpack.config.ts

   نسخ المحتوى

   نسخ الكود

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

   import { mergeConfig } from "angular-intlayer/webpack";
   
   export default mergeConfig({});
   

   تقوم دالة mergeConfig بتكوين Webpack مع Intlayer. حيث تقوم بحقن IntlayerPlugin (للتعامل مع ملفات إعلان المحتوى) وتعيين الأسماء المستعارة لتحقيق الأداء الأمثل.

4. 4

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

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

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

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

5. 5

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

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

   src/app/app.config.ts

   نسخ المحتوى

   نسخ الكود

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

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

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

   src/app/app.component.ts

   نسخ المحتوى

   نسخ الكود

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

   import { Component } from "@angular/core";
   import { RouterOutlet } from "@angular/router";
   import { useIntlayer } from "angular-intlayer";
   
   @Component({
     selector: "app-root",
     standalone: true,
     imports: [RouterOutlet],
     templateUrl: "./app.component.html",
     styleUrl: "./app.component.css",
   })
   export class AppComponent {
     content = useIntlayer("app");
   }
   

   وفي القالب الخاص بك:

   src/app/app.component.html

   نسخ المحتوى

   نسخ الكود

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

   <div class="content">
     <h1>{{ content().title }}</h1>
     <p>{{ content().congratulations }}</p>
   </div>
   

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

6. 6

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

   اختياري

   لتغيير لغة المحتوى الخاص بك، يمكنك استخدام دالة 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;
   }
   

   بعد ذلك، استخدم هذا المكون في app.component.ts:

   src/app/app.component.ts

   نسخ المحتوى

   نسخ الكود

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

   import { Component } from "@angular/core";
   import { RouterOutlet } from "@angular/router";
   import { useIntlayer } from "angular-intlayer";
   import { LocaleSwitcherComponent } from "./locale-switcher.component";
   
   @Component({
     selector: "app-root",
     standalone: true,
     imports: [RouterOutlet, LocaleSwitcherComponent],
     templateUrl: "./app.component.html",
     styleUrl: "./app.component.css",
   })
   export class AppComponent {
     content = useIntlayer("app");
   }
   

تكوين TypeScript

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

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

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

تكوين Git

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

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

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

إضافة VS Code

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

التثبيت من VS Code Marketplace

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

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

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

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

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

الأسئلة الشائعة