J’ai créé une page d’accueil personnalisée en :
a) ajoutant la classe .custom-homepage à la page de destination. Je l’utilise pour cibler simplement le contenu que je veux masquer/ajuster sur cette page spécifique via mon CSS personnalisé.
b) ajoutant de nouveaux composants directement dans le fichier head de mon thème par défaut, dans le HTML personnalisé.
Voici à quoi cela ressemble :
<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-main-container", "custom-homepage", {
setupComponent(args, component) {
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
var homeRoute = topMenuRoutes[0];
// Ceci appelle notre code à chaque changement de page
api.onPageChange((url) => {
// Vérifier si nous sommes sur la page d'accueil
if (url === "/" || url === homeRoute ){
// S'il s'agit de la page d'accueil, ajouter la classe 'custom-homepage' à la balise HTML
// et définir '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, supprimer la classe
// et définir `displayCustomHomepage` sur false
document.querySelector("html").classList.remove("custom-homepage");
component.set("displayCustomHomepage", false);
}
});
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/custom-homepage">
{{#if displayCustomHomepage}}
<div class="custom-homepage-wrapper mask-polygon">
<div class="custom-welcome-banner">
<h1 class="welcome-header-text">Välkommen till Sveriges idéburna byggrörelse</h1>
<p>Här kan du se färdiga och planerade projekt, hitta kunskap, få råd - och få kontakt med andra som bygger och bor ihop över hela landet.</p>
</div>
</div>
{{whos-online}}
{{search-menu}}
<div class="two-column-layout">
<div>
(Mon propre code pour l'image de la carte est ici, je vous épargne les détails)
</div>
<WANTED DIV>
(C'est ici que je veux mettre mon flux, peut-être quelque chose comme {{categories-topic- list topics=latest filter=“latest” limit=“10” … }})
</WANTED DIV>
</div>
{{/if}}
</script>
Jusqu’ici tout va bien. La page ressemble à ceci :
Le problème est que je n’ai aucun contrôle sur le flux actuel. C’est simplement le flux par défaut dont j’ai grossièrement ajusté la largeur et la position dans mon CSS personnalisé avec .custom-homepage + class pour faire de la place à la carte de gauche. Il est, par exemple, actuellement infini. J’ai besoin qu’il n’affiche que, disons, les 10 derniers articles.
Mes questions sont :
- Quelle classe dois-je masquer pour masquer le flux actuel ?
- Quelle est la syntaxe correcte pour ajouter mes derniers articles dans mon propre code à la place ? Veuillez voir la section ‘WANTED DIV’ dans le code ci-dessus.
Site en direct : https://bygg.boihop.co/
Merci beaucoup pour toute aide.