He creado una página de inicio personalizada:
a) añadiendo la clase .custom-homepage a la página de destino. La uso para apuntar simplemente al contenido que quiero ocultar/ajustar en esa página específica a través de mi CSS personalizado.
b) añadiendo cualquier componente nuevo directamente en el archivo head del HTML personalizado de mi tema predeterminado.
Así es como se ve:
<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 primera página listada en la configuración 'top_menu' es tu página de inicio
var homeRoute = topMenuRoutes[0];
// Esto llama a nuestro código cada vez que la página cambia
api.onPageChange((url) => {
// Comprueba si estamos en la página de inicio
if (url === "/" || url === homeRoute ){
// Si es la página de inicio, añade la clase 'custom-homepage' a la etiqueta HTML
// y establece 'displayCustomHomepage' a true
document.querySelector("html").classList.add("custom-homepage");
component.set("displayCustomHomepage", true);
} else {
// Si no estamos en la página de inicio, elimina la clase
// y establece `displayCustomHomepage` a 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>
(Mi propio código para la imagen del mapa está aquí, te ahorraré los detalles)
</div>
<WANTED DIV>
(Aquí es donde quiero poner mi feed, quizás algo como {{categories-topic- list topics=latest filter=“latest” limit=“10” … }})
</WANTED DIV>
</div>
{{/if}}
</script>
Hasta ahora todo bien. La página se ve así:
El problema es que no tengo ningún control sobre el feed actual. Es simplemente el feed predeterminado al que he apuntado aproximadamente el ancho y la posición en mi CSS personalizado con .custom-homepage + class para dejar espacio al mapa de la izquierda. Actualmente es infinito, por ejemplo. Necesito que solo muestre, digamos, las últimas 10 publicaciones.
Mi pregunta es:
- ¿Qué clase debo ocultar para ocultar el feed actual?
- ¿Cuál es la sintaxis correcta para añadir mis últimas publicaciones en mi propio código en su lugar? Por favor, mira la sección ‘WANTED DIV’ en el código de arriba.
Sitio en vivo: https://bygg.boihop.co/
Muchas gracias por cualquier ayuda.