كتل Vue i18n

ما هي كتل Vue i18n؟

كتل Vue i18n هي أقسام خاصة من نوع <i18n> في مكونات Vue أحادية الملف (SFCs) تحتوي على ترجمات بتنسيق JSON. تتيح لك الاحتفاظ بالترجمات جنبًا إلى جنب مع كود المكون الخاص بك.

على سبيل المثال:

<template>
  <div class="container">
    <h1>{{ $t('welcome') }}</h1>
    <button @click="handleClick">{{ $t('button.submit') }}</button>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

ما هو Lingo.dev CLI؟

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

لمعرفة المزيد، راجع نظرة عامة.

حول هذا الدليل

يشرح هذا الدليل كيفية ترجمة كتل Vue i18n باستخدام Lingo.dev CLI.

ستتعلم كيفية:

• إنشاء مشروع من الصفر
• تكوين خط أنابيب الترجمة
• إنشاء ترجمات باستخدام الذكاء الاصطناعي

المتطلبات الأساسية

لاستخدام Lingo.dev CLI، تأكد من تثبيت Node.js الإصدار 18 أو أحدث:

❯ node -v
v22.17.0

الخطوة 1. إعداد المشروع

في دليل مشروعك، أنشئ ملف i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

يحدد هذا الملف سلوك خط أنابيب الترجمة، بما في ذلك اللغات المراد الترجمة بينها ومكان وجود المحتوى القابل للترجمة على نظام الملفات.

لمعرفة المزيد حول الخصائص المتاحة، راجع i18n.json.

الخطوة 2. تكوين اللغة المصدر

اللغة المصدر هي اللغة والمنطقة الأصلية التي تمت كتابة المحتوى الخاص بك بها. لتكوين اللغة المصدر، قم بتعيين خاصية locale.source في ملف i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

يجب توفير اللغة المصدر كـ علامة لغة BCP 47.

للحصول على القائمة الكاملة لرموز اللغات التي يدعمها Lingo.dev CLI، راجع رموز اللغات المدعومة.

الخطوة 3. تكوين اللغات الهدف

اللغات الهدف هي اللغات والمناطق التي تريد ترجمة محتواك إليها. لتكوين اللغات الهدف، قم بتعيين خاصية locale.targets في ملف i18n.json:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

الخطوة 4. إنشاء المحتوى المصدر

إذا لم تكن قد قمت بذلك بالفعل، قم بإنشاء ملف مكون Vue يحتوي على كتلة <i18n> تتضمن المحتوى المراد ترجمته.

ملاحظة: أثناء عملية الترجمة، سيتم استبدال ملفات المحتوى المصدر لتتضمن المحتوى المترجم (بالإضافة إلى المحتوى المصدر).

الخطوة 5. إنشاء حاوية

1. في ملف i18n.json، أضف كائن "vue-json" إلى كائن buckets:

   {
     "$schema": "https://lingo.dev/schema/i18n.json",
     "version": "1.10",
     "locale": {
       "source": "en",
       "targets": ["es"]
     },
     "buckets": {
       "vue-json": {}
     }
   }
   

2. في كائن "vue-json"، قم بتعريف مصفوفة من نمط أو أكثر من أنماط include:

   {
     "$schema": "https://lingo.dev/schema/i18n.json",
     "version": "1.10",
     "locale": {
       "source": "en",
       "targets": ["es"]
     },
     "buckets": {
       "vue-json": {
         "include": ["./example.vue"]
       }
     }
   }
   

   تحدد هذه الأنماط الملفات المراد ترجمتها ويمكن أن:

   • تشير إلى مسارات ملفات محددة (مثل "some/dir/file.vue")
   • تستخدم النجمات كعناصر بديلة (مثل "some/dir/*.vue")

   أنماط glob التكرارية (مثل **/*.vue) غير مدعومة.

الخطوة 6. تكوين نموذج لغوي كبير

يستخدم Lingo.dev CLI نماذج لغوية كبيرة (LLMs) لترجمة المحتوى بالذكاء الاصطناعي. لاستخدام أحد هذه النماذج، تحتاج إلى مفتاح API من مزود مدعوم.

للبدء بأسرع وقت ممكن، نوصي باستخدام Lingo.dev Engine — منصتنا المستضافة الخاصة التي توفر 10,000 رمز مميز من الاستخدام المجاني الشهري:

1. سجل للحصول على حساب Lingo.dev.

2. قم بتشغيل الأمر التالي:

   npx lingo.dev@latest login
   

   سيؤدي هذا إلى فتح متصفحك الافتراضي ومطالبتك بالمصادقة.

3. اتبع التعليمات المعروضة.

الخطوة 7. إنشاء الترجمات

في الدليل الذي يحتوي على ملف i18n.json، قم بتشغيل الأمر التالي:

npx lingo.dev@latest run

يقوم هذا الأمر بما يلي:

1. قراءة ملف i18n.json.
2. العثور على الملفات التي تحتاج إلى ترجمة.
3. استخراج المحتوى القابل للترجمة من الملفات.
4. استخدام نموذج اللغة الكبير المُكوَّن لترجمة المحتوى المستخرج.
5. كتابة المحتوى المترجم مرة أخرى إلى نظام الملفات.

في المرة الأولى التي يتم فيها إنشاء الترجمات، يتم إنشاء ملف i18n.lock. يتتبع هذا الملف المحتوى الذي تمت ترجمته، مما يمنع إعادة الترجمة غير الضرورية في عمليات التشغيل اللاحقة.

مثال

example.vue (قبل الترجمة)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

example.vue (بعد الترجمة)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  },
  "es": {
    "welcome": "¡Hola, mundo!",
    "description": "Una aplicación de demostración simple",
    "button": {
      "submit": "Enviar",
      "cancel": "Cancelar"
    }
  }
}
</i18n>

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  7142a39dd2be0c1e12089c922ab4fdb5:
    welcome: 1308168cca4fa5d8d7a0cf24e55e93fc
    description: 36349ca88e416a6f2d6ac8742f0a963c
    button/submit: dabdff794b5804b8f22ecab13f37fb7d
    button/cancel: efdc4af6863f1e503a7f9961be721eed
    messages/0: f77d23a0a4b7f8fc7f8fd458921b90dd
    messages/1: e841c4139402ded42079401299e4fa1e
  0378a0d09447bf0944e842f7e54d3ec2:
    welcome: 0468579ef2fbc83c9d520c2f2f1c5059
    description: 49f8864eb0e53903f04532bf33e1e4fa
    button/submit: 7c91ef5f747eea9f77a9c4f23e19fb2e
    button/cancel: 2e2a849c2223911717de8caa2c71bade
    messages/0: 97a8db12c3955a85c4f50e3951c91a40
    messages/1: 986a434e3895c8ee0b267df95cc40051