الرئيسيةبيئة اختبارمعرض الأعمالتطبيقوثيقةمدونة
    • Englishالإنجليزية
      EN
    • русскийالروسية
      RU
    • 日本語اليابانية
      JA
    • françaisالفرنسية
      FR
    • 한국어الكورية
      KO
    • 中文الصينية
      ZH
    • españolالإسبانية
      ES
    • Deutschالألمانية
      DE
    • العربيةالعربية
      AR
    • italianoالإيطالية
      IT
    • British Englishالإنجليزية (المملكة المتحدة)
      EN-GB
    • portuguêsالبرتغالية
      PT
    • हिन्दीالهندية
      HI
    • Türkçeالتركية
      TR
    • polskiالبولندية
      PL
    • Indonesiaالإندونيسية
      ID
    • Tiếng Việtالفيتنامية
      VI
    • українськаالأوكرانية
      UK
    /
    تصفية المستندات حسب الإطار
    Alt+←
    لماذا Intlayer؟
    ابدأ
    مفهوم
    • كيف يعمل Intlayer
    • التكوين
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • المحرر المرئي
    • CMS
    • تكامل CI/CD
    • ترجمةجمعتعدادشرطجنسإدراجملفتداخلMarkdownHTMLجلب الوظيفة
    • ملف لكل لغة
    • محرر
    • الملء التلقائي
    • اختبار
    • تحسين الحزمة
    بيئة
    • Next.js 14 وموجه التطبيق
      Next.js 15
      Next.js بدون locale URL
      Next.js وموجه الصفحة
      المترجم
    • Tanstack Start Solid
    • Astro و React
      Astro و Svelte
      Astro و Vue
      Astro و Solid
      Astro و Preact
      Astro و Lit
      Astro و Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt و Vue
    • Vite و Solid
    • SvelteKit
    • Vite و Preact
    • Vite و Vanilla JS
    • Vite و Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native و Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx و React
    Plugins
    • JSON
    • gettext (.po)
    امتداد VS Code
    وكيل
    • خادم MCP
    • مهارات الوكيل
    إصدارات
    • v8
    • v7
    • v6
    مؤشر أداء
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    مدونة
    طرح سؤال
    1. Documentation
    2. مفهوم
    3. الملء التلقائي
    إنشاء:2025-03-13آخر تحديث:2025-09-20
    استخدم هذه الصفحة والموفر AI الذي تريده
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده

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

    1. "إضافة التهيئة العامة"
      v6.0.020‏/9‏/2025
    2. "إضافة متغير `{{fileName}}`"
      v6.0.017‏/9‏/2025
    3. "بداية السجل"
      v5.5.1029‏/6‏/2025

    تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.

    اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية
    تعديل هذه الوثيقة

    إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

    رابط GitHub للتوثيق
    نسخ

    نسخ الـ Markdown من المستند إلى الحافظة

    ترجمات ملف إعلان محتوى التعبئة التلقائية

    ملفات إعلان محتوى التعبئة التلقائية هي وسيلة لتسريع سير عمل التطوير الخاص بك.

    تعمل آلية التعبئة التلقائية من خلال علاقة رئيسي-تابع بين ملفات إعلان المحتوى. عندما يتم تحديث الملف الرئيسي (الرئيسي)، يقوم Intlayer تلقائيًا بتطبيق تلك التغييرات على ملفات الإعلان المشتقة (المعبأة تلقائيًا).

    src/components/example/example.content.ts
    نسخ الكود

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

    import { Locales, type Dictionary } from "intlayer";const exampleContent = {  key: "example",  locale: Locales.ENGLISH,  autoFill: "./example.content.json",  content: {    contentExample: "هذا مثال على المحتوى",  },} satisfies Dictionary;export default exampleContent;

    إليك ملف إعلان محتوى لكل لغة يستخدم تعليمة autoFill.

    ثم، عند تشغيل الأمر التالي:

    bash
    نسخ الكود

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

    npx intlayer fill --file 'src/components/example/example.content.ts'

    سيقوم Intlayer تلقائيًا بإنشاء ملف الإعلان المشتق في src/components/example/example.content.json، مع ملء جميع اللغات التي لم تُعلن بعد في الملف الرئيسي.

    src/components/example/example.content.json
    نسخ الكود

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

    {  "key": "example",  "content": {    "contentExample": {      "nodeType": "translation",      "translation": {        "fr": "Ceci est un exemple de contenu",        "es": "Este es un ejemplo de contenido",      },    },  },}

    بعد ذلك، سيتم دمج كلا ملفي الإعلان في قاموس واحد، يمكن الوصول إليه باستخدام الخطاف القياسي useIntlayer("example") (react) / القابل للاستخدام (vue).

    تنسيق الملف المعبأ تلقائيًا

    التنسيق الموصى به لملفات الإعلان المعبأة تلقائيًا هو JSON، والذي يساعد في تجنب قيود التنسيق. ومع ذلك، يدعم Intlayer أيضًا صيغ .ts، .js، .mjs، .cjs، وصيغ أخرى.

    src/components/example/example.content.ts
    نسخ الكود

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

    const exampleContent = {  key: "example",  autoFill: "./example.filled.content.ts",  content: {    // المحتوى الخاص بك  },};

    سيتم إنشاء الملف في:

    plaintext
    نسخ الكود

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

    src/components/example/example.filled.content.ts

    يتم إنشاء ملفات .js، .ts، والملفات المشابهة كما يلي:

    • إذا كان الملف موجودًا بالفعل، سيقوم Intlayer بتحليله باستخدام شجرة البنية المجردة (AST) لتحديد كل حقل وإدخال أي ترجمات مفقودة.
    • إذا لم يكن الملف موجودًا، سيقوم Intlayer بإنشائه باستخدام قالب ملف إعلان المحتوى الافتراضي.

    المسارات المطلقة

    يدعم الحقل autoFill أيضًا المسارات المطلقة.

    src/components/example/example.content.ts
    نسخ الكود

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

    const exampleContent = {  key: "example",  autoFill: "/messages/example.content.json",  content: {    // المحتوى الخاص بك  },};

    سيتم إنشاء الملف في:

    plaintext
    نسخ الكود

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

    /messages/example.content.json

    إنشاء ملفات إعلان المحتوى لكل لغة تلقائيًا

    يدعم الحقل autoFill أيضًا إنشاء ملفات إعلان المحتوى لكل لغة.

    src/components/example/example.content.ts
    نسخ الكود

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

    const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",    es: "./example.es.content.json",  },  content: {    // المحتوى الخاص بك  },};

    سيتم إنشاء ملفين منفصلين:

    • src/components/example/example.fr.content.json
    • src/components/example/example.es.content.json
    في هذه الحالة، إذا لم يحتوي الكائن على جميع اللغات، يتخطى Intlayer إنشاء اللغات المتبقية.

    تصفية تعبئة تلقائية للغة محددة

    استخدام كائن للحقل autoFill يسمح لك بتطبيق عوامل تصفية وإنشاء ملفات لغة محددة فقط.

    src/components/example/example.content.ts
    نسخ الكود

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

    const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",  },  content: {    // المحتوى الخاص بك  },};

    سيتم إنشاء ملف الترجمة الفرنسية فقط.

    متغيرات المسار

    يمكنك استخدام المتغيرات داخل مسار autoFill لحل المسارات المستهدفة للملفات التي سيتم إنشاؤها بشكل ديناميكي.

    المتغيرات المتاحة:

    • {{locale}} – رمز اللغة (مثل fr، es)
    • {{fileName}} – اسم الملف (مثل index)
    • {{key}} – مفتاح القاموس (مثل example)
    src/components/example/index.content.ts
    نسخ الكود

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

    const exampleContent = {  key: "example",  autoFill: "/messages/{{locale}}/{{key}}.content.json",  content: {    // المحتوى الخاص بك  },};

    سيؤدي هذا إلى إنشاء:

    • /messages/fr/example.content.json
    • /messages/es/example.content.json
    src/components/example/index.content.ts
    نسخ الكود

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

    const exampleContent = {  key: "example",  autoFill: "./{{fileName}}.content.json",  content: {    // المحتوى الخاص بك  },};

    سيؤدي هذا إلى إنشاء:

    • ./index.content.json
    • ./index.content.json
    محرر
    اختبار
    Alt+→

    في هذه الصفحة

      المناقشات مجهولة الهوية ويتم مراجعتها بانتظام لمعالجة المشكلات الشائعة. لا تتردد في مشاركة أفكار الميزات أو التعليقات على الوثائق أو أي شيء يتعلق بـ Intlayer, نستخدم هذه المدخلات لتشكيل خارطة الطريق وتحسين المنتج.

      import { Locales, type Dictionary } from "intlayer";const exampleContent = {  key: "example",  locale: Locales.ENGLISH,  autoFill: "./example.content.json",  content: {    contentExample: "هذا مثال على المحتوى",  },} satisfies Dictionary;export default exampleContent;
      npx intlayer fill --file 'src/components/example/example.content.ts'
      {  "key": "example",  "content": {    "contentExample": {      "nodeType": "translation",      "translation": {        "fr": "Ceci est un exemple de contenu",        "es": "Este es un ejemplo de contenido",      },    },  },}
      const exampleContent = {  key: "example",  autoFill: "./example.filled.content.ts",  content: {    // المحتوى الخاص بك  },};
      src/components/example/example.filled.content.ts
      const exampleContent = {  key: "example",  autoFill: "/messages/example.content.json",  content: {    // المحتوى الخاص بك  },};
      /messages/example.content.json
      const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",    es: "./example.es.content.json",  },  content: {    // المحتوى الخاص بك  },};
      const exampleContent = {  key: "example",  autoFill: {    fr: "./example.fr.content.json",  },  content: {    // المحتوى الخاص بك  },};
      const exampleContent = {  key: "example",  autoFill: "/messages/{{locale}}/{{key}}.content.json",  content: {    // المحتوى الخاص بك  },};
      const exampleContent = {  key: "example",  autoFill: "./{{fileName}}.content.json",  content: {    // المحتوى الخاص بك  },};