Ajouter du contenu personnalisé visible uniquement sur votre page d'accueil

[Discourse]

Une situation très courante à laquelle vous serez confronté en tant que développeur de thème est le besoin de créer du contenu n’apparaissant que sur la page d’accueil de votre communauté.

Vous pourriez ajouter du HTML dans la section « Après l’en-tête » de votre thème, ce qui ferait alors apparaître ce contenu sur chaque page. Vous pouvez faire quelques acrobaties en CSS pour le masquer partout sauf sur la page d’accueil… mais plutôt que cela, utilisons un thème Discourse pour créer un composant dont le contenu n’est visible que sur votre page d’accueil.

Si vous n’êtes pas familier avec les thèmes Discourse, consultez Beginner's guide to using Discourse Themes et Structure of themes and theme components

Dans votre thème Discourse, vous devrez mettre en place la structure de répertoires suivante :

javascripts/discourse/components/
javascripts/discourse/connectors/

À partir de là, nous allons créer un composant Ember. Vous pouvez en savoir plus sur les composants Ember dans leur documentation : Ember.js Guides - Guides and Tutorials - Ember Guides

Mais pour l’instant, ce sera un composant simple, écrit dans un seul fichier .gjs contenant à la fois la logique et le modèle.

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>Ceci est le contenu HTML de ma page d’accueil</h1>
    {{/if}}
  </template>
}

Ceci crée un accesseur isHomepage, qui vérifie le service routeur pour le currentRouteName — si le nom de la route correspond à votre page d’accueil (tel que défini par les paramètres du site), il retournera true. Le modèle à l’intérieur de <template>...</template> vérifie cet accesseur et n’affiche votre contenu que lorsqu’il est true. Vous pouvez ajouter n’importe quel HTML que vous voulez entre les blocs {{#if}}.

Maintenant que notre composant est créé, nous devons l’ajouter quelque part dans Discourse. Pour cette étape, vous devrez décider quel point d’extension de plugin utiliser. Il s’agit de zones à travers Discourse où nous avons ajouté un peu de code pour que les développeurs puissent s’y raccrocher. Vous pouvez rechercher ces points d’extension sur Github, ou les parcourir en utilisant (deprecated) Plugin outlet locations theme component.

Pour les pages d’accueil personnalisées, above-main-container est un choix courant, utilisons donc celui-ci.

Nous devons créer notre fichier de connecteur dans le bon répertoire :

javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs

import CustomHomepageContent from "../../components/custom-homepage-content";

<template><CustomHomepageContent /></template>

et c’est tout, il ne faut qu’une seule ligne appelant votre composant

---

Ce document est sous contrôle de version - suggérez des modifications sur github.

[Cornelius (Cornelius Ashley)]

Salut @awesomerobot,

Merci pour l’explication. J’ai essayé les étapes que vous avez suggérées, mais le after_header que j’ai implémenté s’affiche toujours sur les pages de détails des articles. Pouvez-vous me recommander comment je peux corriger cela pour qu’il ne s’affiche que sur ma page d’accueil ?

[carson]

Salut @Cornelius, puis-je voir ton code ?

[pfaffman (Jay Pfaffman)]

Il serait formidable de réécrire cela pour une utilisation moderne du système de fichiers plutôt que de tout coller dans les balises d’en-tête.

La plupart de ces anciens guides pour les thèmes sont obsolètes par rapport à la façon dont les choses sont faites maintenant.

[awesomerobot (Kris)]

Oui, c’était assez obsolète ! Je l’ai mis à jour pour refléter la structure des thèmes distants et nos composants Ember modernes.

[pfaffman (Jay Pfaffman)]

@awesomerobot

Je l’ai mis à jour pour refléter la structure des thèmes distants et de nos composants Ember modernes.

C’est génial !

@awesomerobot

Cela crée un getter isHomepage, qui vérifie le service de routage pour le currentRouteName — si le nom de la route correspond à votre page d’accueil (tel que dicté par les paramètres du site), alors il renverra true.

Et ce getter est la même chose que ceci http://ember-cli-page-object.js.org/docs/v1.11.x/api/getter.html ? Je n’en sais juste assez pour être dangereux. Si c’est la même chose, alors je modifierai l’OP pour y faire référence.

[Prayas_Arora]

@awesomerobot Salut Kris, j’ai installé Discourse localement sur mon système. Quel est le bon chemin pour ajouter ces fichiers dans mon instance locale de Discourse. Je voulais ajouter un nouveau composant de thème dans mon instance locale de Discourse.

[pfaffman (Jay Pfaffman)]

Vous créeriez votre composant de thème et l’installeriez via l’expérience utilisateur.

Installer un thème ou un composant de thème

Installer l’application de console Discourse Theme CLI pour vous aider à créer des thèmes

[carson]

Si je construis ma page d’accueil par-dessus la vue de catégorie, j’obtiens toujours mon contenu personnalisé même si je vais sur /categories qui n’est pas l’URL d’accueil. Je veux limiter cela à l’URL racine / uniquement, ce qui, je crois, était ce que faisait le code précédent, mais je me demande si defaultHomepage() devrait faire cela.

[manuel (Manuel Kostka)]

discovery.${defaultHomepage()} correspondra à la route définie comme page d’accueil par le paramètre top-menu. Elle correspondra à la fois à l’URL racine / ET à la route spécifique, comme /categories.

D’après mon expérience, il y a deux complications lors de la création d’une page d’accueil personnalisée basée sur defaultHomepage() :

• la route sur laquelle elle est construite n’est plus disponible en tant que simple vue de liste
• les membres peuvent définir leur propre page d’accueil par défaut dans les paramètres de leur interface. Il faut donc soit désactiver cette fonctionnalité, soit avoir un concept de page d’accueil qui fonctionne sur n’importe quelle route du menu supérieur.

Pour construire une page d’accueil personnalisée uniquement sur l’URL racine, on peut vérifier router.currentURL === '/'. Par défaut, cela ne correspond qu’à l’URL racine / et non à la route d’atterrissage définie par le paramètre top-menu. Cependant, il existe maintenant une logique sur les liens de la barre latérale qui vise en plus à faire correspondre une URL donnée à une route. Donc, cela ne fonctionnera pas par défaut sur les liens de la barre latérale. J’ai juste posté un sujet à ce sujet : Can I have sidebar links that don’t resolve an url to a route?

D’après ce que je comprends, il n’existe actuellement aucun moyen par défaut de construire une page d’accueil personnalisée sur l’URL racine sans cibler également une route du menu supérieur ou rencontrer des problèmes avec la barre latérale. Ce serait formidable d’avoir cette option.

[awesomerobot (Kris)]

@manuel

discovery.${defaultHomepage()} correspondra à la route définie comme page d’accueil par le paramètre top-menu. Elle correspondra à la fois à l’URL racine / ET à la route spécifique, comme /categories.

C’est exact, c’est une sorte de solution de contournement de longue date qui permet à / et à la route correspondante /route d’afficher un contenu différent. Nous avons une tâche à accomplir :

1. Permettre de définir la page d’accueil indépendamment du paramètre top_menu.
2. Ajouter un nouveau modèle de page d’accueil autonome qui peut être personnalisé sans empiéter sur une route existante.

Les pages d’accueil personnalisées sont une demande très fréquente à ce stade, nous pourrions donc certainement utiliser plus de flexibilité à cet égard.