Можно ли стилизовать страницы «Latest» и «Top» по отдельности?

Поддержка
1

Я столкнулся с проблемой при попытке стилизовать элементы на страницах «Последние» и «Лучшие». У них одинаковый класс body (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`) {
       ...
    }

Но мне бы очень хотелось узнать, существует ли решение, не требующее написания собственного скрипта.

3

Спасибо за ответ. Я продолжил поиск и нашел другое решение, которое помогло мне и может быть полезно кому-то еще:

// JavaScript — скрыть целевой элемент на основе текста в URL. В данном случае текст в URL — «top», а ID элемента, который нужно скрыть, — «main-title».

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

Редактирование: Это не работает как задумано. Проблема в том, что для срабатывания JavaScript-функции необходимо обновить страницу.

4

Да, решение @manuel — хороший подход для простого выполнения задач. Использование window.location.href может вызвать проблемы с получением правильного URL из-за runloop в 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;
}