شكرًا على التحديث! 
باستخدام بعض حيل CSS، قمت بنقل الصورة الرمزية كطبقة فوق الصورة المصغرة في وضع البطاقة:
.featured-topics__topic-details .topic-author {
position: absolute;
right: 30px;
bottom: 30px;
}
كيف يمكنني تقليل ارتفاع div الخاص بـ (المؤلف الموضوع) (الأرجواني) إلى 0 وإزالة الفجوة بشكل فعال مع الاستمرار في عرض الصورة الرمزية؟
إذا كنت تكتب CSS مخصصًا، فبدلاً من إضافة رمز يعيد كتابة أحد التخطيطات المحددة مسبقًا، أوصي باختيار لا شيء كخيار تخطيط في إعدادات السمة وتحديد أنماطك من البداية.
على سبيل المثال، يمكنك نسخ ورقة أنماط البطاقات الافتراضية وتحديد حاوية featured-topics__topic-details كشبكة. بعد ذلك، يمكنك وضع عناصرها بالضبط كما تريد، بدلاً من تحريكها باستخدام إعلانات مطلقة.
هذه فكرة رائعة!
في الوقت الحالي، نحن راضون عن القالب وبعض التعديلات الطفيفة على CSS لاختباره مبدئيًا. بمجرد وصولنا إلى مرحلة تحسين معدل النقر إلى الظهور، سنتبع نصيحتك على الأرجح. 
لست متأكدًا مما إذا كان هذا سلوكًا متوقعًا أم يمكن اعتباره خطأً:
عند تعيين ثلاثة مواضيع في الإعدادات، ولكن يتم عرض اثنين فقط، يظهر فراغ حيث يجب أن يكون الموضوع الثالث. سيكون من المثالي تغيير حجم البطاقات لملء العرض بالكامل في مثل هذه الحالات.
إذا كان أي شخص مهتمًا باستخدام التمرير الأفقي على الهاتف المحمول، فإليك بعض أكواد CSS التي توصلت إليها (بمساعدة الذكاء الاصطناعي). وهي تتضمن أيضًا بعض تعديلات التمرير والتكبير التي وجدتها أكثر ملاءمة لحالتنا.
ملاحظة: حاولت أيضًا إنشاء بعض أقراص التنقل دون إضافة HTML، لكن هذا كان بالتأكيد مبالغًا فيه.
@media (max-width: 750px) {
.featured-topics__topic-wrapper {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 1em 10vw; /* تباعد جانبي لرؤية البطاقات المجاورة */
gap: 1rem; /* تباعد متناسق بين البطاقات */
overscroll-behavior-x: contain; /* منع تداخل التمرير الزائد */
scroll-behavior: smooth; /* تمرير سلس */
scrollbar-width: none; /* إخفاء شريط التمرير */
-ms-overflow-style: none;
}
.featured-topics__topic-wrapper::-webkit-scrollbar {
display: none; /* إخفاء شريط التمرير في متصفحات WebKit */
}
.featured-topics__topic-container {
flex: 0 0 80vw; /* بطاقات أضيق للرؤية الجانبية */
min-width: 280px; /* الحد الأدنى للعرض للشاشات الصغيرة */
scroll-snap-align: center; /* توسيط كل بطاقة عند التمرير */
height: unset !important; /* ارتفاع متناسق */
}
.featured-topics__topic-thumbnail {
height: 40vw;
width: 100%;
}
}
مرحباً، شكراً جزيلاً على هذه المكونة، أحببتها!
هل يمكن لأحد المساعدة في تعديل حجم العنوان لأنه كبير جداً حالياً؟
تلقيت رسالة خطأ تفيد بأن هذا المكون يحتاج إلى تحديث للتوافق مع تغييرات Discourse الأساسية القادمة. هل يعرف أحد ما إذا كان هناك تحديث مخطط له؟
لقد قمت بتحديث المكون في وقت سابق من هذا العام. تحتاج إلى إعادة التثبيت لاستخدام الإصدار الجديد، انظر: 
Featured Topics - #38 by manuel
أوه، شكراً جزيلاً لك، لقد نجح الأمر!
الشيء الوحيد الذي لا يمكنني إصلاحه (لقد كنت أضايق Chat GPT لمدة ساعة على ما أعتقد…) هو ارتفاع البطاقات - أي نصائح حول كيفية تقليله/إزالته؟
مرحباً مانويل - هل هناك طريقة لجعل مكون السمة الرائع الخاص بك هنا يتجاهل الصور (بحيث يعرض مقتطفًا بدلاً من ذلك)؟
لدي العديد من المواضيع المميزة بدون صور (والتي أريد تمييزها)، لكنها تبدو سيئة للغاية بجوار تلك التي تحتوي على صور. أيضًا، أنا مهتم بالنص أكثر من الصور.
يقوم قالب المكون بعرض محتوى متنوع متاح حول موضوع ما. ثم يتم ضبط المظهر النهائي باستخدام قواعد الأنماط. على سبيل المثال، عند تحديد “بطاقات” كتخطيط، يتم إخفاء مقتطفات الموضوع عند وجود صورة مميزة وإظهارها كلما لم تكن موجودة:
إذا كنت تريد دائمًا عرض المقتطف وعدم عرض صورة أبدًا، يمكنك إما تحديد “لا شيء” للتخطيط وإضافة ورقة الأنماط الخاصة بك. أو تجاوز القواعد الموجودة في تخطيط البطاقات التي تعرض الصورة وتخفي المقتطف.
أعتقد أن هذا مكون رائع!
أعترف بأنني قضيت يومين أو ثلاثة أيام أحاول تعلم إنشاء مكون سمة (theme component) للقيام بالضبط بما يفعله هذا المكون. لا أشعر أن ذلك كان وقتاً ضائعاً لأنني تعلمت الكثير، ولكني أتمنى لو أنني اتبعت نصيحة ask.discourse في وقت أبكر واطلعت على هذا المكون.
شيء واحد لا أستطيع فهمه
أعجبني تنسيق البطاقة (card layout) ولكني أود عرض صورة مصغرة ومقتطف (excerpt) في تنسيق البطاقة. أي تلميحات ستكون موضع تقدير
بدلاً من ذلك، استقريت على تنسيق القائمة (list layout) ولكني أردت تغيير بعض الأشياء. أضفتها إلى علامة التبويب common.css الخاصة بي. ربما سيساعد هذا شخصًا آخر
لإزالة وسم الموضوع (topic tag)
.featured-topics__topic-tag {
display: none;
}
لإزالة الصورة الرمزية للمؤلف (author avatar)
.featured-topics__wrapper .topic-author {
display: none;
}
لإزالة رابط الفئة (category link)
.featured-topics__wrapper .category-link {
display: none;
}
تعديل للإضافة:
سأترك المنشور الأصلي أعلاه سليماً ولكني أردت أن أضيف
كيفية إظهار المقتطف في عرض البطاقة
.featured-topics__topic-container.thumbnail .topic-excerpt {
display: contents;
}
أيضًا، لقد أعجبت بتنسيق عرض القائمة على سطح المكتب أكثر من تنسيق البطاقة ولكنه يبدو فظيعًا على الهاتف المحمول. الصورة المصغرة على اليسار والعنوان والمقتطف في عمود ضيق على اليمين. لم أكتشف كيفية جعل النص يلتف حول الصورة المصغرة أو تكديس كل شيء في عمود واحد.
بما أنني اكتشفت كيفية جعل الصورة المصغرة والمقتطف يظهران في تنسيق البطاقة، والذي يبدو لائقًا على الهاتف المحمول، فقد تحولت إلى ذلك التنسيق لأنني أشك في أن معظم المستخدمين يتصفحون الموقع عبر الهاتف.
هذا مكون وإضافة رائعة، شكرًا لعملك!
ومع ذلك، يبدو أن هناك مشكلة في عدم تحديث المحتويات، إلا إذا قمت بتحديث الصفحة بالكامل، عن طريق الضغط على F5.
كمثال:
أقوم بإنشاء موضوع بالعلامة المميزة (featured tag).
أذهب إلى الصفحة الرئيسية عن طريق النقر على لافتة الموقع.
يجب أن يظهر الموضوع تحت “المواضيع المميزة” (Featured Topics)، ولكنه لا يظهر.
إنه يظهر فقط إذا قمت بتحديث الصفحة عبر مفتاح F5. حتى لو نقرت على اللافتة مرة أخرى، فلن يظهر.
نفس الشيء إذا حذفت منشورًا مميزًا. لن يختفي إلا إذا قمت بتحديث الصفحة عبر F5 أو إذا أغلقت علامة التبويب وفتحت الصفحة مرة أخرى.
أي أفكار عن سبب حدوث ذلك؟
هذا مقصود. المحتوى لا يتم تحديثه ديناميكيًا، بل يعكس الحالة عند تحميل الصفحة. عادةً لا تمثل هذه مشكلة لأن المحتوى سيكون محدثًا لأي زائر جديد للموقع.