JavaScript

قم بترجمة أي موقع ويب باستخدام JavaScript عادي: أضف علامة نصية وحدد النص الذي تريد ترجمته. يعمل هذا مع HTML العادي والصفحات التي يعرضها الخادم و WordPress وغيرها من أنظمة إدارة المحتوى والتطبيقات التي تم إنشاؤها باستخدام أي إطار عمل.

الإعداد باستخدام علامة البرنامج النصي

أضف البرنامج النصي Magic Translate إلى صفحتك:

<script
  src="https://cdn.jsdelivr.net/npm/@magic-translate/js@1/dist/magic-translate.min.js"
  data-api-key="<your-api-key>"
  data-language="de"
  defer
></script>

إذا لم يكن لديك مفتاح API حتى الآن، فقم بالتسجيل في Magic Translate للحصول على واحد. نظرًا لأن المفتاح جزء من صفحتك، فاقصره على نطاقاتك الخاصة ضمن المجالات المسموح بها.

ثم ضع النص الذي تريد ترجمته في عنصر <t>:

<h1><t>Please translate me!</t></h1>

هذا كل شيء. يمكن الآن ترجمة موقع الويب الخاص بك إلى أكثر من 70 لغة.

اترك data-language للترجمة إلى لغة متصفح الزائر.

الإعداد باستخدام npm

إذا قمت بتجميع JavaScript الخاص بك، فقم بتثبيت العميل من npm بدلاً من ذلك:

# using npm
npm i @magic-translate/js

# using yarn
yarn add @magic-translate/js

import { createMagicTranslate, Language } from '@magic-translate/js';

const magicTranslate = createMagicTranslate({
  apiKey: '<your-api-key>',
  language: Language.DE // any supported language
});

يبدأ createMagicTranslate بترجمة الصفحة على الفور.

التكوين

تقبل علامة البرنامج النصي هذه السمات:

createMagicTranslate يقبل الخيارات المقابلة: apiKey و language و sourceLanguage و formality و debug. كما أنها تقبل root لقصر الترجمة على عنصر معين. افتراضيًا، يقوم بترجمة المستند بأكمله.

تغيير اللغات

اتصل بـ setLanguage لترجمة الصفحة إلى لغة أخرى. باستخدام علامة البرنامج النصي، يتوفر المثيل كـ window.magicTranslate:

<select onchange="magicTranslate.setLanguage(this.value)">
  <option value="en">English</option>
  <option value="de">Deutsch</option>
  <option value="fr">Français</option>
</select>

عند استخدام علامة البرنامج النصي، يتم حفظ اختيار لغة الزائر لتحميل الصفحة التالية.

مشروع مثال

يمكنك العثور على مثال لمشروع على GitHub ومشاهدته مباشرة.