كيفية عمل منشور منزلق؟

[jrgong]

أستكشف الخيارات حاليًا أيضًا. يجب أن يكون من الممكن تنفيذه كمكون سمة (theme component)، أليس كذلك؟

على سبيل المثال، هناك مكتبات تحويل ماركداون إلى شرائح يمكن استخدامها:

فيما يلي أفضل مستودعات GitHub لهذا الغرض، مرتبة حسب مدى سهولة تكييفها لتصبح مكون سمة في ديسكورس.

1. Remark.js (موصى به بشدة لـ Discourse)

• GitHub: gnab/remark

• كيف يعمل: تم تصميم Remark ليعمل بالكامل داخل المتصفح. أنت تزوده بسلسلة ماركداون (حيث يتم فصل الشرائح بـ ---)، ويقوم ديناميكيًا بإنشاء HTML/CSS المطلوب للعرض التقديمي أثناء التنقل.

• لماذا يناسب ديسكورس: نظرًا لأنه لا يتطلب أي خطوات بناء، يمكنك بسهولة تحميل البرنامج النصي remark.min.js عبر مكون السمة الخاص بك في ديسكورس. يمكنك التقاط ماركداون من منشور المستخدم وتمريره مباشرة إلى محرك Remark.

2. Reveal.js

• GitHub: hakimel/reveal.js

• كيف يعمل: Reveal.js هو القوة الضاربة للعروض التقديمية على الويب. على الرغم من أنه إطار عمل أساسي للعروض التقديمية بتنسيق HTML، إلا أنه يحتوي على مكون إضافي مدمج لتحويل ماركداون.

• لماذا يناسب ديسكورس: غني جدًا بالميزات (ملاحظات المتحدث، تصدير PDF، رسوم متحركة، تنسيق الرياضيات). يمكنه العمل من جانب العميل، ولكنه أثقل بكثير من Remark.js. ستحتاج إلى تحميل مكتبة Reveal الأساسية، ومكون ماركداون الإضافي، وسمة CSS الخاصة بـ Reveal في مكون ديسكورس الخاص بك.

3. Marp (نظام بيئي لعروض ماركداون التقديمية)

• GitHub: marp-team/marp

• كيف يعمل: Marp هو المعيار الحديث للشرائح المكتوبة بماركداون، حيث يستخدم مفهومًا يسمى “التوجيهات” (Directives) للتعامل مع تصميم CSS مباشرة داخل بيانات الواجهة الأمامية (frontmatter) لـ ماركداون.

• لماذا يناسب ديسكورس: يعتمد Marp بشكل كبير على أدوات سطر الأوامر (CLI) و Node.js للعرض. ومع ذلك، فإنهم يقدمون Marpit (@marp-team/marpit)، وهو الإطار الأساسي الذي يمكنه تحليل ماركداون وإخراج HTML/CSS. سيتطلب تنفيذ هذا في ديسكورس تجميع Marpit في ملف JavaScript من جانب العميل باستخدام أداة مثل Webpack أو Rollup قبل تحميله كمكون سمة.

---

كيفية تنفيذ هذا كمكون سمة في ديسكورس

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

فيما يلي مخطط عالي المستوى لكيفية بنائه:

1. تحديد مشغل (Trigger): قرر كيف سيخبر المستخدمون ديسكورس بعرض الشرائح. طريقة رائعة هي استخدام لغة كتل تعليمات برمجية محددة، مثل ```slides أو غلاف BBCode الخاص بـ ديسكورس مثل [wrap=slides].

2. تحميل المكتبة: في ملف about.json الخاص بمكون السمة الخاص بك، قم بتضمين البرنامج النصي الخارجي لـ Remark.js أو Reveal.js بحيث يتم تحميله عندما يزور المستخدم المنتدى.

3. تزيين المحتوى المُطهو (Cooked Content): استخدم واجهة برمجة تطبيقات جافاسكريبت الخاصة بـ ديسكورس (api.decorateCookedElement) للبحث عن كتل المشغل الخاصة بك كلما تم عرض منشور.

4. العرض: عندما تجد واجهة برمجة التطبيقات كتلة ```slides، فإنها تخفي كتلة التعليمات البرمجية الافتراضية، وتنشئ حاوية \u003cdiv\u003e جديدة، وتقوم بتهيئة مكتبة الشرائح داخل تلك الحاوية باستخدام النص الخام من كتلة التعليمات البرمجية.