No primeiro post, há um link para o Github com comentários explicando o recurso. Acredito que este ainda seja um recurso experimental e, para experimentá-lo, você precisa usar e Instalar o aplicativo de console Discourse Theme CLI para ajudá-lo a criar temas.
1 curtida
obrigado pela resposta manuel, já estou usando o cli, os documentos do git mostram como adicionar o html personalizado, não o componente real, quero adicionar o banner de pesquisa que já está instalado no fórum, posso chamá-lo em home.hbs ou tenho que criar um novo banner de pesquisa html para usar
Que tal exibi-lo na página inicial então?
1 curtida
sim, este é o problema, preciso adicioná-lo na página inicial, adicionei um personalizado, agora tenho 2, vou remover um do tema, obrigado novamente, muito apreciado
1 curtida
Como mencionado, quando há múltiplas iterações, funciona nas subsequentes e apenas na primeira vez o filtro não é aplicado. Portanto, funcionaria se eu adicionasse uma execução inicial “seca” ao store:
Não sei como depurar isso corretamente, mas talvez ajude a reduzir o problema.
3 curtidas
Parece um cache que precisa ser aquecido.
2 curtidas
Sim, tem a ver com a forma como pré-carregamos os dados. Tenho um PR pronto com uma possível correção: DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub
Faremos o merge no início da próxima semana.
5 curtidas
O PR acima foi mesclado @manuel, ele deve corrigir o problema para você. Obrigado novamente pelo relatório!
2 curtidas
Notei hoje que adicionar um componente a uma rota pelo novo método recomendado não funciona ao usar este modificador de tema.
import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("custom-homepage", welcomeBanner);
});
A única maneira que funciona é javascripts/connectors/custom-homepage/welcome-banner.hbs
4 curtidas
Parece funcionar para mim.. Você já renderiza outro componente? Acho que houve o problema de que só funciona com um. Ou é porque estou usando apenas em versão estável no momento.
3 curtidas
Terei que testar mais um pouco, não tenho certeza por que isso não está funcionando para mim no momento.
2 curtidas
Tenho usado isso bastante, junto com meu componente Homepage Blocks. Duas sugestões:
Classes padrão
Ajustei o componente para que ele sempre adicione uma classe homepage ao corpo e uma classe active a um link da barra lateral com href=\"/custom\". Esses recursos poderiam provavelmente ser padrões para o modificador?
api.onPageChange(() => {
const currentRoute = router.currentRoute.name;
const customHomepageLink = document.querySelector(
'.sidebar-section-link[href=\"/custom\"]'
);
if (currentRoute === "discovery.custom") {
document.body.classList.add("homepage");
if (customHomepageLink) {
customHomepageLink.classList.add("active");
}
} else {
document.body.classList.remove("homepage");
if (customHomepageLink) {
customHomepageLink.classList.remove("active");
}
}
});
});
(Inicialmente, eu queria adicionar o link da barra lateral por padrão, mas não conseguir editar tal link na interface parece ser um grande inconveniente para mim, veja How can I edit sidebar links that are added with api.addCommunitySectionLink?)
Renderização Rápida Inicial
Eu não saberia como abordar isso tecnicamente. Mas me pergunto, se aterrissarmos em uma página inicial personalizada, que normalmente exibe uma seleção limitada de conteúdo, poderíamos melhorar o FCP (First Contentful Paint) para a página inicial e renderizá-la enquanto o restante do aplicativo está carregando? Talvez eu esteja entendendo mal a natureza da arquitetura de aplicativo único aqui… parece um pouco decepcionante ser apresentado à animação de carregamento primeiro, depois a uma página bastante simples, que por si só poderia estar lá quase instantaneamente.
4 curtidas
Talvez… não tenho certeza. É relativamente fácil adicionar essa classe agora a qualquer template de componente, você só precisa usar o helper bodyClass. Por exemplo, em um tema separado fazemos isso:
<template>
{{bodyClass "custom-homepage"}}
...
</template>
Isso alcança o mesmo que o hook onPageChange, mas é mais confiável. Ele definirá essa classe apenas para o corpo enquanto o componente estiver sendo renderizado.
Se o componente já tiver todos os dados de que precisa, então sim, não há razão para que ele não possa ser renderizado com o resto do aplicativo. Na maioria dos casos, no entanto, o componente precisará fazer uma solicitação para obter dados extras, o que aciona o indicador de carregamento. Não consigo pensar em nenhuma maneira fácil de tornar esse carregamento mais rápido, para ser sincero.
Enquanto estamos aqui, fizemos uma melhoria adicional nesse recurso. Até muito recentemente, a visualização do rastreador da página inicial personalizada não era personalizável. Agora é, através de um outlet HTML do lado do servidor: DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub
5 curtidas
Eu costumava modificar meu tema usando a interface de administração, mas como agora estou recebendo um aviso de depreciação, estou olhando para a opção custom-homepage em vez disso.
Migrei meu <head> e CSS seguindo este exemplo. Minha tentativa está aqui. Até agora, tudo bem.
O problema agora é como inserir a barra de pesquisa e o componente ‘Who’s Online’.
No meu head anterior, eu simplesmente adicionava {{whos-online}} e {{search-menu}} onde eu queria no código, mas isso não funciona aqui - não consigo encontrar como injetá-los corretamente.
Alguém poderia me indicar a direção certa ou saber a sintaxe correta?
O resultado final deve parecer com isto (atualmente revertido para o meu código anterior, que logo será descontinuado).
Dei uma olhada rápida localmente e encontrei um problema com o componente WhosOnline. Mas depois de reiniciar o servidor, funcionou bem. O código que usei no componente da página inicial foi:
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
<template>
<WhosOnline />
</template>
Tenha em mente, no entanto, que SearchMenu está sempre presente, pois está no núcleo, enquanto <WhosOnline /> vem de um plugin e só é registrado se o plugin estiver habilitado.
3 curtidas
Isso resolveu o “Quem está online” e o Menu de Pesquisa! Incrível. Agora só preciso descobrir a sintaxe para obter o feed que estou vendo aqui.
Atualmente, ele está sendo exibido apenas ocultando todo o resto da página, exceto o feed, inserindo o herói, quem está online, o menu de pesquisa e os links, e, em seguida, posicionando o feed em relação a esses elementos, substituindo o CSS. Não é ideal.
Estou perto de conseguir fazer um layout de página inicial personalizado onde posso colocar todas as peças em seus devidos lugares, mas ainda não sei como obter o feed. Tentei inspecionar a página atual com o Ember e dei uma olhada nos componentes do aplicativo Discourse para ver como importá-lo, mas sem sucesso.
Alguma dica?
Eu usaria um componente como Featured Lists para destacar uma lista de tópicos com um número limitado de tópicos na página inicial. Acredito que se você inserir a lista principal, você obtém uma lista infinita que carrega preguiçosamente. Talvez seja isso que você quer? Embora por que se dar ao trabalho de adicionar uma página inicial separada, em vez de apenas construir sua página de destino diretamente nessa visualização da lista de tópicos?
Você também pode dar uma olhada no meu componente Homepage Blocks para organizar o layout da sua página inicial. Você pode adicionar componentes e organizar sua ordem através de um editor. O componente também adiciona uma classe de corpo homepage e um elemento wrapper adicional homepage-blocks que você pode usar para uma melhor estilização responsiva. Por exemplo, você poderia definir uma grade no wrapper e ajustar seu layout dependendo da largura, de modo que você tenha um layout com uma barra lateral e conteúdo principal em telas largas e um layout de linha única com todo o seu conteúdo empilhado em visualizações mais estreitas. No momento, os itens da sua barra lateral apenas encolhem, o que pode não parecer ideal em algumas larguras.
Este seria um exemplo simples de uma grade de página inicial que muda de layout dependendo da largura: https://forum.zolidar.com.
1 curtida