Inyectar HTML solo en una página

Desarrollador
1

Tengo algo como esto en la pestaña JS de mi tema:

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


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

Lo copié y pegué, funciona (es solo un ejemplo)

¿Cómo hago para que esto se renderice solo en la página de inicio o solo en la página de categorías?

perdón si esta no es una buena pregunta

2

Es una buena pregunta, ¡no te preocupes! Esto funcionará:

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

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

Esto crea un nuevo componente que utiliza el servicio router y la utilidad defaultHomepage para verificar si estás en la página de inicio. Luego, el componente se representa en el outlet.

Hay un poco más de información aquí: Add custom content that only appears on your homepage

3

Gracias, Kris, funciona perfectamente. También gracias por el enlace, estoy intentando aprender.

4

Tengo una pregunta de seguimiento para cualquiera

Mi pequeño fragmento de HTML inyectado crea un buen banner en mi página de inicio y se carga y funciona. Puse lo siguiente en la pestaña de mi tema:

document.addEventListener('DOMContentLoaded', loadMyWidget);

Funciona, pero cuando me voy a otra página y luego vuelvo a la página de inicio, mi widget no se carga de nuevo. Intenté agregar:

window.addEventListener('focus', loadMyWidget);

Pero eso no ayudó, ¿alguien puede ayudarme, debería iniciar un nuevo tema para preguntar esto?

EDIT:

Creo que lo descubrí

Agregué esto a mi export default apiInitializer((api) => {

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

y recarga mi widget al volver a la página de inicio