كتل 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؟

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

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

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

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

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

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

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

لاستخدام واجهة سطر أوامر Lingo.dev، تأكد من تثبيت 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، راجع رموز اللغات المدعومة.

الخطوة 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. تكوين نموذج لغوي كبير (LLM)

تستخدم واجهة سطر أوامر Lingo.dev نماذج لغوية كبيرة (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. يستخدم نموذج اللغة الآلي (LLM) المُكوّن لترجمة المحتوى المستخرج.
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