Una situazione molto comune in cui ti ritroverai come sviluppatore di temi è la necessità di creare contenuti che vengano visualizzati solo nella homepage della tua community.
Potresti aggiungere del codice HTML alla sezione “After Header” del tuo tema, che apparirebbe quindi su ogni pagina. Potresti fare vari giri di valzer con il CSS per nasconderlo ovunque tranne che nella homepage… ma invece usiamo un tema Discourse per creare un componente con contenuti visibili solo nella tua homepage.
Se non sei familiare con i temi Discourse, dai un’occhiata a Beginner's guide to using Discourse Themes e Structure of themes and theme components
Nel tuo tema Discourse dovrai impostare la seguente struttura di directory:
javascripts/discourse/components/
javascripts/discourse/connectors/
Da qui creeremo un componente Ember. Puoi trovare maggiori informazioni sui componenti Ember nella loro documentazione: Ember.js Guides - Guides and Tutorials - Ember Guides
Ma per ora questo sarà un componente semplice, scritto come un singolo file .gjs contenente sia la logica che il 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>
}
Questo crea un getter isHomepage, che verifica il servizio router per il currentRouteName — se il nome della rotta corrisponde alla tua homepage (come determinato dalle impostazioni del sito), restituirà true. Il template all’interno di <template>...</template> verifica quel getter e mostra i tuoi contenuti solo quando è true. Puoi aggiungere qualsiasi HTML desideri tra i blocchi {{#if}}.
Ora che il nostro componente è stato creato, dobbiamo aggiungerlo da qualche parte in Discourse. Per questo passo dovrai decidere quale plugin outlet utilizzare. Queste sono aree in tutto Discourse in cui abbiamo aggiunto un po’ di codice per consentire agli sviluppatori di agganciarsi. Puoi cercarli su Github, oppure sfogliarli usando (deprecated) Plugin outlet locations theme component.
Per le homepage personalizzate, above-main-container è una scelta comune, quindi usiamo quello.
Dobbiamo creare il nostro file connector nella directory corretta:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs
import CustomHomepageContent from "../../components/custom-homepage-content";
<template><CustomHomepageContent /></template>
ed è tutto, serve solo una singola riga che richiama il tuo componente 
Questo documento è sotto controllo di versione - suggerisci modifiche su github.