/latest와 /new 등을 CSS로 다르게 처리

제품 지원
1

홈페이지(/latest)와 /new, /unread 등의 페이지에서 스타일을 다르게 적용하고 싶습니다. 현재 CSS를 통해 이것이 가능한가요? 감사합니다!

2

현재 필터에 따라 어떤 클래스도 추가하지 않습니다. 무엇을 시도하고 계신가요?

3

저희는 미리보기 이미지(티저 이미지)를 표시하기 위해 주제 목록 미리보기 플러그인을 사용 중이며, 이를 홈페이지에만 표시하고 싶습니다: https://1e9.community/

4

테마의 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 {
  // do stuff
}

CSS를 사용하여 이미지를 숨기면 브라우저가 이미지를 다운로드하는 것을 방지하지 않습니다. 따라서 대역폭 절감 효과는 없으며, 시각적인 변경만 이루어집니다.

그리고 멋진 사이트네요 :+1:

5

정말 감사합니다! 큰 도움이 되었어요!