Una situazione molto comune in cui ti troverai come sviluppatore di temi è la necessità di creare contenuti che vengano visualizzati solo sulla homepage della tua community.
Potresti aggiungere dell’HTML alla sezione “After Header” del tuo tema, che apparirà quindi su ogni pagina. Potresti ricorrere ad alcuni espedienti in CSS per nascondere questo contenuto ovunque tranne che sulla homepage… ma invece usiamo un tema Discourse per creare un componente con contenuti visibili solo sulla tua homepage.
Se non hai familiarità con i temi Discourse, consulta 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. Il componente sarà composto da due file, uno contenente la logica e l’altro il template.
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()}`;
}
}
Questo crea un getter isHomepage, che controlla il servizio router per currentRouteName — se il nome della rotta corrisponde alla tua homepage (come dettato dalle impostazioni del sito) restituirà true
Ora abbiamo bisogno del nostro template
javascripts/discourse/components/custom-homepage-content.hbs
{{#if this.isHomepage}}
<h1>Questo è il contenuto HTML della mia homepage</h1>
{{/if}}
Il template controlla il getter isHomepage e visualizzerà il tuo contenuto se è 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 passaggio dovrai decidere quale plugin outlet utilizzare. Queste sono aree in tutto Discourse in cui abbiamo aggiunto un piccolo codice per gli sviluppatori a cui agganciarsi. Puoi cercarli su Github, oppure sfogliarli utilizzando (deprecated) Plugin outlet locations theme component.
Per le homepage personalizzate, above-main-container è una scelta comune, quindi usiamolo.
Dobbiamo creare il nostro file di connettore nella directory corretta:
javascripts/discourse/connectors/above-main-container/custom-homepage-connector.hbs
<CustomHomepageContent />
ed è tutto, ha solo bisogno di una singola riga che richiama il tuo componente 
Questo documento è controllato tramite versione - suggerisci modifiche su github.