Uma situação muito comum que você 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 na seção “Após o Cabeçalho” do seu tema, que então aparecerá em todas as páginas. Você pode dar alguns pulos no CSS para ocultar isso em todos os lugares, exceto na página inicial… mas, em vez disso, vamos usar um tema Discourse para criar um componente com conteúdo visível apenas na sua página inicial.
Se você não está familiarizado com temas Discourse, confira Beginner's guide to using Discourse Themes e Structure of themes and theme components
No seu tema 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, isso será um componente simples, escrito em um único arquivo .gjs contendo tanto a lógica quanto o template.
javascripts/discourse/components/custom-homepage-content.gjs
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()}`;
}
<template>
{{#if this.isHomepage}}
<h1>Este é o meu conteúdo HTML da página inicial</h1>
{{/if}}
</template>
}
Isso cria um getter isHomepage, que verifica o serviço de roteador em busca do currentRouteName — se o nome da rota corresponder à sua página inicial (conforme definido nas configurações do site), ele retornará true. O template dentro de <template>...</template> verifica esse getter e exibe seu conteúdo apenas quando ele é 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 saída de plugin utilizar. Estas são áreas ao longo do Discourse onde adicionamos um pouco de código para que desenvolvedores possam se conectar. Você pode pesquisar no Discourse por essas saídas no Github, ou navegar por elas usando (deprecated) Plugin outlet locations theme component.
Para páginas iniciais personalizadas, above-main-container é uma escolha comum, então vamos usá-la.
Precisamos criar nosso arquivo conector no diretório correto:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs
import CustomHomepageContent from "../../components/custom-homepage-content";
<template><CustomHomepageContent /></template>
e é isso, basta uma única linha chamando seu componente ![]()
Este documento está sob controle de versão — sugira alterações no github.
