EJS

ترجمة بالذكاء الاصطناعي لقوالب EJS باستخدام Lingo.dev CLI

ما هو EJS؟

EJS (Embedded JavaScript) هي لغة قوالب بسيطة تتيح لك إنشاء ترميز HTML باستخدام JavaScript العادية. تُستخدم بشكل شائع في تطبيقات Node.js للعرض من جانب الخادم.

ما هو Lingo.dev CLI؟

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

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

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

يشرح هذا الدليل كيفية ترجمة قوالب EJS باستخدام 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. إنشاء المحتوى المصدر

إذا لم تكن قد قمت بذلك بالفعل، قم بإنشاء ملف أو أكثر من ملفات قوالب EJS التي تحتوي على المحتوى المراد ترجمته. يجب أن تكون هذه الملفات موجودة في مسار يتضمن اللغة المصدر في مكان ما من المسار (على سبيل المثال، كاسم دليل مثل en/ أو كجزء من اسم الملف مثل messages.en.ejs).

بالنسبة لقوالب EJS، يتضمن المحتوى القابل للترجمة:

  • محتوى النص داخل عناصر HTML
  • قيم السمات (النص البديل، العناوين، التسميات، العناصر النائبة، قيم الأزرار)
  • النص داخل alert() في JavaScript أو سلاسل نصية أخرى

يتم الحفاظ على علامات قوالب EJS (<%= %>، <%- %>، <% %>) وأسماء المتغيرات أثناء الترجمة.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1>Welcome back!</h1>
    <p>Hello, <%= user.name %>! You have <%= messageCount %> new messages.</p>
    <form action="/login" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" placeholder="Enter username">
    </form>
</body>
</html>

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

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

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

  2. في كائن "ejs"، حدد مصفوفة من نمط أو أكثر من أنماط include:

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

    تحدد هذه الأنماط الملفات المراد ترجمتها.

    الأنماط نفسها:

    • يجب أن تحتوي على [locale] كعنصر نائب للغة المكونة
    • يمكن أن تشير إلى مسارات الملفات (على سبيل المثال، "[locale]/config.ejs")
    • يمكن استخدام النجوم كعناصر نائبة بدل (على سبيل المثال، "[locale]/*.ejs")

    أنماط glob العودية (على سبيل المثال، **/*.ejs) غير مدعومة.

الخطوة 6. تكوين LLM

يستخدم 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. يتتبع هذا الملف المحتوى الذي تمت ترجمته، مما يمنع إعادة الترجمة غير الضرورية في عمليات التشغيل اللاحقة.

مثال

en/example.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <% if (user) { %>
        <h1>Welcome back!</h1>
        <p>Hello, <%= user.name %>! You have <%= messageCount %> new messages.</p>
    <% } else { %>
        <h1>Please log in</h1>
        <form action="/login" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" placeholder="Enter username">
            <button type="submit">Sign In</button>
        </form>
    <% } %>
</body>
</html>

es/example.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <% if (user) { %>
        <h1>¡Bienvenido de nuevo!</h1>
        <p>Hola, <%= user.name %>! Tienes <%= messageCount %> nuevos mensajes.</p>
    <% } else { %>
        <h1>Por favor, inicia sesión</h1>
        <form action="/login" method="post">
            <label for="username">Nombre de usuario:</label>
            <input type="text" id="username" placeholder="Enter username">
            <button type="submit">Iniciar sesión</button>
        </form>
    <% } %>
</body>
</html>

i18n.json

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

i18n.lock

version: 1
checksums:
  21b99a2aea148b309f95ec2c966d326c:
    text_0: e4d2da607604b3fda41eef5e0dd35faa
    text_1: 69eb28c44f7168b1df0455ad2a62588c
    text_2: bff335b01588a8db802bd193c725ec11
    text_3: 0744639a7ac440afe0d792ea79c54512
    text_4: b4cc462fb3a00d2f60deefe548c10a33
    text_5: d0fd310aef9cf3c5827f1db4b0c098a1
    text_6: 85bb1f6fb66b5ab65a9c61469183236e
    text_7: bdbc827b3d224e03394dfd56304500f2
    text_8: 5e8497af456decf6cf716c0a23f1dbc2
    text_9: d572e25ed81420669e65c03925da1001
    text_10: 2cf6537fb69cdd2eb030e55bf4223b93
    text_11: ec7b8f314fe9bc6591006707484ede61
    text_12: c2460fb2a7887fdf2d68db2b553a4338
    text_13: 3abe623951250bd24a9d7799415761ab
    text_14: 988be328b82702586f2cd541858710fe
    text_15: b2328773b0ef0699fd5791055c5cf9e2
    text_16: 92acabd12cd9b63c825294c54fcbc806