Injecter du HTML uniquement sur une page

Dev
1

J’ai quelque chose comme ça dans l’onglet JS de mon thème :

import { apiInitializer } from "discourse/lib/api";


export default apiInitializer("0.11.1", (api) => { 
    api.renderInOutlet("above-main-container",
        <template>
            <div>
              du code HTML
            </div>
        </template>
     );
});

J’ai copié-collé ça, ça marche (c’est juste un exemple)

Comment faire pour que cela s’affiche uniquement sur la page d’accueil ou uniquement sur la page des catégories ?

désolé si ce n’est pas une bonne question

2

C’est une bonne question, ne vous en faites pas ! Voici ce qui fonctionnera :

import Component from "@glimmer/component";
import { service } from "@ember/service";
import { apiInitializer } from "discourse/lib/api";
import { defaultHomepage } from "discourse/lib/utilities";

class HomepageOnly extends Component {
  @service router;

  get shouldShow() {
    return this.router.currentRouteName === `discovery.${defaultHomepage()}`;
  }

  <template>
    {{#if this.shouldShow}}
      <div>
        du contenu HTML
      </div>
    {{/if}}
  </template>
}

export default apiInitializer((api) => {
  api.renderInOutlet("above-main-container", HomepageOnly);
});

Cela crée un nouveau composant, qui utilise le service router et l’utilitaire defaultHomepage pour vérifier si vous êtes sur la page d’accueil. Le composant est ensuite rendu dans la prise (outlet).

Vous trouverez plus d’informations ici : Add custom content that only appears on your homepage

3

Merci Kris, ça fonctionne parfaitement. Merci aussi pour le lien, j’essaie d’apprendre.

4

J’ai une question complémentaire pour tout le monde

Mon petit bout de HTML injecté crée un joli bandeau sur ma page d’accueil, et il se charge et fonctionne. J’ai placé ce qui suit dans la balise <head> de mon thème :

document.addEventListener('DOMContentLoaded', loadMyWidget);

Ça fonctionne, mais quand je navigue vers une autre page puis que je reviens sur la page d’accueil, mon widget ne se recharge pas. J’ai essayé d’ajouter :

window.addEventListener('focus', loadMyWidget);

Mais cela n’a pas aidé. Quelqu’un peut-il m’aider ? Devrais-je ouvrir un nouveau sujet pour poser cette question ?

MODIF :

Je pense avoir trouvé la solution.

J’ai ajouté ceci à mon export default apiInitializer((api) => { :

api.onPageChange(() => {
  const myWidget = document.querySelector("#widget-container");
  if (myWidget) {
    window.loadMyWidget();
  }
 });

et cela recharge mon widget lorsque je reviens sur la page d’accueil.