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 à seção “After Header” do seu tema, que então aparecerá em todas as páginas. Você pode fazer algumas acrobacias em CSS para ocultar esse conteúdo 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 visível apenas na sua página inicial.
Se você não está familiarizado com temas do Discourse, confira 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, escrito como 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>This is my homepage HTML content</h1>
{{/if}}
</template>
}
Isso cria um getter isHomepage, que verifica o serviço do router em busca do currentRouteName — se o nome da rota corresponder à sua página inicial (conforme determinado pelas 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 plugin outlet utilizar. Essas são áreas em todo o Discourse onde adicionamos um pouco de código para que os desenvolvedores possam se integrar. Você pode buscar por esses no Github, ou procurar por eles 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.gjs
import CustomHomepageContent from "../../components/custom-homepage-content";
<template><CustomHomepageContent /></template>
e é isso, basta uma única linha chamando seu componente ![]()
Este documento é controlado por versão - sugira alterações no github.
