مرحبًا يا رفاق،
قررت فريق الموارد البشرية الاعتماد على مربعات التصنيفات بدلاً من قائمة التصنيفات كما هو موضح أدناه.
ومع ذلك، يريدون أيضًا أن تظهر أحدث المواضيع في أسفل التصنيفات، كما هو الحال في صفحة مجتمع ريفولوت.
أنا أواجه صعوبة في معرفة كيفية تحقيق ذلك، سواء من خلال إعداد موجود مسبقًا أو باستخدام CSS.
هل لديكم أي أفكار؟
Try to work with components
You can use: categories-and-latest-topics
In this mode, there is a connection and categories and recent topics.
<script type='text/x-handlebars' data-template-name='components/categories-and-latest-topics'>
<div class='column categories'>
{{categories-only categories=categories}}
</div>
<div class='column'>
{{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>
</script>
Next, you override: categories-only
<script type='text/x-handlebars' data-template-name='components/categories-only'>
The contents of the file...
</script>
Perhaps from this file it is necessary to move the box with the categories, or to do simply to change the css.
Options think very many.
Another option is to simply structure your category directly
Then just change the css, which is even easier. )
Ideally I would prefer to do it like you have suggested, however, there isnt a way to display categories in a grid layout and have the latest topics below. 
I suggest building a static header customization if your categories do not change much. Then you could have whatever layout you like above the topic list.
لقد قمت ببناء هذا أو ما يشابهه لعدة مواقع حتى الآن. إذا قمت بإدراج هذا في قسم <head> من سمة موقعك، فسيتم عرض جميع الفئات في أعلى الصفحة الرئيسية (وأيضًا في /latest بافتراض أنها نفس الصفحة الرئيسية).
كل ما تحتاجه بعد ذلك هو إضافة كود CSS لتنسيق هذا التخطيط بالطريقة التي تريدها. يُعد هذا مقدمة جيدة لاستخدام واجهة برمجة التطبيقات (API) وقوالب Handlebars بشكل عام.
<script type="text/discourse-plugin" version="0.8">
const ajax = require('discourse/lib/ajax').ajax;
api.registerConnectorClass('below-site-header', 'custom-homepage', {
setupComponent(args, component) {
component.set('hostname', window.location.hostname);
api.onPageChange((url, title) => {
if (url == "/" || url == "/latest"){
$('html').addClass('show-custom-homepage'); // إظهار الصفحة الرئيسية
component.set('displayCustomHomepage', true);
ajax("/site.json").then (function(result){ // جلب قائمة الفئات
let categoryName = [];
result.categories.forEach(function(categories){
categoryName.push(categories);
});
component.set('categoryName', categoryName);
});
}
else { // إخفاء الصفحة الرئيسية
$('html').removeClass('show-custom-homepage');
component.set('displayCustomHomepage', false);
}
});
}
});
</script>
<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/custom-homepage'>
{{#if displayCustomHomepage}}
<div class="custom-homepage-wrapper">
<div class="wrap wrap-category-boxes">
<div class="homepage-category-boxes">
{{#each categoryName as |c|}}
<a href="/c/{{c.slug}}" class="box">
<div class="homepage-category-box">
{{#if c.uploaded_logo}}
<div class="category-image-wrapper">
<img class="homepage-category-image" src="{{c.uploaded_logo.url}}" />
</div>
{{/if}}
<h2>{{#if c.read_restricted}}<i class="fa fa-lock"> </i>{{/if}}{{c.name}}</h2>
<p>{{c.description}}</p>
</div>
</a>
{{/each}}
</div>
</div>
</div>
{{/if}}
</script>
It looks very nice. How I can to add Font Awesome 5 instead of images? Many thanks!
مرحبًا،
شكرًا لك على مقتطف الكود هذا! أنا أعمل على مشروع يتطلب القيام ببعض الأمور وفق هذا المبدأ (ليس بالضرورة الفئات)، وأود إدراجه مباشرة في الإضافة التي أقوم بتطويرها.
أعرف أين أضع قالب Handlebars، لكنني لا أستطيع العثور على المجلد/الملف الذي يجب أن أضع فيه جافا سكريبت. هل يمكنك إخباري بكيفية المتابعة؟
شكرًا لك،
ثيموتيب
أحب هذه الفكرة! أتطلع لاختبار مكون هذا القالب أو الإضافة
نعم، كان هناك خطأ! شكرًا لتبليغك عنه. لقد قمت بإصلاح الكود في المنشور أعلاه.
قمنا بتفعيل الوضع الصارم في جافا سكريبت، مما يعني أنه يجب إعلان categoryName = [];، وكان إصلاح السطر بتغييره إلى let categoryName = [];.
هذا الرابط على جيت هاب، والذي نأمل أن يكون المكون الذي يقوم بهذه الحيلة، يعطي خطأ 404.
أعتقد أن هذا المكون موجود الآن هنا:
حسنًا.. سأحتاج إلى معرفة كيفية جعل ملف hbs يعمل كشيء يمكنني إضافته إلى discourse. أعتقد أنه يجب علي استخدام هذا كملف في مكون وأحتاج إلى إنشاء برنامج تعليمي حول ذلك؟
لقد رأيت برنامجًا تعليميًا واحدًا بموضوع بسيط. هل هذا هو الاتجاه الصحيح الذي يجب أن أسلكه؟
لم أقم بهذا من قبل، لذا لا أعرف الإجابة. بالتأكيد سيكون دليل مطور الثيمات مكانًا جيدًا للبدء.\n\nhttps://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648\n\nإذا بحثت في تلك الصفحة عن "Mounting widgets"، سترى مثالاً لعرض ودجة في جزء مختلف من الصفحة.\n\nقد يكون موضوع howto هذا مفيدًا أيضًا كمثال:\n\nhttps://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949
سأعلمك إذا نجحت. في غضون ذلك، قمت بتثبيت سمة Air وأنا سعيد جدًا، لكنني ما زلت أرغب في الحصول على أحدث المشاركات أسفل مواضيع الفئة.
كنت مبرمج msvc++ قبل 25 عامًا، وتمكنت من بناء تطبيق Flutter تم إصداره على Play Store. ومع ذلك، فإن واجهات برمجة التطبيقات مفتوحة المصدر ليست سهلة بالنسبة لي. سنرى كيف تسير الأمور. سأنشر تحديثًا عندما أتمكن من ذلك.
هل نجحت؟ أتطلع لفعل الشيء نفسه، وأتساءل عما إذا كان هناك شيء سهل أم أحتاج إلى التعمق في السمة وقضاء بعض الوقت.
باستخدام إعداد نمط صفحة فئة سطح المكتب “صناديق مع فئات فرعية”، تمكنت من إنشاء مكون سمة وإضافة رمز أسفل الصناديق. أنا الآن أكتشف كيفية سرد أحدث المواضيع على الموقع بأكمله.
<script type="text/x-handlebars" data-template-name="/connectors/category-boxes-after-boxes/mwp">
<div class='column'>
{{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>
</script>
المشكلة هي أن هذا ببساطة يقول “لقد انتهيت من كل شيء”.
لقد استسلمت. أنا أستخدم الآن معظم الأشياء القياسية.