Una situazione molto comune in cui ti troverai come sviluppatore di temi è la necessità di creare contenuti che appaiano solo sulla homepage della tua community.
Potresti aggiungere del codice HTML alla sezione “Dopo l’intestazione” del tuo tema, che apparirà quindi su ogni pagina. Potresti fare diversi salti mortali nel CSS per nasconderlo ovunque tranne che sulla homepage… ma invece utilizziamo 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 delle 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
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>Questo è il mio contenuto HTML della homepage</h1>
{{/if}}
</template>
}
Questo crea un getter isHomepage, che controlla il servizio router per il currentRouteName — se il nome della rotta corrisponde alla tua homepage (come stabilito dalle impostazioni del sito), restituirà true. Il template all’interno di <template>...</template> controlla quel getter e visualizza 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 passaggio dovrai decidere quale plugin outlet utilizzare. Questi sono aree in tutto Discourse dove abbiamo aggiunto un po’ di codice per gli sviluppatori per agganciarsi. Puoi cercare questi outlet su Github, o 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.gjs
import CustomHomepageContent from "../../components/custom-homepage-content";
<template><CustomHomepageContent /></template>
ed è tutto, serve solo una riga che richiama il tuo componente 
Questo documento è controllato dalla versione: suggerisci modifiche su github.