هل هناك طريقة لتنسيق صفحة "الأحدث" وصفحة "الأعلى" بشكل منفصل؟

الدعم
1

لقد واجهت مشكلة أثناء محاولة تنسيق العناصر في صفحة “الأحدث” وصفحة “الأعلى”. كلاهما يشترك في نفس فئة الجسم بالضبط (class=“staff docked navigation-topics”)، مما يعني أنني لا أستطيع تنسيقهما بشكل فردي. صفحة “الفئات” لديها فئة مختلفة (class=“staff docked navigation-categories categories-list”) لذا يمكنني تنسيقها بدون مشكلة. هل لدى أي شخص حل؟

2

يمكنك إضافة فئة مخصصة أو القيام بأي شيء بناءً على المسار (discovery.top، discovery.latest). سيكون الجزء المركزي شيئًا مثل

@discourseComputed("router.currentRouteName")
  canDisplay(currentRouteName) {
    if (currentRouteName === `discovery.top`) {
       ...
    }

ولكن أود أن أسمع إذا كان هناك حل لا يتضمن برنامجًا نصيًا مخصصًا.

إعجابَين (2)
3

شكراً على الرد. واصلت البحث ووجدت حلاً آخر نجح معي وقد يفيد شخصًا آخر أيضًا:

// جافاسكريبت - إخفاء العنصر المستهدف بناءً على النص الموجود في عنوان URL. في هذه الحالة، كان النص الموجود في عنوان URL هو “top” والمعرف الذي أردت إخفاءه هو “main-title”.


<script>
    window.onload = function() {
      if (window.location.href.indexOf('/top')) {
        document.querySelectorAll('#main-title')[0].style.display = 'none';
      }
    };
</script>

تعديل: هذا لا يعمل كما هو مقصود. المشكلة هي أنك بحاجة إلى تحديث الصفحة لتشغيل دالة جافاسكريبت.

إعجاب واحد (1)
4

نعم، حل @manuel هو نهج جيد لتحقيق الأشياء ببساطة. باستخدام window.location.href قد تواجه مشكلات في الحصول على عنوان URL الصحيح بسبب حلقة تشغيل Ember على أي حال.

لتعديل ما تفعله إلى نهج “Ember” أكثر، يمكنك القيام بشيء مثل هذا:

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.querySelectorAll('#main-title')[0].style.display = 'none';
    }
  });
</script>

ومع ذلك، من الأفضل على الأرجح أن تضيف ببساطة فئة body وتنسق تلك الفئة، مما سيسمح لك أيضًا بإجراء تغييرات تنسيق أكثر تعقيدًا.

<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.body.classList.add('route-discovery-top');
    } else {
      document.body.classList.remove('route-discovery-top');
    }
  });
</script>

.route-discovery-top #main-title {
    display: none;
}
3 إعجابات