Uma situação muito comum em que você se encontrará como desenvolvedor de temas é a necessidade de criar conteúdo que apareça apenas na página inicial da sua comunidade.
Você pode adicionar algum HTML à seção “After Header” (Depois do Cabeçalho) do seu tema, que aparecerá em todas as páginas. Você pode fazer alguns malabarismos com CSS para ocultar isso em todos os lugares, exceto na página inicial… mas, em vez disso, vamos usar um tema do Discourse para criar um componente com conteúdo que é visível apenas na sua página inicial.
Se você não está familiarizado com os temas do Discourse, consulte Beginner's guide to using Discourse Themes e Structure of themes and theme components
No seu tema do Discourse, você precisará configurar a seguinte estrutura de diretórios:
javascripts/discourse/components/
javascripts/discourse/connectors/
A partir daqui, vamos criar um componente Ember. Você pode encontrar mais informações sobre componentes Ember na documentação deles: Ember.js Guides - Guides and Tutorials - Ember Guides
Mas, por enquanto, este será um componente simples. O componente consistirá em dois arquivos, um contendo a lógica e outro o template.
javascripts/discourse/components/custom-homepage-content.js
import Component from "@glimmer/component";
import { service } from "@ember/service";
import { defaultHomepage } from "discourse/lib/utilities";
export default class CustomHomepageContent extends Component {
@service router;
get isHomepage() {
const { currentRouteName } = this.router;
return currentRouteName === `discovery.${defaultHomepage()}`;
}
}
Isso cria um getter isHomepage, que verifica o serviço de roteador para o currentRouteName — se o nome da rota corresponder à sua página inicial (conforme ditado pelas configurações do site), ele retornará true
Agora precisamos do nosso template
javascripts/discourse/components/custom-homepage-content.hbs
{{#if this.isHomepage}}
<h1>Este é o meu conteúdo HTML da página inicial</h1>
{{/if}}
O template verifica o getter isHomepage e exibirá seu conteúdo se for true. Você pode adicionar qualquer HTML que desejar entre os blocos {{#if}}.
Agora que nosso componente foi criado, precisamos adicioná-lo ao Discourse em algum lugar. Para esta etapa, você precisará decidir qual plugin outlet utilizar. Estas são áreas em todo o Discourse onde adicionamos um pouco de código para os desenvolvedores se conectarem. Você pode pesquisar por eles no Github, ou navegá-los usando (deprecated) Plugin outlet locations theme component.
Para páginas iniciais personalizadas, above-main-container é uma escolha comum, então vamos usar essa.
Precisamos criar nosso arquivo de conector no diretório correto:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.hbs
<CustomHomepageContent />
e é isso, precisa apenas de uma única linha chamando seu componente ![]()
Este documento é controlado por versão - sugira alterações no github.
