Blocos da Página Inicial

Componente de tema
1
:information_source: Resumo Crie uma página inicial personalizada com componentes de bloco configuráveis
:hammer_and_wrench: Repositório Manuel Kostka / Discourse / Blocks / Homepage Blocks · GitLab
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo em Temas do Discourse? Guia para iniciantes no uso de Temas do Discourse

Instale este componente de tema

Este componente combina recursos do Right Sidebar Blocks e da rota de página inicial personalizada. Ele inicializa a rota e permite que você organize blocos de conteúdo na página inicial, oferecendo flexibilidade no layout e na apresentação do conteúdo.

Abaixo estão duas visualizações de exemplo: a primeira mostra uma página inicial com blocos básicos empilhados uns sobre os outros, enquanto a segunda demonstra o mesmo layout com estilos personalizados aplicados:

Screenshot 2025-01-14 at 10-40-23 Homepage Blocks
Screenshot 2025-01-14 at 10-40-23 Homepage Blocks1486×1654 215 KB

Screenshot 2025-01-14 at 10-41-01 Homepage Blocks
Screenshot 2025-01-14 at 10-41-01 Homepage Blocks1486×2797 321 KB

Editando blocos

Você pode personalizar blocos através das configurações do componente. Cada bloco é adicionado especificando o nome do seu componente Ember:

Uma captura de tela de uma interface com vários menus suspensos e campos de entrada de nome rotulados como block-banner, block-top-tags e block-upcoming-events, entre outros. (Legenda por IA)
Uma captura de tela de uma interface com vários menus suspensos e campos de entrada de nome rotulados como block-banner, block-top-tags e block-upcoming-events, entre outros. (Legenda por IA)726×1152 46.5 KB

Após adicionar um bloco, você pode ajustar suas propriedades usando os parâmetros disponíveis:

A imagem mostra uma interface de usuário com campos de texto para um banner de bloco, incluindo opções de título, subtítulo e classe. (Legenda por IA)
A imagem mostra uma interface de usuário com campos de texto para um banner de bloco, incluindo opções de título, subtítulo e classe. (Legenda por IA)726×753 28.9 KB

Blocos disponíveis

Você pode adicionar qualquer componente Ember usando o nome do componente. Além disso, tenho uma coleção de blocos disponíveis em Blocks · GitLab. Estes são principalmente variações do Right Sidebar Blocks.

Para informações detalhadas sobre cada bloco, como o nome do componente, parâmetros disponíveis e layout do modelo, consulte o arquivo README deles.

Uma página de documentação para o componente de bloco Featured List, detalhando parâmetros e código de modelo para criar uma lista de destaque com vários filtros. (Legenda por IA)
Uma página de documentação para o componente de bloco Featured List, detalhando parâmetros e código de modelo para criar uma lista de destaque com vários filtros. (Legenda por IA)964×1114 57.8 KB

23 curtidas
2

Isso é muito legal, Manuel, bom trabalho! :+1:

4 curtidas
3

@nolo isso também poderia ser usado para criar páginas personalizadas e adicioná-las à navegação da barra lateral?

4

Esta é uma solução de layout para a rota da página inicial personalizada. Claro que você pode usar algo semelhante em outras rotas personalizadas. Mas adicionar e integrar essas rotas em seu aplicativo é uma tarefa diferente.

1 curtida
7

Erro: Tentativa de resolver um componente dinâmico com uma definição de string, block-banner em um template de modo estrito. No modo estrito, o uso de strings para resolver definições de componentes é proibido. Você pode importar a definição do componente e usá-la diretamente.
Eu estou tendo esse erro.

1 curtida
8

Obrigado por relatar @xin_wei. Embora eu não consiga reproduzir, na versão do Discourse 3.6.0.beta1-dev e usando meu componente de bloco de Manuel Kostka / Discourse / Blocks / Banner · GitLab.