Iniettare HTML solo su una pagina

Sviluppatore
1

Ho qualcosa del genere nella scheda JS del mio tema:

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


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

Ho copiato e incollato quel codice, funziona (è solo un esempio)

Come posso fare in modo che venga renderizzato solo nella home page o solo nella pagina delle categorie?

Scusate se questa non è una buona domanda

2

È una buona domanda, non preoccuparti! Questo funzionerà:

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>
        roba html
      </div>
    {{/if}}
  </template>
}

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

Questo crea un nuovo componente, che utilizza il servizio router e l’utilità defaultHomepage per verificare se si è nella homepage. Successivamente, il componente viene reso nell’outlet.

Ci sono alcuni dettagli in più qui: Add custom content that only appears on your homepage

3

Grazie Kris, funziona perfettamente. Grazie anche per il link, sto cercando di imparare.

4

Ho una domanda di follow-up per chiunque

Il mio piccolo pezzo di HTML iniettato crea una bella banner nella mia home page e si carica e funziona. Ho inserito il seguente codice nel tag del mio tema:

document.addEventListener('DOMContentLoaded', loadMyWidget);

Funziona, ma quando navigo verso un’altra pagina e poi torno alla home page, il mio widget non si ricarica. Ho provato ad aggiungere:

window.addEventListener('focus', loadMyWidget);

Ma non ha aiutato, qualcuno può aiutarmi? Dovrei aprire un nuovo argomento per porre questa domanda?

MODIFICA:

Penso di aver trovato la soluzione

Ho aggiunto questo alla mia export default apiInitializer((api) => {

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

e ricarica il mio widget al ritorno alla home page