في الواقع، يمكن تضمين العناصر (Embeds) في واجهة مستخدم Discourse (مثلًا فوق قائمة المواضيع) باستخدام سمة معينة، وفي إضافة صفحات الهبوط. أما في الحالة الثانية، فقد أنشأت مثالًا باستخدام نسخة مصغرة من لعبة الديناصور. يمكنك لعبها هنا: Pavilion (متاح فقط على سطح المكتب).

لم يتطلب الأمر أي برمجة في هذه الحالة. كل ما فعلته هو رفع هذه الأصول إلى شبكة توزيع المحتوى (CDN) الخاصة بنا (سحب وإفلات المجلد إلى مساحة DigitalOcean)، ثم إنشاء صفحة بمسار “dinosaur” ونسخ ولصق كود HTML هذا (كلاهما تم عبر واجهة المستخدم الإدارية).
HTML
<div class="landing page dinosaur">
<div class="container">
<h1>لعبة الديناصور!</h1>
<canvas id="game" height="200" width="800"></canvas>
<p class="controls">اضغط على مفتاح المسافة للبدء</p>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/helpers.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/game-object.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/cactus.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/dinosaur.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/background.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/objects/score.js"></script>
<script src="https://pavilion-assets.nyc3.digitaloceanspaces.com/dinosaur/js/game.js"></script>
<script>
new Game({
el: document.getElementById("game")
});
window.onkeydown = function(e) {
return e.keyCode !== 32;
};
</script>
</div>
</div>
تطبق إضافة صفحات الهبوط إعدادات سياسة محتوى المتصفح (CSP) وإعدادات مشاركة الموارد عبر النطاقات (CORS) الخاصة بـ Discourse، والتي قمت بالفعل بإعدادها للتعامل مع السكريبتات من شبكة توزيع المحتوى الخاصة بنا (عبر إعدادات الموقع ذات الصلة).
سأقوم بنشر موضوع كامل في قاعدة المعرفة بعنوان “كيفية استضافة وتضمين الأصول” لتلك الإضافة لتغطية هذه الحالة الاستخدامية الأسبوع القادم.