إنشاء معاينات روابط غنية باستخدام Onebox

:bookmark: هذا دليل لإنشاء معاينات روابط غنية باستخدام Onebox في Discourse. يشرح كيفية إنشاء Oneboxes، واستخدام Oneboxing المضمن، وتجنب Oneboxing، واستخدام الروابط التشعبية، والتعامل مع إطارات iframe المتقدمة.

:person_raising_hand: مستوى المستخدم المطلوب: جميع المستخدمين

يقوم Onebox بتحويل روابط الويب الخاصة بك إلى مقتطفات معاينة مفيدة تساعد القراء على معرفة المزيد عن الهدف قبل النقر عليه.

ملخص

يغطي هذا الدليل كيفية:

  • إنشاء Oneboxes
  • استخدام Oneboxing المضمن
  • تجنب Oneboxing
  • استخدام الروابط التشعبية بدلاً من Oneboxing
  • التعامل مع إطارات iframe المتقدمة

إنشاء Onebox

لإنشاء Onebox، ما عليك سوى لصق أي رابط في منشور على سطر منفصل، كما يلي:

https://www.google.com/

ينتج عن ذلك:

يدعم Onebox علامات oEmbed و OpenGraph العامة، ولديه قواعد مخصصة للمواقع الشائعة مثل ويكيبيديا، وتويتر، وأمازون، ويوتيوب، وغيرها.

حاول لصق الروابط في منشوراتك وشاهد ما يحدث. تذكر فقط أنه لكي يعمل Oneboxing، يجب أن يكون الرابط على سطر منفصل!

Oneboxing المضمن

مع تفعيل إعداد الموقع enable inline onebox on all domains (يتم تفعيل هذه الميزة افتراضيًا)، سيؤدي لصق الرابط ضمن النص إلى استبدال الرابط الخام بعنوان الصفحة، مثل هذا Understanding Discourse Trust Levels

like this https://blog.discourse.org/2018/06/understanding-discourse-trust-levels/

تجنب Oneboxes

إذا كنت تريد أن يظهر الرابط كرابط خام بسيط وغير مزخرف، ضعه بين أقواس \u003c و \u003e:

\u003chttps://blog.discourse.org/2018/06/understanding-discourse-trust-levels/\u003e

بدلاً من ذلك، يمكنك وضع مسافة قبل الرابط أو أي أحرف بعد الرابط.

استخدام الروابط التشعبية

يمكنك إضافة رابط إلى النص الخاص بك عن طريق:

  • استخدام زر السلسلة في شريط أدوات المحرر
  • تحديد بعض النصوص في منشورك ولصق رابط من الحافظة الخاصة بك
  • إضافة روابط Markdown / BBCode / HTML:
[link here](https://example.com)
[link=https://example.com]link here[/link]
\u003ca href=\"https://example.com\"\u003elink here\u003c/a\u003e

إطارات iframe المتقدمة

افتراضيًا، يتم حظر \u003ciframe\u003e لأسباب أمنية. ومع ذلك، إذا كانت إطارات iframe من مصادر موثوقة للغاية، يمكن لمسؤول Discourse إضافة هذا النطاق إلى إعداد الموقع allowed iframes.

قد تحتاج أيضًا إلى لصق رمز التضمين الكامل، مثل الرمز الخاص بالخريطة أدناه:

\u003ciframe src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24202.451099423397!2d-74.06201522657554!3d40.68924937923285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2suk!4v1533203877892\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen\u003e\u003c/iframe\u003e

ينتج عن ذلك:

\u003ciframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24202.451099423397!2d-74.06201522657554!3d40.68924937923285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2suk!4v1533203877892\" width="600" height="450" frameborder="0" style="border:0" allowfullscreen\u003e\u003c/iframe\u003e

موارد إضافية

لمزيد من المعلومات واستكشاف أخطاء Oneboxes وإصلاحها، يرجى زيارة الموضوع ذي الصلة أدناه:

46 إعجابًا