JS SDK

يساعدك Translify JS SDK في تنفيذ الترجمة الثنائية اللغة على موقع الويب الخاص بك.

كيفية الاستخدام

قم بتهيئة Translify:

<script>
  window.immersiveTranslateConfig = {
    pageRule: {}
  }
</script>

أضف كود script التالي إلى صفحة الويب الخاصة بك

<script src="https://download.translify.ai/immersive-translate-sdk-latest.js"></script>

مثال

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Translify JS SDK</title>
    <script>
      window.immersiveTranslateConfig = {
        pageRule: {},
      };
    </script>
    <script
      async
      src="https://download.translify.ai/immersive-translate-sdk-latest.js"
    ></script>
  </head>

  <body>
    <div>
      <p>
        Night gathers, and now my watch begins. It shall not end until my death.
        I shall take no wife, hold no lands, father no children. I shall wear no
        crowns and win no glory. I shall live and die at my post.
      </p>
    </div>
  </body>
</html>

المعلمات

مع pageRule، يمكنك تخصيص إعدادات الموقع، وتحديد المحتوى الذي يحتاج إلى الترجمة أو تعديل أنماط صفحة الويب.

initImmersiveTranslate({
  pageRule: {
    selectors: [".text"],
    excludeSelectors: ["nav", "footer"],
  },
});

استخدام selectors سيقوم بتجاوز نطاق الترجمة الذكية، وترجمة العناصر التي تتطابق مع المحدد فقط.

استخدام excludeSelectors يمكن أن يستبعد العناصر من الترجمة.

استخدام selectors.add سيضيف بعض المحددات فوق المحددات الافتراضية.

استخدام selectors.remove سيزيل بعض المحددات من المحددات الافتراضية.

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

{
  "selectors": ["div._aa_c h1", "li._acaz div[role=\"menuitem\"]"],
  "atomicBlockSelectors": ["div._aa_c h1", "li._acaz div[role=\"menuitem\"]"]
}

تفسيرات إضافية لمعلمات pageRule:

export interface PageRule {
  excludeMatches?: string | string[]; // استبعاد مواقع ويب محددة.
  selectorMatches?: string | string[]; // مطابقة باستخدام المحددات دون تحديد جميع عناوين URL
  excludeSelectorMatches?: string | string[]; // استبعاد القواعد، كما هو موضح أعلاه.

  // تحديد نطاق الترجمة
  selectors?: string | string[]; // ترجمة العناصر المتطابقة فقط
  excludeSelectors?: string | string[]; // استبعاد العناصر، لا تترجم العناصر المتطابقة
  excludeTags?: string | string[]; // استبعاد العلامات، لا تترجم العلامات المتطابقة

  // إضافة نطاق الترجمة، وليس تجاوز
  additionalSelectors?: string | string[]; // إضافة نطاق الترجمة. إضافة مواقع الترجمة في مناطق الترجمة الذكية.
  additionalExcludeSelectors?: string | string[]; // إضافة عناصر مستبعدة لمنع الترجمة الذكية في مواقع محددة.
  additionalExcludeTags?: string | string[]; // إضافة علامات مستبعدة

  // الاحتفاظ بالأصل
  stayOriginalSelectors?: string | string[]; // العناصر المتطابقة ستبقى كما هي. تستخدم عادةً للعلامات على مواقع المنتديات.
  stayOriginalTags?: string | string[]; // العلامات المتطابقة ستبقى كما هي، مثل `code`

  // ترجمة المنطقة
  atomicBlockSelectors?: string | string[]; // محدد المنطقة، العناصر المتطابقة ستعتبر ككل، لن تترجم في أجزاء
  atomicBlockTags?: string | string[]; // محدد علامة المنطقة، كما هو موضح أعلاه

  // كتلة أو خطي
  extraBlockSelectors?: string | string[]; // محددات إضافية، العناصر المتطابقة ستعامل كعناصر كتلة، تحتل سطرًا واحدًا.
  extraInlineSelectors?: string | string[]; // محددات إضافية، العناصر المتطابقة ستعامل كعناصر خطية.

  inlineTags?: string | string[]; // العلامات المتطابقة ستعامل كعناصر خطية
  preWhitespaceDetectedTags?: string | string[]; // العلامات المتطابقة ستقوم تلقائيًا بتغليف الأسطر

  // أنماط الترجمة
  translationClasses?: string | string | string[]; // إضافة فئات إضافية إلى الترجمة

  // أنماط عالمية
  globalStyles?: Record<string, string>; // تعديل أنماط الصفحة، مفيد عندما تتسبب الترجمات في اضطراب الصفحة.
  globalAttributes?: Record<string, Record<string, string>>; // تعديل سمات عناصر الصفحة

  // أنماط مضمنة
  injectedCss?: string | string[]; // تضمين أنماط CSS
  additionalInjectedCss?: string | string[]; // إضافة أنماط CSS بدلاً من تجاوزها مباشرة.

  // السياق
  wrapperPrefix?: string; // بادئة منطقة الترجمة، الافتراضي هو ذكي، يحدد ما إذا كان سيتم تغليف الأسطر بناءً على عدد الأحرف.
  wrapperSuffix?: string; // لاحقة منطقة الترجمة

  // عدد أحرف تغليف الترجمة
  blockMinTextCount?: number; // الحد الأدنى لعدد الأحرف للترجمة ككتلة، وإلا ستكون الترجمة كعنصر خطي.
  blockMinWordCount?: number; // نفس ما سبق. لتغليف الأسطر دائمًا، قم بتعيين كلاهما إلى 0.

  // الحد الأدنى لعدد الأحرف للمحتوى القابل للترجمة
  containerMinTextCount?: number; // الحد الأدنى لعدد الأحرف للعناصر التي سيتم ترجمتها أثناء التعرف الذكي، الافتراضي هو 18
  paragraphMinTextCount?: number; // الحد الأدنى لعدد الأحرف للفقرة الأصلية، المحتوى الأكبر من العدد سيتم ترجمته
  paragraphMinWordCount?: number; // الحد الأدنى لعدد الكلمات للفقرة الأصلية

  // عدد أحرف كسر السطر القسري للفقرات الطويلة
  lineBreakMaxTextCount?: number; // الحد الأقصى لعدد الأحرف لكسر السطر القسري عند ترجمة الفقرات الطويلة.

  // توقيت بدء الترجمة
  urlChangeDelay?: number; // التأخير بالمللي ثانية قبل بدء الترجمة بعد دخول الصفحة. الافتراضي هو 250 مللي ثانية لانتظار تهيئة الصفحة.

  // الترجمة المتدفقة بالذكاء الاصطناعي
  aiRule: {
    streamingSelector: string; // محدد صفحة GPT يحدد العنصر المترجم
    messageWrapperSelector: string; // محدد جسم الرسالة
    streamingChange: boolean; // تحديث تدريجي أو كامل للرسائل المتكررة في صفحات GPT. GPT هو تدريجي
  };
}

JS SDK

كيفية الاستخدام​

المعلمات​

كيفية الاستخدام

المعلمات