يتطلب دمج نصوص الطرف الثالث في تطبيق الصفحة الواحدة (SPA) مثل React معالجة دقيقة لـ DOM. لا يمكنك ببساطة لصق علامة نص برمجي في ملف HTML إذا كنت تريد تحكمًا ديناميكيًا. يوضح هذا الدليل كيفية إنشاء مخصص "مكون الحقن"— طريقة معيارية ونظيفة ومتوافقة مع React لتحميل محرك MultiLipi.

تضمن هذه الطريقة عدم حظر الخيط الرئيسي، وحقن علامات تحسين محركات البحث بشكل مثالي، والتنظيف المناسب عند إلغاء التحميل.

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

قبل المتابعة، تأكد من أن لديك ما يلي من لوحة تحكم MultiLipi الخاصة بك:

مفتاح واجهة برمجة تطبيقات المشروع: معرفك الفريد (موجود في الإعدادات).

اللغات المستهدفة: قائمة رموز ISO الممكّنة لمشروعك (على سبيل المثال، 'hi', 'es', 'fr').

النطاق: نطاق الإنتاج الخاص بك (على سبيل المثال، yoursite.com).

الخطوة 1: إنشاء مكون الحقن

بناء الجسر.

سنقوم بإنشاء مكون متخصص وظيفته الوحيدة هي إدارة إدراج علامات SEO ونص الترجمة في من المستند الخاص بك.

الإجراء: أنشئ ملفًا باسم multilipi.tsx (أو .js) في src/ المجلد والصق الرمز أدناه.

تايب سكريبت

// multilipi.tsx
import { useEffect } from "react";

const LANGUAGES = ["hi", "ar"] as const; // Replace with your languages
const DOMAIN = "example.com";           // Replace with your actual domain
const MULTILIPI_KEY = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"; // Replace with your actual key

export default function AddScriptToHead() {
  useEffect(() => {
    const head = document.head;
    const added: HTMLElement[] = [];

    const add = <T extends HTMLElement>(el: T) => {
      head.appendChild(el);
      added.push(el);
      return el;
    };

    // Alternate hreflang links
    LANGUAGES.forEach((lang) => {
      const link = document.createElement("link");
      link.rel = "alternate";
      link.hreflang = lang;
      link.href = `https://${lang}.${DOMAIN}/`;
      add(link);
    });

    // DNS prefetch & preconnect
    const dns = document.createElement("link");
    dns.rel = "dns-prefetch";
    dns.href = "//multilipiseo.multilipi.com";
    add(dns);

    const preconnect = document.createElement("link");
    preconnect.rel = "preconnect";
    preconnect.href = "https://multilipiseo.multilipi.com";
    preconnect.crossOrigin = "anonymous";
    add(preconnect);

    // Add MultiLipi translation script
    const script = document.createElement("script");
    script.src = "https://script-cdn.multilipi.com/static/JS/page_translations.js";
    script.crossOrigin = "anonymous";
    script.dataset.posX = "50";
    script.dataset.posY = "50";
    script.setAttribute("multilipi-key", MULTILIPI_KEY);
    script.setAttribute("mode", "auto");
    add(script);

    // Cleanup on component unmount
    return () => {
      added.forEach((el) => el.parentNode?.removeChild(el));
    };
  }, []);

  return null;
}

تعمق في الكود: لماذا يعمل هذا

خطاف useEffect: هذا يضمن تشغيل الكود فقط بعد تحميل المكون، مما يمنع الحظر أثناء مرحلة الترطيب الأولية.

أتمتة تحسين محركات البحث (Hreflang): يتكرر الكود عبر مصفوفة اللغات الخاصة بك ويقوم بإدراجها ديناميكيًا علامات. هذا أمر بالغ الأهمية لإخبار Google بأن hi.example.com هي النسخة الهندية من موقعك.

الأداء (Preconnect): الـ dns-prefetch و preconnect تخبر الأسطر المتصفح بحل عنوان IP لخادم MultiLipi قبل طلب البرنامج النصي. هذا يقلل بشكل كبير من الوقت الذي يستغرقه ظهور أداة الترجمة.

دالة التنظيف (return () => ...): في React، يمكن للمكونات إعادة التصيير. يتتبع هذا المنطق كل عنصر أضفناه (added.push(el)) ويزيلها إذا تم إلغاء تحميل المكون. هذا يمنع علامات النص البرمجي المكررة وتسرب الذاكرة.

الخطوة 2: التهيئة في التطبيق الجذر

تفعيل الطبقة.

الآن بعد أن تم تغليف المنطق، نحتاج إلى وضعه في أعلى مستوى من شجرة التطبيق الخاصة بك، عادةً App.tsx or App.js.

الإجراء: استيراد وتركيب المكون.

تايب سكريبت

// App.tsx
import AddScriptToHead from './multilipi'; // adjust the path as needed

function App() {
  return (
    <>
      {/* Load the MultiLipi script */}
      <AddScriptToHead />

      {/* Rest of your App UI */}
    </>
  );
}

export default App;

لماذا وضعه هنا؟

النطاق العام: وضع في App.tsx يضمن بقاء محرك الترجمة نشطًا بغض النظر عن المسار (الصفحة) الذي ينتقل إليه المستخدم.

غير مرئي: نظرًا لأن المكون يُرجع null، فإنه لا يؤثر على تخطيط واجهة المستخدم أو التباعد لديك. إنه يعمل بصمت في الخلفية.

قائمة التحقق من التحقق

كيفية تأكيد التكامل الناجح.

بمجرد حفظ وتشغيل تطبيق React الخاص بك (npm start or yarn dev)، قم بإجراء هذه الفحوصات:

الفحص البصري: هل ترى أداة تبديل اللغة تطفو في الموضع المحدد بواسطة posX و posY?

فحص DOM: افتح أدوات مطوري Chrome (F12) → علامة التبويب العناصر → توسيع .

تحقق من أنك ترى علامات.

تحقق من أن page_translations.js البرنامج النصي موجود في أسفل الرأس.

فحص الشبكة: افتح علامة التبويب الشبكة وقم بالتصفية حسب "JS". تأكد من أن page_translations.js يتم التحميل مع الحالة 200 OK.

خيارات التكوين الإضافية

في الكود المقدم، سترى script.dataset خصائص. يمكنك تعديل هذه القيم لتخصيص السلوك:

script.dataset.posX / posY: اضبط هذه الأرقام (0-100) لتحريك الموضع الافتراضي للويدجت العائم على الشاشة.

script.setAttribute("mode", "auto"):

"auto": يحاول الترجمة تلقائيًا بناءً على لغة المتصفح.

"manual": ينتظر تفاعل المستخدم قبل الترجمة.

كيفية دمج MultiLipi في موقع React الخاص بك