수정된 포럼 홈페이지에만 CSS를 적용하는 방법은?

개발
1

수정을 하나 하려고 하는데, 이 수정이 홈 페이지에서만 작동하게 하고 싶습니다. 그런데 현재 모든 페이지에 적용되고 있어요. 홈에만 적용하려면 어떻게 해야 할까요?

아래 코드를 사용했습니다.

 #main-outlet-wrapper {
    margin-top: -38px;

}
2 
<script type="text/discourse-plugin" version="0.8">
  // This is the plugin outlet, followed by a custom name for the component
  api.registerConnectorClass("below-site-header", "custom-homepage", {

    // Setting up our component
    setupComponent(args, component) {

     // Next we're getting the site setting 'top_menu',
     // splitting the values into an array,
     // and adding a leading slash
     var topMenuRoutes = 
        component.siteSettings.top_menu.split('|')
        .map(function(route) {return '/' + route});
      
     // The first page listed in the 'top_menu' setting is your homepage
     // lets assign it to a variable
     var homeRoute = topMenuRoutes[0];
  
     // This calls our code whenever the page changes
     api.onPageChange((url) => {

        // Check if we're on the homepage 
        if (url === "/" || url === homeRoute ){ 
          // If it's the homepage add the 'custom-homepage' class to HTML tag
          // and set 'displayCustomHomepage' to true
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // If we're not on the homepage remove the class
          // and set `displayCustomHomepage` to false
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
      });
    }
    
  });

</script>

^ 홈 페이지에 있을 때 body 태그에 .custom-homepage 클래스를 추가하려면 head에 이 코드를 추가한 후 → 

.custom-homepage #main-outlet-wrapper {
    margin-top: -38px;
}