عنوان /latest بشكل مختلف عن /new وما إلى ذلك عبر CSS

أود أن يكون لدينا نمط مختلف في الصفحة الرئيسية (التي هي /latest) مقارنة بـ /new و /unread وما إلى ذلك. هل هذا ممكن عبر CSS في الوقت الحالي؟ شكرًا!

نحن لا نضيف أي فئات بناءً على الفلتر الحالي. ما الذي تحاول فعله؟

نستخدم إضافة معاينة قائمة المواضيع لعرض صور المعاينة، ونود أن تظهر هذه الصور في الصفحة الرئيسية فقط: https://1e9.community/

يمكنك إضافة هذا إلى علامة التبويب header في نسختك، وسيتم إضافة الفئات إلى وسم <body> أثناء التنقل

<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:d-navigation", {
  didInsertElement() {
    document.body.classList.add(`filter-mode-${this.filterType}`);
  },

  willDestroyElement() {
    document.body.classList.remove(`filter-mode-${this.filterType}`);
  }
});
</script>

سيتم إضافة filter-mode-FILTERMODE كفئة على النحو التالي

filter-mode-top
filter-mode-new
filter-mode-latest

يمكنك بعد ذلك دمج ذلك مع فئة navigation-topics لجعل CSS محددًا كما يلي

.navigation-topics.filter-mode-new {
  // قم بتنفيذ الإجراء
}

لاحظ أن استخدام CSS لإخفاء الصور لن يمنع المتصفح من تحميلها. لن تحقق أي توفير في عرض النطاق الترددي من خلال ذلك، بل ستحصل فقط على تغييرات بصرية.

أيضًا، موقع رائع :+1:

شكرًا جزيلاً! مساعدة رائعة!