Inserir HTML apenas em uma página

Dev
1

Eu tenho algo assim na aba JS do meu tema:

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


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

Copiei e colei isso, funciona (apenas um exemplo)

Como faço para que isso seja renderizado apenas na página inicial ou apenas na página de categorias?

Desculpe se esta não for uma boa pergunta

2

É uma boa pergunta, não se preocupe! Isso vai 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>
        coisas em html
      </div>
    {{/if}}
  </template>
}

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

Isso cria um novo componente, que usa o serviço router e a utilidade defaultHomepage para verificar se você está na página inicial. Em seguida, o componente é renderizado no outlet.

Tem um pouco mais aqui: Add custom content that only appears on your homepage

3

Obrigado, Kris, funcionou perfeitamente. Obrigado também pelo link, estou tentando aprender.

4

Tenho uma pergunta de acompanhamento para qualquer pessoa

Meu pequeno trecho de HTML injetado cria um banner bonito na minha página inicial e carrega e funciona. Coloquei o seguinte na tag do meu tema:

document.addEventListener('DOMContentLoaded', loadMyWidget);

Funciona, mas quando navego para outra página e volto à página inicial, meu widget não carrega novamente. Tentei adicionar:

window.addEventListener('focus', loadMyWidget);

Mas isso não ajudou. Alguém pode me ajudar? Devo iniciar um novo tópico para fazer essa pergunta?

EDIÇÃO:

Acho que descobri a solução

Adicionei isso ao meu export default apiInitializer((api) => {

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

e ele recarrega meu widget ao retornar à página inicial