ترجمة المحتوى

حدد المحتوى الذي تريد أن يترجمه Magic Translate. يتم عرض المحتوى الأصلي حتى يتم تحميل الترجمة.

عنصر <t>

ضع النص في عنصر <t> لترجمته. يمكن أن تحتوي على HTML:

<t>This content will be translated</t>

<t>Click <a href="/sale">here</a> to see <b>today's</b> deals.</t>

<mt-translate> يعمل أيضًا، إذا كنت تفضل اسم عنصر مخصص.

السمة data-t

إذا لم تتمكن من إضافة عنصر مجمّع، أضف data-t إلى العنصر الموجود لترجمة محتواه:

<title data-t>My online shop</title>

<select>
  <option data-t>Small</option>
  <option data-t>Large</option>
</select>

السمات

ضع قائمة بالسمات المراد ترجمتها في data-t-attrs، مفصولة بمسافات:

<input placeholder="Search products" data-t-attrs="placeholder" />

<img src="team.jpg" alt="Our team" title="Say hi" data-t-attrs="alt title" />

المتغيرات

ضع القيم التي تتغير، مثل الاسم أو العدد، في data-v ككائن JSON، وقم بالإشارة إليها كـ $name:

<t data-v='{"name": "Bob", "count": 7}'>Hi $name, you have $count new messages</t>

<input placeholder="Search $count products" data-t-attrs="placeholder" data-v='{"count": 3}' />

يقوم Magic Translate بترجمة النص حول القيم مرة واحدة، كـ Hi {0}, you have {1} new messages، ويعيد القيم إلى الصفحة. يتم تخزين الترجمة مؤقتًا وتعمل مع كل اسم وكل عدد، ولا يتم إرسال القيم نفسها أبدًا إلى Magic Translate.

لإظهار القيم الجديدة، قم بتغيير data-v. تتم إعادة استخدام الترجمة المخزنة مؤقتًا ولا يتم تقديم أي طلب:

element.dataset.v = JSON.stringify({ name: 'Bob', count: 8 });

يتم ترقيم القيم بالترتيب الذي تظهر به لأول مرة. يمكن للترجمة نقلها أينما تحتاجها اللغة، على سبيل المثال {1} neue Nachrichten für {0}.

بعض القواعد:

• يتم استبدال مفاتيح data-v فقط، لذلك يبقى النص مثل $5 كما هو. في حالة بدء تشغيل مفتاحين بنفس الطريقة، مثل count و counts، يفوز المفتاح الأطول.
• يمكن أن يظهر نفس الاسم أكثر من مرة.
• يتم إدراج القيم كنص، وليس كـ HTML. ضع الترميز في النص المحيط بهم بدلاً من ذلك: Hi <b>$name</b>.
• في المحتوى، يتم استبدال المتغيرات بالنص فقط، وليس في السمات مثل href أو title.
• إذا لم يكن data-v كائن JSON صالحًا، فسيتم ترك النص بدون ترجمة ويتم تسجيل تحذير. المفتاح الذي لا يظهر في النص يسجل تحذيرًا أيضًا.
• $name مرئي حتى يتم تحميل البرنامج النصي. قم بتحميل البرنامج النصي مبكرًا في الصفحة، أو قم بإخفاء هذه العناصر حتى ذلك الحين.

خيارات

استخدم هذه السمات لتعيين خيارات لعنصر واحد:

<t data-lang="fr" data-formality="formal">How are you?</t>

المحتوى الذي يتغير

تتم ترجمة المحتوى الذي تمت إضافته إلى الصفحة لاحقًا، أو تغييره بواسطة البرامج النصية الخاصة بك، أيضًا. يعمل هذا مع المحتوى المقدم بواسطة JavaScript، على سبيل المثال مع htmx أو jQuery.

يتم إرسال جميع الترجمات المطلوبة في نفس الوقت إلى API في طلب واحد، ويتم تخزين الترجمات مؤقتًا. يمكنك تحديد أي عدد تريده من العناصر.

القيود

لا يمكن أن يتجاوز محتوى عنصر واحد 10 كيلوبايت، أي حوالي 5000 حرف. تتم ترجمة العناصر المتداخلة كجزء من عنصر <t> الأصلي.