إذا قمت بتحميل أحدث إصدارات من Discourse، فستحصل على إمكانية تضمين قوائم المواضيع في مواقع أخرى عبر بعض أكواد JavaScript و HTML البسيطة.
الحالة الاستخدامية النموذجية لهذا هي مدونة أو موقع آخر يعتمد على المحتوى، حيث ترغب في وجود أداة جانبية على جانب الشاشة تعرض قائمة بالمواضيع. يمكنك التصفية حسب الفئة، أو الوسم، أو أي من خيارات التصفية العامة الأخرى المتاحة.
كيفية تضمين قائمة بالمواضيع
أولاً، يجب تمكين إعداد الموقع embed topics list.
ثم، في ملف HTML الخاص بك، أضف وسم <script> يتضمن كود JavaScript اللازم لتضمين مواضيع Discourse. يمكنك إضافة هذا في أي مكان تضيف فيه الأكواد البرمجية عادةً. على سبيل المثال:
<script src="http://URL/javascripts/embed-topics.js"></script>
استبدل URL بعنوان المنتدى، بما في ذلك المجلد الفرعي إذا كان موجودًا.
بعد ذلك، في وسم <body> في مستند HTML الخاص بك، أضف وسم d-topics-list للإشارة إلى قائمة المواضيع التي ترغب في تضمينها. ستحتاج أيضًا إلى استبدال URL بعنوان URL الأساسي الخاص بك هنا:
<d-topics-list discourse-url="URL" category="1234" per-page="5"></d-topics-list>
أي سمات تقدمها (باستثناء discourse-url الذي هو إلزامي) سيتم تحويلها إلى معلمات الاستعلام لبحث المواضيع. لذا، إذا كنت ترغب في البحث عن مواضيع حسب الوسم، يمكنك فعل ذلك كالتالي:
<d-topics-list discourse-url="URL" tags="cool"></d-topics-list>
إذا كان لمعلمة الاستعلام خط سفلي، فحوّله إلى شرطة. في المثال أعلاه، لاحظت على الأرجح أن per_page أصبحت per-page.
في سياقات نفس الموقع (SameSite) (أي أن الموقع المضمن ومنتدىك يشتركان في نطاق رئيسي)، سيعرف Discourse ما إذا كنت مسجلًا في المنتدى، وسيعرض النتائج وفقًا لذلك. لا تتفاجأ إذا رأيت فئات آمنة وما شابه عند تسجيل الدخول - فالمستخدمون المجهولون لن يتمكنوا من ذلك!
قائمة المعلمات
template: إما complete أو basic (الافتراضي). بينما تكون القائمة الأساسية مجرد قائمة بعناوين المواضيع، فإن النسخة الكاملة تجلب العنوان، واسم المستخدم، ورمز المستخدم، وتاريخ الإنشاء، وصورة مصغرة للموضوع.
per-page: رقم. يتحكم في عدد المواضيع التي سيتم إرجاعها.
category: رقم. يقيّد المواضيع بفئة واحدة. مرّر id الفئة المستهدفة.
allow-create: قيمة منطقية (Boolean). إذا تم تمكينها، ستحتوي الأداة المضمنة على زر “موضوع جديد”.
tags: نص. يقيّد المواضيع بتلك المرتبطة بهذا الوسم.
top_period: أحد القيم التالية: all, yearly, quarterly, monthly, weekly, daily. إذا تم تمكينه، سيعيد “أفضل” مواضيع الفترة المحددة.
أمثلة
لقد أنشأت موقعًا تجريبيًا هنا:
يجب أن تتمكن من عرض مصدر الصفحة في متصفحك لرؤية الكود، ولكن يمكنك أيضًا العثور على المصدر الكامل على GitHub:
هذه ميزة جديدة تمامًا، لذا فإن أي ملاحظات أو طلبات ستكون موضع تقدير.
تنسيق القائمة
يمكنك استخدام ميزة السمة الحالية لدينا لإضافة أنماط مخصصة لقائمة التضمين.
على سبيل المثال، بشكل افتراضي، تبدو قائمة التضمين التي تستخدم قالب complete كالتالي:
إذا كنت تريد أن تبدو مثل شبكة، على سبيل المثال، يمكنك إضافة SCSS مخصص إلى Theme > Common > Embedded CSS:
.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%;
}
}
}
}
مما سيجعلها تبدو كالتالي:
