كيفية تطبيق 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>

^ Add this to your head to add a .custom-homepage class to your body tag when you’re on the homepage, then → 

.custom-homepage #main-outlet-wrapper {
    margin-top: -38px;
}
4 إعجابات