如何仅将 CSS 应用于修改后的论坛主页？

开发
1

我正在进行一项修改，我希望这项修改只在主页上生效，但它却应用到了所有页面，我该如何只将其限制在主页上？

我使用了这个

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

}
2 
<script type="text/discourse-plugin" version="0.8">
  // 这是插件出口，后面跟着组件的自定义名称
  api.registerConnectorClass("below-site-header", "custom-homepage", {

    // 设置我们的组件
    setupComponent(args, component) {

     // 接下来我们获取站点设置 'top_menu'，
     // 将值拆分为一个数组，
     // 并添加一个前导斜杠
     var topMenuRoutes = 
        component.siteSettings.top_menu.split('|')
        .map(function(route) {return '/' + route});
      
     // 'top_menu' 设置中列出的第一个页面是您的主页
     // 让我们将其分配给一个变量
     var homeRoute = topMenuRoutes[0];
  
     // 每当页面更改时，此函数就会调用我们的代码
     api.onPageChange((url) => {

        // 检查我们是否在主页上 
        if (url === "/" || url === homeRoute ){ 
          // 如果是主页，则将 'custom-homepage' 类添加到 HTML 标签
          // 并将 'displayCustomHomepage' 设置为 true
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // 如果我们不在主页上，则删除该类
          // 并将 `displayCustomHomepage` 设置为 false
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
      });
    }
    
  });

</script>

^ 将此添加到您的 head 中，以便在主页上时将 .custom-homepage 类添加到您的 body 标签，然后 → 

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