Wie wende ich CSS nur auf die geänderte Foren-Homepage an?

<script type="text/discourse-plugin" version="0.8">
  // Dies ist der Plugin-Outlet, gefolgt von einem benutzerdefinierten Namen für die Komponente
  api.registerConnectorClass("below-site-header", "custom-homepage", {

    // Einrichten unserer Komponente
    setupComponent(args, component) {

     // Als Nächstes holen wir uns die Site-Einstellung 'top_menu',
     // teilen die Werte in ein Array auf
     // und fügen einen führenden Schrägstrich hinzu
     var topMenuRoutes = 
        component.siteSettings.top_menu.split('|')
        .map(function(route) {return '/' + route});
      
     // Die erste Seite, die in der Einstellung 'top_menu' aufgeführt ist, ist Ihre Homepage
     // weisen wir sie einer Variablen zu
     var homeRoute = topMenuRoutes[0];
  
     // Dies ruft unseren Code jedes Mal auf, wenn sich die Seite ändert
     api.onPageChange((url) => {

        // Prüfen, ob wir uns auf der Homepage befinden 
        if (url === "/" || url === homeRoute ){ 
          // Wenn es die Homepage ist, fügen Sie die Klasse 'custom-homepage' zum HTML-Tag hinzu
          // und setzen Sie 'displayCustomHomepage' auf true
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // Wenn wir uns nicht auf der Homepage befinden, entfernen Sie die Klasse
          // und setzen Sie `displayCustomHomepage` auf false
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
      });
    }
    
  });

</script>

^ Fügen Sie dies zu Ihrem head hinzu, um Ihrer body-Tag eine Klasse .custom-homepage hinzuzufügen, wenn Sie sich auf der Homepage befinden, und dann →

.custom-homepage #main-outlet-wrapper {
    margin-top: -38px;
}
4 „Gefällt mir“