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

تضمن هذه الطريقة عدم حجب الخيط الرئيسي، وحقن وسم تحسين محركات البحث الأمثل، والتنظيف الصحيح عند التفكيك.

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

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

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

اللغات المستهدفة: قائمة رموز ISO المفعلة لمشروعك (مثلا، 'مرحبا'، 'إيس'، 'فر').

المجال: مجال الإنتاج الخاص بك (مثلا، yoursite.com).

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

بناء الجسر.

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

الأكشن: أنشئ ملفا باسم 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 Hook: هذا يضمن أن الكود يعمل فقط بعد تركيب المكون، مما يمنع الانسداد خلال مرحلة الترطيب الأولية.

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

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

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

الخطوة 2: التهيئة في تطبيق Root

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

الآن بعد أن تم تغليف المنطق، نحتاج إلى وضعه في أعلى مستوى من شجرة التطبيقات الخاصة بك، عادة App.tsx أو 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 أن يبقى محرك الترجمة نشطا بغض النظر عن المسار (الصفحة) الذي يتنقل إليه المستخدم.

غير بصري: بما أن المكون يعود انطلا, لا يؤثر ذلك على تخطيط واجهة المستخدم أو المسافات بينك. يعمل بصمت في الخلفية.

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

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

بمجرد أن تحفظ وتشغل تطبيق React الخاص بك (بداية NPM أو تطوير الخيط)، يجري هذه الفحوصات:

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

فحص DOM: افتح تبويب عناصر → في كروم (F12) → التوسيع .

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

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

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

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

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

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

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

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

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

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