لا، ليس بشكل مباشر. يمكنك اختيار فئات، ولكن فقط لتقييد اختيار المواضيع. لا أرغب في إضافة المزيد من المنطق لتمكين هذا الخيار.
يمكن أن تكون هناك طريقة بديلة لوضع علامة تلقائية على جميع المواضيع الجديدة، باستخدام حرف بدل:
أو استخدم مكونًا مختلفًا. إذا كان بإمكانك شرح الشكل الذي تريد تحقيقه بشكل أكبر، فربما يمكنني أن أوصي بواحد.
شكراً على ردك.
إن إضافة علامة محددة للمكون ستؤدي إلى زيادة حجم غير ضرورية على المدى الطويل إذا قررت إزالة هذا المكون في أي وقت.
لذلك، سيكون المنطق الأفضل للمكون هو الاختيار التلقائي لأحدث المشاركات إذا لم يتم تحديد علامة.
في حال قمت بإزالة المكون في أي وقت، سأضطر إلى البحث عن جميع المواضيع التي تستخدم علامة “مميز” وإزالة العلامة منها جميعًا.
يمكنك إزالة الوسوم من المواضيع بسرعة كبيرة عن طريق التصفية حسب الوسم واستخدام خيارات الإجراء المجمع:
أعتقد أنه يلتقط فقط تلك الظاهرة على الشاشة، لذلك غالبًا ما أقوم بالتمرير لأسفل لتحميلها جميعًا قبل تطبيق الإجراء المجمع. 
حسنًا، يمكنك أيضًا حذف هذا الوسم وسيختفي 
بشكل عام: المكون مشتق من مكون المربعات المميزة الرسمي. كانت الفكرة والدافع الكامل بالنسبة لي هو الحصول على مظهر البطاقات مع الوظائف التي يقدمها هذا المكون. لا أعتقد أنني سأضيف أي ميزات وظيفية إضافية فوق المكون الأصلي. السبب هو أنه فيما يتعلق بصيانة التعليمات البرمجية، أريد أن أكون قادرًا على مجرد متابعة إصلاحات التوافق للمكون الرسمي.
في حال كان أي شخص مهتمًا: لقد قمنا بتعديل مكون البطاقات المميزة للسماح للمستخدمين بالتمرير أفقيًا عبر جميع المواضيع المميزة (المصدر المستخدم للموضوع: الأحدث).
هذا هو CSS المستخدم:
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
-ms-overflow-style: none; /* إخفاء شريط التمرير لـ MS Edge */
scrollbar-width: none; /* إخفاء شريط التمرير لـ Mozilla Firefox */
scroll-snap-type: x mandatory;
scroll-padding: 8px;
}
.featured-card {
scroll-snap-align: start;
}
.featured-cards-container::-webkit-scrollbar {
display: none; /* إخفاء شريط التمرير على المتصفحات المستندة إلى Webkit (Chrome، Safari، إلخ) */
-webkit-overflow-scrolling: touch; /* على شاشات اللمس، يستمر المحتوى في التمرير لفترة بعد الانتهاء من إيماءة التمرير */
}
طلب ميزة.
هل يمكننا الحصول على خيار لعرض هذا في صفحة فئة معينة؟
على سبيل المثال، عند عرض “الردهة”، يتم عرض البطاقات المميزة هنا
الصورة المعروضة هي صورة الفئة. أستخدم سمة “Air”. التطبيق لعرض المواضيع المميزة المتعلقة بتلك الفئة من فئتها الفرعية “Frontier news”.
ما هو حجم الصورة الموصى به لصورة البطاقة؟
عظيم، لكنه لا يدعم سمة FKB
كيف يمكنني تعيين الحد الأقصى لعدد الأحرف في العنوان؟ أنا أعرض مقتطفًا في البطاقة وهو يمتد خارج الصندوق مع نص العنوان والمقتطف.
لا يوجد إعداد للتحكم في الحد الأقصى لأحرف العنوان. ومع ذلك، يمكنك زيادة إعداد ارتفاع البطاقات لتناسب المحتوى.
إذا كنت لا ترغب في التعديل في كل مرة، يمكنك تجربة CSS هذا في السمة أو المكون الخاص بك.
إنه يزيل حد ارتفاع البطاقة، ولديك الخيارات التالية:
.featured-cards-container {
$stretch_card: "true";
$max-image-height: 10em;
$max-title-lines: 3;
$max-excerpt-lines: 4;
height: inherit;
max-height: inherit;
.featured-card {
@if $stretch_card == "true" {
height: inherit;
}
a.card-content .card-details {
.topic-title {
-webkit-line-clamp: $max-title-lines;
}
.topic-excerpt {
-webkit-line-clamp: $max-excerpt-lines;
}
}
a.card-content .card-image {
height: #{$max-image-height};
min-height: #{$max-image-height};
}
}
}
آمل أن يساعد هذا!
شكرًا، لقد كان لدي بالفعل الارتفاع المحدد لديك وهو 350 قبل النشر، لكنني جربت الكود الخاص بك للتو ويبدو أنه يضبط حجم البطاقة بشكل مناسب للعناوين ذات الملخصات.
إخراج هذه، إنها عبقرية! هل هناك أي طريقة لتمكينها أيضًا لعرض الهاتف الذكي؟
لسبب ما، لم يعد التمرير الأفقي يعمل. هل تمكن أي شخص من جعله يعمل على سطح المكتب والجوال؟
جرب شيئًا كهذا:
.featured-cards-container {
overflow-x: visible;
flex-wrap: nowrap;
justify-content:left;
scroll-snap-type: x mandatory;
scroll-padding: 1.25rem;
/* يجعل شريط التمرير ملموسًا ولكنه غير مرئي */
scrollbar-width: auto;
scrollbar-color: transparent transparent;
/* أو يعرضه ولكنه رفيع */
// scrollbar-width: thin;
// scrollbar-color: #91919185 transparent;
/* يضمن أن شريط التمرير أسفل الحاوية مباشرة بدلاً من أسفل الارتفاع الأقصى. */
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
لست متأكدًا من أنها فكرة جيدة لإخفاء شريط التمرير على سطح المكتب؛ يمكن أن يكون الوصول إليه محبطًا.
يبدو لي أن الشفاف والظاهر (مع جعل الخلفية شفافة أيضًا) يبدوان جيدين. ما رأيك؟
هذا يعمل على سطح المكتب الآن! ولكن ليس على الهاتف المحمول. لقد قمت بالفعل بتجميع بعض CSS للتمرير الأفقي للجوال، ولكنه ليس متطورًا حقًا 
كما أضفت تعديل الخط لأن حجم خط العنوان كان كبيرًا جدًا بالنسبة لحجم الشاشة الصغير
.featured-cards-container {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 1rem;
margin-bottom: 1rem;
align-content: flex-start;
overflow-x: auto;
max-height: 350px;
}
.featured-cards-container .featured-card {
min-width: 90%;
}
.featured-card a.card-content .card-details .topic-title {
font-size: var(--font-up-1);
}
هل هناك أي طريقة لجعل العنصر بأكمله قابلاً للطي وتكرار نفس السلوك مثل المكون https://meta.discourse.org/t/homepage-feature-component/144264؟
“هل يحدث ‘Show excerpt is blank’ لي وحدي؟”
لقد قمت بتحديث هذا المكون ونقلت مستودعه إلى GitLab: Manuel Kostka / Discourse / Components / Featured Topics · GitLab.
يتبع الإصدار الجديد نهج تصميم مختلف قليلاً عن طريق إزالة خيارات الأنماط المحددة من إعدادات السمة. بدلاً من ذلك، فإنه يوفر ترتيبين أساسيين للتخطيط (بطاقات وقائمة) وقالبًا أنظف لإضافة تعريفات أنماط مخصصة عبر CSS.
إذا كنت ترغب في الاستمرار في استخدام المكون السابق، فهو متاح على GitHub - nolosb/discourse-featured-cards.
إنه خارج الموضوع قليلاً، لكنني أعتقد أنه نهج رائع. أجد صعوبة في عدم تقديم مليون إعداد في مكون واحد من أجل التخصيص عندما يجب عليك تبسيط الأمور للمستخدم مع الاستمرار في تقديم طريقة للتخصيص للاستخدام المتقدم/المستخدمين المتقدمين.
لم أفعل ذلك في هذه المكونة بعد، ولكن هناك نهج آخر يعجبني وهو تقديم خصائص مخصصة كطريقة قياسية لتخصيص الأنماط. على سبيل المثال، مثل هذا، على Manuel Kostka / Discourse / Components / Extra Banners · GitLab :
في المكونة، يمكنك الإعلان عن النمط باستخدام عنصر نائب للخاصية المخصصة، وقيمة احتياطية افتراضية:
background: var(--extra-banners-background, var(--secondary));