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.
Podrías agregar algo de HTML en la sección “Después del encabezado” de tu tema, lo cual aparecería en todas las páginas. Podrías hacer varios trucos en CSS para ocultarlo en todas partes excepto en la página de inicio… pero en su lugar, usemos un tema de Discourse para crear un componente con contenido visible solo 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, necesitarás configurar la siguiente estructura de directorios:
javascripts/discourse/components/
javascripts/discourse/connectors/
A partir de aquí, vamos a crear un componente de Ember. Puedes encontrar más información sobre los componentes de Ember en su documentación: Ember.js Guides - Guides and Tutorials - Ember Guides.
Pero por ahora, esto será un componente simple, escrito en un solo archivo .gjs que contiene tanto la lógica como la plantilla.
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 es mi contenido HTML de la página de inicio</h1>
{{/if}}
</template>
}
Esto crea un getter isHomepage, que verifica el servicio del enrutador en busca del currentRouteName. Si el nombre de la ruta coincide con tu página de inicio (según lo establecido en la configuración del sitio), entonces devolverá true. La plantilla dentro de <template>...</template> verifica ese getter y solo muestra tu contenido cuando es true. Puedes agregar cualquier HTML que desees entre los bloques {{#if}}.
Ahora que hemos creado nuestro componente, necesitamos agregarlo a Discourse en algún lugar. Para este paso, debes decidir qué punto de conexión de plugin utilizar. Estos son áreas en Discourse donde hemos agregado un poco de código para que los desarrolladores puedan conectarse. Puedes buscar estos puntos en GitHub o explorar la lista en (deprecated) Plugin outlet locations theme component.
Para páginas de inicio personalizadas, above-main-container es una opción común, así que usemos esa.
Necesitamos crear nuestro archivo de conexión en el directorio correcto:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs
import CustomHomepageContent from "../../components/custom-homepage-content";
<template><CustomHomepageContent /></template>
Y eso es todo, solo necesita una línea que llame a tu componente 
Este documento está controlado por versiones: sugiere cambios en GitHub.