الموقع المدمج عالق عند "تحميل المناقشات"

الدعم
1

مرحباً! لدي هذه المشكلة عند محاولة تضمين Discourse في تطبيق الويب NextJS الخاص بنا. لقد حاولت بالفعل البحث عن إجابات في المواضيع الموجودة التي تتناول نفس الخطأ، لكنني لم أتمكن من العثور على حل لمشكلتي.

إليك كيف يبدو رمز التضمين الخاص بنا:

<script id="discourse" type="text/javascript" data-nscript="afterInteractive">DiscourseEmbed = {
              discourseUrl: 'https://qanvast.discourse.group/',
              discourseEmbedUrl: 'https://web-uat.qanvast.com/sg/interior-design-singapore/forefront-interior-the-alcove-26226?image=769596',
              // className: 'CLASS_NAME',
            };

            (function() {
              var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
              d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
              (document.getElementsByTagName('head')[0]
              || document.getElementsByTagName('body')[0]).appendChild(d);
            })();</script>

في الواجهة الأمامية، يظل عالقًا عند “جارٍ تحميل المناقشات…”. في البداية، اعتقدت أن الأمر يتعلق بـ CSP، لكنني أضفت النطاق بالفعل إلى قائمة السماح بالتضمين. لا تظهر أي أخطاء في سجلات وحدة التحكم ولا في استدعاءات الشبكة.

لقد علقت في هذا الأمر لبضع ساعات الآن لذا سأكون ممتنًا لأي مساعدة.

إعجاب واحد (1)
2

أهلاً بك @Edrian_C_Bertulfo :wave:

هل تابعت هذا الموضوع؟ هذه هي الطريقة للقيام بذلك، لكن ليس لدي أي فكرة عما إذا كانت ستنجح لتطبيق ويب NexJS…

3

مرحباً ليلي!

شكراً على ردك. لقد اتبعت التعليمات الموجودة في هذا المنشور، وما زلت عالقاً في مشكلة “جارٍ تحميل المناقشة…” اللانهائية.

إعجاب واحد (1)
4

هل توصلت إلى حل؟

5

لدي هذه المشكلة أيضًا عند استخدام next.js. إنها عالقة على “جارٍ تحميل المناقشة” عند التحميل الأول (قبل إنشاء الموضوع). إذا قمت بالتحديث، تظهر التعليقات/بدء المناقشة - لذا فهي تنشئ الموضوع بشكل جيد بالنسبة لي، لكنها لا تحدث حالة التحميل (يجب التحديث لإظهار الحالة المحدثة مع مربع التعليق).

سيكون من الجيد لو كان هناك رد اتصال أو شيء من هذا القبيل لإعلامك بإنشاء الموضوع لأنه ليس من المثالي الاضطرار إلى تحديث الصفحة. لا أعرف ما إذا كان ذلك ممكنًا باستخدام iframe.

6

حسنًا، لا يتم تحميله فعليًا أبدًا، حتى بعد إنشاء الموضوع…
على الأقل ليس بالنسبة لي.

أي نصائح؟

7

إليك ما لدي في تطبيقي التالي. إنه يعمل كما ذكرت سابقًا - يجب الضغط على تحديث. أخبرني إذا كان يعمل.

أحيانًا أحتاج إلى التحديث عدة مرات أو الانتظار لفترة ثم التحديث لتجاوز رسالة “جارٍ تحميل المناقشة”

<DiscourseComments
          discourseUrl="https://discourseurl.com/"
          discourseEmbedUrl={embedUrl}
          username="system"
        />

مكون:

"use client"

import { useEffect, useRef } from "react"

/**
 * مكون React لتضمين تعليقات Discourse على موقع ويب
 *
 * @param {Object} props - خصائص المكون
 * @param {string} props.discourseUrl - عنوان URL لمثيل Discourse الخاص بك (بما في ذلك الشرطة المائلة اللاحقة)
 * @param {string} [props.discourseEmbedUrl] - عنوان URL للصفحة الحالية (لإنشاء موضوع تلقائي)
 * @param {number} [props.topicId] - معرف موضوع Discourse موجود (بديل لـ discourseEmbedUrl)
 * @param {string} [props.username] - اسم المستخدم لإنشاء الموضوع
 * @param {string} [props.className] - اسم فئة CSS لإضافته إلى التضمين
 * @param {string} [props.referrerPolicy] - سياسة المرجع للإطار
 */
export default function DiscourseComments({
  discourseUrl,
  discourseEmbedUrl,
  topicId,
  username,
  className,
  referrerPolicy = "no-referrer-when-downgrade",
}) {
  const initialized = useRef(false)

  useEffect(() => {
    // منع التهيئة المكررة
    if (initialized.current) return
    initialized.current = true

    // التحقق من صحة الخصائص المطلوبة
    if (!discourseUrl) {
      console.error("DiscourseComments: discourseUrl مطلوب")
      return
    }

    if (!discourseEmbedUrl && !topicId) {
      console.error("DiscourseComments: يجب توفير إما discourseEmbedUrl أو topicId")
      return
    }

    // تكوين تضمين Discourse
    const config = {
      discourseUrl,
      discourseReferrerPolicy: referrerPolicy,
    }

    if (discourseEmbedUrl) {
      config.discourseEmbedUrl = discourseEmbedUrl
    }

    if (topicId) {
      config.topicId = topicId
    }

    if (className) {
      config.className = className
    }

    // تعيين كائن DiscourseEmbed العام
    window.DiscourseEmbed = config

    // تحميل نص تضمين Discourse
    const script = document.createElement("script")
    script.type = "text/javascript"
    script.async = true
    script.src = `${discourseUrl}javascripts/embed.js`
    document.head.appendChild(script)

    // التنظيف
    return () => {
      document.head.removeChild(script)
      delete window.DiscourseEmbed
    }
  }, [discourseUrl, discourseEmbedUrl, topicId, className, referrerPolicy])

  return (
    <>
      <div id="discourse-comments"></div>
      {username && <meta name="discourse-username" content={username} />}
    </>
  )
}