“최신” 페이지와 “인기” 페이지를 각각 다른 스타일로 설정할 방법이 있나요?

제품 지원
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>

수정: 의도한 대로 작동하지 않습니다. 문제는 자바스크립트 함수를 트리거하려면 페이지를 새로고침해야 한다는 것입니다.

4

네, @manuel님의 솔루션은 상당히 간단하게 원하는 것을 달성하기 위한 좋은 접근 방식입니다. window.location.href를 사용하면 Ember의 runloop 때문에 올바른 URL을 가져오는 데 문제가 발생할 수 있습니다.

현재 하시는 작업을 더 "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;
}