Je fais une modification et je veux que cette modification ne fonctionne que sur la page d’accueil, mais elle prend toutes les pages, comment puis-je la laisser uniquement sur la page d’accueil ?
J’ai utilisé ceci
#main-outlet-wrapper {
margin-top: -38px;
}
<script type="text/discourse-plugin" version="0.8">
// C'est la sortie du plugin, suivie d'un nom personnalisé pour le composant
api.registerConnectorClass("below-site-header", "custom-homepage", {
// Configuration de notre composant
setupComponent(args, component) {
// Ensuite, nous récupérons le paramètre du site 'top_menu',
// divisons les valeurs en un tableau,
// et ajoutons une barre oblique initiale
var topMenuRoutes =
component.siteSettings.top_menu.split('|')
.map(function(route) {return '/' + route});
// La première page listée dans le paramètre 'top_menu' est votre page d'accueil
// assignons-la à une variable
var homeRoute = topMenuRoutes[0];
// Ceci appelle notre code chaque fois que la page change
api.onPageChange((url) => {
// Vérifiez si nous sommes sur la page d'accueil
if (url === "/" || url === homeRoute ){
// Si c'est la page d'accueil, ajoutez la classe 'custom-homepage' à la balise HTML
// et définissez 'displayCustomHomepage' sur true
document.querySelector("html").classList.add("custom-homepage");
component.set("displayCustomHomepage", true);
} else {
// Si nous ne sommes pas sur la page d'accueil, supprimez la classe
// et définissez `displayCustomHomepage` sur false
document.querySelector("html").classList.remove("custom-homepage");
component.set("displayCustomHomepage", false);
}
});
}
});
</script>
^ Ajoutez ceci à votre head pour ajouter une classe .custom-homepage à votre balise body lorsque vous êtes sur la page d’accueil, puis →
.custom-homepage #main-outlet-wrapper {
margin-top: -38px;
}