Fiz uma página inicial personalizada da seguinte forma:
a) adicionando a classe .custom-homepage à página de destino. Eu a uso para simplesmente direcionar o conteúdo que quero ocultar/ajustar nessa página específica através do meu CSS personalizado.
b) adicionando quaisquer novos componentes diretamente no arquivo head do meu tema padrão em HTML personalizado.
É assim que se parece:
<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});
// A primeira página listada na configuração 'top_menu' é a sua página inicial
var homeRoute = topMenuRoutes[0];
// Isso chama nosso código sempre que a página muda
api.onPageChange((url) => {
// Verifica se estamos na página inicial
if (url === "/" || url === homeRoute ){
// Se for a página inicial, adicione a classe 'custom-homepage' à tag HTML
// e defina 'displayCustomHomepage' como true
document.querySelector("html").classList.add("custom-homepage");
component.set("displayCustomHomepage", true);
} else {
// Se não estivermos na página inicial, remova a classe
// e defina `displayCustomHomepage` como 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>
(Meu próprio código para a imagem do mapa está aqui, pouparei vocês)
</div>
<WANTED DIV>
(É aqui que quero colocar meu feed, talvez algo como {{categories-topic- list topics=latest filter=“latest” limit=“10” … }})
</WANTED DIV>
</div>
{{/if}}
</script>
Até agora tudo bem. A página se parece com isto:
O problema é que não tenho nenhum controle sobre o feed atual. É simplesmente o feed padrão que eu direcionei grosseiramente a largura e a posição no meu CSS personalizado com .custom-homepage + class para abrir espaço para o mapa à esquerda. Ele é, por exemplo, atualmente infinito. Preciso que ele mostre apenas, digamos, os últimos 10 posts.
Minha pergunta é:
- Qual classe devo ocultar para ocultar o feed atual?
- Qual é a sintaxe correta para adicionar meus posts mais recentes no meu próprio código em vez disso? Por favor, veja a seção ‘WANTED DIV’ no código acima.
Site no ar: https://bygg.boihop.co/
Muito obrigado por qualquer ajuda.