Una situación muy común con 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 agregues algo de HTML a la sección “Después del encabezado” de tu tema, lo cual aparecerá entonces en cada página. Puedes hacer varias acrobacias 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 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, necesitarás configurar la siguiente estructura de directorios:
javascripts/discourse/components/
javascripts/discourse/connectors/
Desde 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, será un componente simple, escrito como un único 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>This is my homepage HTML content</h1>
{{/if}}
</template>
}
Esto crea un getter isHomepage, que verifica el servicio de router 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), 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 nuestro componente está creado, necesitamos agregarlo a Discourse en algún lugar. Para este paso, necesitarás decidir qué outlet de plugin utilizar. Estas son áreas en todo Discourse donde hemos agregado un poco de código para que los desarrolladores se conecten. Puedes buscar en Discourse en Github, o buscarlos usando (deprecated) Plugin outlet locations theme component.
Para páginas de inicio personalizadas, above-main-container es una elección común, así que usemos esa.
Necesitamos crear nuestro archivo de conector 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 sola línea que llame a tu componente ![]()
Este documento está bajo control de versiones - sugiere cambios en github.
