تضمين قائمة مواضيع Discourse في موقع خارجي

توثيق التكاملات
,
1

:bookmark: يشرح هذا الدليل كيفية تضمين وعرض قائمة بمواضيع Discourse على مواقع ويب خارجية باستخدام JavaScript، مما يتيح لك عرض محتوى المنتدى مثل المناقشات أو الإعلانات على المدونات والمواقع أو منصات المحتوى الخارجية.

:person_raising_hand: مستوى المستخدم المطلوب: مدير النظام

ملخص

يتيح تضمين مواضيع Discourse على مواقع الويب الخارجية عرض قوائم المواضيع من منتدى Discourse الخاص بك مباشرةً على مواقع أخرى. يساعد هذا التكامل في توجيه الزوار إلى منتداك والحفاظ على تفاعل جمهورك مع محتوى مجتمعك. تظهر المواضيع المضمنة كأداة JavaScript تتكامل مع بنية DOM لموقعك، مما يسهل تخصيصها عبر CSS.

تمكين تضمين المواضيع

لإعداد تضمين المواضيع على موقعك الخارجي:

  1. انتقل إلى Admin > Advanced > Embedding وانتقل إلى علامة التبويب Settings. فعّل إعداد الموقع embed_topics_list

Enabling embed
Enabling embed2802×826 205 KB

  1. أضف سكريبت التضمين إلى قسم الرأس (head) في HTML لموقعك الخارجي:
<script src="https://discourse.example.com/javascripts/embed-topics.js"></script>

استبدل discourse.example.com بعنوان URL الفعلي لمنتدى Discourse الخاص بك.

  1. ضع عنصر قائمة المواضيع في المكان الذي تريد عرض المواضيع فيه (مثل منشور مدونة أو صفحة فردية على الموقع):
<d-topics-list discourse-url="https://discourse.example.com" category="1234" per-page="5"></d-topics-list>
  1. إذا كنت تقوم بتضمين مواضيع على نطاق مختلف عن موقع Discourse الخاص بك، أضف نطاق موقعك الخارجي إلى Admin > Advanced > Embedding > Hosts

Adding Hosts
Adding Hosts2836×1188 214 KB

على سبيل المثال، إذا كان موقع Discourse الخاص بك موجودًا في yourdiscourseforum.com وتريد تضمين مواضيع في yourexternalsite.com، يجب عليك إضافة yourexternalsite.com إلى قائمة المضيفين المسموح بهم.

:warning: لا يمكنك تضمين مواضيع من موقع Discourse خاص يتطلب تسجيل الدخول.

معلمات التكوين

يدعم عنصر d-topics-list السمات التالية لتخصيص عرض المواضيع:

  • discourse-url - عنوان URL لموقع Discourse الخاص بك (مطلوب)
  • template - خيارات نمط العرض:
    • basic (الافتراضي) - يعرض عناوين المواضيع كروابط
    • complete - يعرض العنوان واسم المستخدم والصورة الرمزية وتاريخ الإنشاء ووقت آخر رد وعدد الإعجابات وعدد الردود والصورة المميزة/الصورة المصغرة
  • per-page - عدد المواضيع المراد عرضها (محدود بإعداد الموقع المخفي embed_topic_limit_per_page، الافتراضي 200)
  • category - معرف الفئة لتصفية المواضيع من فئة محددة
  • tags - تصفية المواضيع حسب وسوم محددة
  • allow-create - عند تعيينه على true، يظهر زر “موضوع جديد”
  • embed-class - يضيف فئة CSS مخصصة إلى حاوية قائمة المواضيع المضمنة (أحرف أبجدية رقمية وشرطات وشرطات سفلية فقط)
  • top-period - عرض أفضل المواضيع من فترة زمنية محددة:
    • all
    • yearly
    • quarterly
    • monthly
    • weekly
    • daily

يمكنك دمج معلمات متعددة لتحسين عرض قائمة مواضيعك. على سبيل المثال:

<d-topics-list 
  discourse-url="https://discourse.example.com" 
  category="5" 
  tags="announcements" 
  per-page="10"
  template="complete">
</d-topics-list>

تخصيص المظهر

يمكنك تنسيق المواضيع المضمنة باستخدام SCSS مخصص في لوحة Admin > Appearance > Themes and Components. انقر على سمة حاليّة أو افتراضية ثم انقر على Edit Code. بعد ذلك، يمكنك اختيار Show_advanced واختيار Embedded CSS لإضافة الكود المخصص الخاص بك:

Embedded CSS tab
Embedded CSS tab2846×1332 244 KB

إليك مثال على SCSS لإنشاء تخطيط شبكي:

.topics-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  
  .topic-list-item {
    .main-link {
      border: 1px dotted gray;
      padding: 0;
    }
    
    .topic-column-wrapper {
      flex-direction: column-reverse;
      
      .topic-column.details-column {
        width: 100%;
      }
      
      .topic-column.featured-image-column .topic-featured-image img {
        max-width: initial;
        max-height: initial;
        width: 100%;
      }
    }
  }
}

أفضل الممارسات

  • استخدم فلاتر ذات معنى للفئات والوسوم لعرض محتوى ذي صلة لجمهورك
  • اضبط قيمة per-page مناسبة لتجنب إرباك الزوار
  • اختبر مواضيعك المضمنة على أحجام شاشات مختلفة لضمان تصميم متجاوب
  • فكر في استخدام القالب complete لجاذبية بصرية أفضل عند توفر المساحة
  • راجع قائمة المضيفين المسموح بهم بانتظام للتأكد من أن النطاقات المصرح بها فقط يمكنها تضمين مواضيعك

مشاكل شائعة وحلولها

عدم عرض المواضيع على نطاق خارجي

المشكلة: تظهر المواضيع المضمنة كمربع فارغ أو رمادي عند العرض على نطاق خارجي.

الحل: أضف النطاق الخارجي إلى قائمة Admin > Advanced > Embedding > Hosts في موقع Discourse الخاص بك. تأكد من تضمين النطاق الفرعي الصحيح (على سبيل المثال، إذا كان موقعك يستخدم www.example.com، أضف www.example.com بدلاً من example.com فقط).

أخطاء تحميل السكريبت

المشكلة: فشل سكريبت التضمين في التحميل أو يعيد أخطاء اتصال.

الحل:

  • تحقق من صحة عنوان URL الخاص بـ Discourse في مصدر السكريبت وقابلية الوصول إليه
  • تأكد من تفعيل إعداد الموقع embed_topics_list
  • تأكد من أن موقع Discourse الخاص بك لا يتطلب تسجيل الدخول للمواضيع العامة

سلوك سياق SameSite

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

الأسئلة الشائعة

س: هل يمكنني تضمين مواضيع من موقع Discourse خاص؟
ج: لا، يعمل تضمين المواضيع فقط مع مواقع Discourse العامة. لا يمكن تضمين المواقع الخاصة التي تتطلب تسجيل الدخول.

س: هل يمكنني تضمين قوائم مواضيع متعددة على نفس الصفحة؟
ج: نعم، يمكنك تضمين عناصر \u003cd-topics-list\u003e متعددة على نفس الصفحة بمعلمات مختلفة لعرض مجموعات مواضيع متنوعة.

س: كيف أقوم بتضمين مواضيع مع صور مميزة؟
ج: استخدم المعلمة template="complete" في عنصر \u003cd-topics-list\u003e الخاص بك لعرض المواضيع مع الصور المصغرة والصور المميزة.

س: هل يمكنني تغيير مكان فتح روابط المواضيع؟
ج: افتراضيًا، تفتح روابط المواضيع في النافذة الأصلية. يمكنك تعديل هذا السلوك من خلال التخصيص باستخدام CSS أو JavaScript.

موارد إضافية

9 إعجابات
Embedding on another site, Updating embed created topic if page is updated
Showing the best users in WordPress
Is Discourse a full website or just a forum add-in?
Recap: AMA with The Discourse Product Team
2

هل يعمل هذا مع اشتراكات Discourse؟ حاولت تطبيقه وكان يؤطر المنتدى بأكمله بدلاً من المواضيع؟

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

نعم، يجب أن يعمل هذا جنبًا إلى جنب مع إضافة Discourse Subscriptions دون أي مشاكل.
يعتمد التضمين على تكوين معلمات محددة للتحكم في المواضيع المعروضة، مثل category أو tags أو per-page، من خلال الوسم d-topics-list في HTML موقعك. إذا انتهى بك الأمر بتضمين المنتدى بأكمله، فقد ترغب في التأكد من أن عنوان URL الخاص بـ Discourse وأي معلمات في الوسم d-topics-list تم تعيينها بشكل صحيح لتعكس المواضيع التي تنوي عرضها.

4 إعجابات
4

مرحباً، إنه أمر لطيف للغاية! شكراً لك!

أريد تغيير قيمة الهدف للعنصر a في قائمة المواضيع إلى “_blank” (القيمة الافتراضية هي “_parent”، ولديها مشكلة عبر المجالات وليست ما أريده)،

ماذا يجب أن أفعل؟

5

مرحباً، أحاول عرض هذه على موقعين مختلفين.

عنوان URL الخاص بـ discourse الخاص بي هو https://learn.getupearlier.com

لقد قمت بتضمين هذا النص البرمجي هنا وهو يعمل:

image
image2155×1095 99.6 KB

لقد قمت بتضمين نفس النص البرمجي هنا ولكنه لا يعمل:

image
image2426×807 17.1 KB

هذا في الرأس:

<script src="https://learn.getupearlier.com/javascripts/embed-topics.js"></script>

هذا في الصفحة:

<d-topics-list discourse-url="https://learn.getupearlier.com" category="5" per-page="10"></d-topics-list>

أي مساعدة ستكون محل تقدير!

إعجابَين (2)
8

مرحباً مايكل،

المشكلة التي تواجهها هنا من المحتمل أن تكون مرتبطة باستخدام نطاق مختلف عن نطاق Discourse الخاص بك لتضمين المواضيع عليه.

النص البرمجي الخاص بك يعمل على getupearlier.com لأن هذا على نفس النطاق مثل موقع Discourse الخاص بك learn.getupearlier.com، بينما michaelbakerdigital.com على نطاق مختلف.

لقد أضفت هذا القسم إلى الدليل، والذي يشرح كيفية حل هذا الموقف.

لذلك في حالتك، يجب أن يسمح لك إضافة michaelbakerdigital.com إلى “التضمين” → “المضيفون المسموح بهم” في موقع Discourse الخاص بك بتضمين المواضيع بشكل صحيح على هذا النطاق.

6 إعجابات
23

مرحباً، لقد سمحت بهذا الرابط كما ترى أدناه:

image
image1917×862 92.8 KB

إليك رابط الاختبار:
https://www.michaelbakerdigital.com/discourse-test/

أحصل فقط على مربع خطأ رمادي فارغ

image
image1327×883 51.8 KB

وهذا هو الكود الموجود داخل michaelbakerdigital.com

<div id='discourse-comments'></div>
<meta name='discourse-username' content='MikeB'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'https://learn.getupearlier.com/',
    discourseEmbedUrl: 'michaelbakerdigital.com',
    // 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>

أو هذا:

<d-topics-list discourse-url="https://learn.getupearlier.com" category="5" per-page="5"></d-topics-list>

أي مساعدة ستكون محل تقدير، لقد علقت هنا إلى الأبد وما زلت أعتزم حل هذه المشكلة.

24

مرحباً، كان الحل هنا هو اسم النطاق الخاص بي الذي تمت إضافته إلى قسم التضمين وكان يحتاج إلى www.

image
image1075×229 23.6 KB

هذا كل شيء! لقد استغرقت 4 أحرف الكثير من الوقت ولكن تم حلها بمساعدة دعم Discourse و WP Engine.

25

هل يوجد مثال برمجي لاستخدامه لإخراج صورة مميزة إلى موقع خارجي أيضًا؟

شكرًا جزيلاً

26

مساعدة مطلوبة: تضمين قائمة مواضيع Discourse في موقع Next.js

مرحباً بالجميع،

أحاول تضمين قائمة مواضيع Discourse في موقعي الإلكتروني (example.io) المبني باستخدام إطار عمل Next.js و Node.js، والذي تم نشره عبر Vercel. لقد قمت بإنشاء نسخة تجريبية للموقع على test-discourse.app لهذا الغرض.

إليك ما قمت به حتى الآن:

  1. أضفت المضيف إلى إعدادات تضمين Discourse.
  2. مكّنت CORS في البيئة وأضفت المضيف إلى أصل CORS.
  3. أوقفت CSP (سياسة أمان المحتوى).

على الرغم من اتباع هذه الخطوات وإضافة البرامج النصية اللازمة، ما زلت غير قادر على رؤية قائمة المواضيع على موقعي الإلكتروني.

إليك الكود الذي أستخدمه:

في قسم الرأس (head):

<script src="my-website/javascripts/embed-topics.js"></script>

في قسم الجسم (body):

<d-topics-list discourse-url="my-website" tags="example"></d-topics-list>

جربت أيضاً تضمين الفئات كما هو موضح في المنشور

هل يمكن لأحد أن يشير إلى ما قد أكون أفتقده أو أفعله بشكل خاطئ؟ أي اقتراحات لجعل قائمة المواضيع تظهر على موقعي الإلكتروني ستكون موضع تقدير كبير.

شكراً جزيلاً مقدماً على مساعدتكم!

27

لدي نسخة من Discourse تعمل على خادم افتراضي خاص
لدي موقع ويب آخر يعمل على خادم افتراضي خاص مختلف
كلاهما لهما نفس النطاق الأساسي على سبيل المثال

community.mydomain.com
mydomain.com

لقد استخدمت هذه الطريقة بنجاح لتضمين قائمة مواضيع من خادم المنتدى (Discourse) في الموقع الآخر. إنه أمر رائع لتوليد حركة مرور من موقعي إلى المنتدى.

أستخدم مكون “كتل الشريط الجانبي الأيمن” لسرد “الأحداث القادمة” من تقويم باستخدام المكون الإضافي discourse-calendar.

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

يقوم مكون “كتل الشريط الجانبي الأيمن” بترتيبها حسب تاريخ الحدث.
مثال

صورة
صورة259×318 18 KB

هل هناك طريقة للقيام بذلك؟ لدي سيطرة إدارية على كلا الموقعين.
هل هناك طريقة أخرى لاستخراج البيانات من خادم Discourse الخاص بي مثل واجهة برمجة التطبيقات (API)؟ هل واجهة برمجة التطبيقات مثبتة على جميع نسخ Discourse افتراضيًا أم يجب علي تثبيتها؟

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

نظرًا لعدم حصولي على أي تلميحات، فقد قررت الإجابة على بعض أسئلتي بنفسي لأي شخص يبحث\n\n[quote=“Andrew Rowe, post:27, topic:293709, username:Andrew_Rowe”]\nهل واجهة برمجة التطبيقات مثبتة على جميع مثيلات Discourse افتراضيًا أم يجب علي تثبيتها؟\n[/quote]\nفقط كمرجع، نعم، التثبيت الذاتي التثبيت الرسمي يتضمن واجهة برمجة التطبيقات REST\n\nحصلت على تلميحات من موضوع أمثلة واجهة برمجة التطبيقات حول كيفية إجراء استدعاءات cURL من الجهاز الطرفي. بمجرد نجاح أوامر cURL، استخدمت هذا الموقع لتحويل إصدار سطر الأوامر إلى PHP\nhttps://hasdata.com/curl-to-php-converter\n\nيستخدم خادمي الآخر PHP كواجهة خلفية وأقوم بإجراء استدعاءات ajax من صفحة الويب إلى وظيفة على الخادم. يقوم Discourse بإخراج JSON وجافا سكريبت الذي بناه لفك تشفير ذلك. قم بالتنسيق حسب الحاجة… حساء\nلاحظ أن هذا قد يعمل فقط لأن\n\n[quote=“Andrew Rowe, post:27, topic:293709, username:Andrew_Rowe”]\nكلاهما لهما نفس النطاق الجذري على سبيل المثال\n\n\ncommunity.mydomain.com\nmydomain.com\n\n[/quote]\n وأستخدم مفتاح واجهة برمجة التطبيقات ومستخدم لكل كيفية العثور عليها هنا \nآمل أن يساعد ذلك شخصًا ما :+1:

إعجاب واحد (1)
Embedding full threads - possible?
Can I send an external URL to the Discourse API for it to return topics linking to that URL?
29

يبدو أنه يمكننا أيضًا استخدام رابط التضمين داخل منشور منتدى، مثل هذا:

<iframe> width="500" height="400" src="https://meta.discourse.org/embed/topics?tags=release-notes" frameborder=0 scrolling="no"></iframe>

(لن يعمل هنا لأنهم لم يمكّنوا موقعهم الخاص ضمن إعدادات مسؤولي iframe)

ومع ذلك، فإن scrolling="no" لا يعمل… يبدو أن هيئة المعايير ألغت scrolling في HTML5 واستبدلته بـ… لا شيء. إطارات iframe تتحسن كل عام، أليس كذلك؟

في اختباري، إذا قمت بتغيير <body> داخل iframe إلى overflow: hidden، يختفي شريط التمرير الأفقي. لم أجد طريقة لإخفاء الشريط العمودي. من خلال المكون الإضافي الخاص بي، هل هناك طريقة يمكنني من خلالها تعديل صفحة التضمين لتعيين overflow: hidden؟

30

عند تضمين قائمة بالمواضيع، ما هي الطريقة “الأفضل” إذا كنت أرغب في إنشاء معرض دوار لجميع المواضيع المضمنة مع التمرير الأفقي؟

هل هناك أي طريقة لتغيير كل رابط موضوع ليتم فتحه في علامة تبويب/نافذة جديدة؟