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

Entwickler
1

Ich nehme eine Änderung vor und möchte, dass diese Änderung nur auf der STARTSEITE funktioniert, aber sie wird auf allen Seiten übernommen. Wie kann ich sie nur auf der Startseite belassen?

Ich habe Folgendes verwendet:

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

}
2 
<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“