Вставка HTML только на одной странице

Разработка
1

У меня в JS-вкладке моей темы есть что-то вроде этого:

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


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

Я скопировал и вставил это, и оно работает (просто пример).

Как сделать так, чтобы это отображалось только на главной странице или только на странице категорий?

Извините, если это не очень хороший вопрос.

2

Это хороший вопрос, не волнуйтесь! Это будет работать:

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

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

Это создает новый компонент, который использует службу router и утилиту defaultHomepage для проверки, находитесь ли вы на главной странице. Затем компонент отображается в выделенном месте.

Здесь есть немного больше информации: Add custom content that only appears on your homepage

3

Спасибо, Крис, всё работает отлично. Также благодарю за ссылку, стараюсь учиться.

4

У меня есть дополнительный вопрос для всех

Мой небольшой фрагмент внедрённого HTML-кода создаёт красивый баннер на главной странице, и он загружается и работает. Я добавил следующее в раздел <head> своей темы:

document.addEventListener('DOMContentLoaded', loadMyWidget);

Это работает, но когда я перехожу на другую страницу, а затем возвращаюсь на главную, мой виджет больше не загружается. Я попробовал добавить:

window.addEventListener('focus', loadMyWidget);

Но это не помогло. Может ли кто-нибудь помочь мне? Стоит ли мне создать новую тему, чтобы задать этот вопрос?

ИЗМЕНЕНИЕ:

Кажется, я разобрался

Я добавил это в свой `export default apiInitializer((api) => {

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

и теперь мой виджет перезагружается при возврате на главную страницу