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

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