دمج قائمة مواضيع Discourse على موقع خارجي

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

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

:person_raising_hand: مستوى المستخدم المطلوب: مسؤول

ملخص

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

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

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

  1. انتقل إلى لوحة تحكم مسؤول Discourse وانقر على site_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 - عدد المواضيع المراد عرضها
  • category - معرف الفئة لتصفية المواضيع من فئة معينة
  • tags - تصفية المواضيع حسب علامات محددة
  • allow-create - عند تعيينه على true، يعرض زر “موضوع جديد”
  • 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 > Customize > Themes. انقر على السمة الحالية أو الافتراضية وانقر على 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 > Customize > Embedding > Allowed Hosts في موقع Discourse الخاص بك. تأكد من تضمين النطاق الفرعي الصحيح (على سبيل المثال، إذا كان موقعك يستخدم www.example.com، فأضف www.example.com بدلاً من example.com فقط).

أخطاء تحميل النص البرمجي

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

الحل:

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

سلوك سياق SameSite

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

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

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

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

س: كيف يمكنني تضمين مواضيع مع صور مميزة؟
ج: استخدم المعلمة template="complete" في عنصر <d-topics-list> الخاص بك لعرض المواضيع مع الصور المصغرة والصور المميزة.

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

موارد إضافية

9 إعجابات
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)
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

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

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