Una situación muy común en la que te encontrarás como desarrollador de temas es la necesidad de crear contenido que solo se muestre en la página de inicio de tu comunidad.
Es posible que añadas algo de HTML a la sección “After Header” de tu tema, que luego aparecerá en todas las páginas. Puedes hacer algunos trucos en CSS para ocultar esto en cualquier lugar excepto en la página de inicio… pero en su lugar, usemos un tema de Discourse para crear un componente con contenido que solo sea visible en tu página de inicio.
Si no estás familiarizado con los temas de Discourse, consulta Beginner's guide to using Discourse Themes y Structure of themes and theme components
En tu tema de Discourse, deberás configurar la siguiente estructura de directorios:
javascripts/discourse/components/
javascripts/discourse/connectors/
A partir de aquí, vamos a crear un componente Ember. Puedes encontrar más información sobre los componentes Ember en su documentación: Ember.js Guides - Guides and Tutorials - Ember Guides
Pero por ahora, este será un componente simple. El componente constará de dos archivos, uno que contiene la lógica y otro la plantilla.
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()}`;
}
}
Esto crea un getter isHomepage, que comprueba el servicio del enrutador para el currentRouteName — si el nombre de la ruta coincide con tu página de inicio (según lo dictado por la configuración del sitio), devolverá true
Ahora necesitamos nuestra plantilla
javascripts/discourse/components/custom-homepage-content.hbs
{{#if this.isHomepage}}
<h1>Este es el contenido HTML de mi página de inicio</h1>
{{/if}}
La plantilla comprueba el getter isHomepage y mostrará tu contenido si es true. Puedes añadir cualquier HTML que desees entre los bloques {{#if}}.
Ahora que nuestro componente está creado, necesitamos añadirlo a Discourse en algún lugar. Para este paso, deberás decidir qué plugin outlet utilizar. Estas son áreas en todo Discourse donde hemos añadido un poco de código para que los desarrolladores se conecten. Puedes buscar estos en Github, o explorarlos usando (deprecated) Plugin outlet locations theme component.
Para las páginas de inicio personalizadas, above-main-container es una opción común, así que usémosla.
Necesitamos crear nuestro archivo de conector en el directorio correcto:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.hbs
<CustomHomepageContent />
y eso es todo, ¡solo necesita una sola línea llamando a tu componente 
Este documento está controlado por versiones: sugiere cambios en github.