HTML nur auf einer Seite einfügen

Entwickler
1

Ich habe so etwas in der JS-Registerkarte meines Themas:

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


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

Ich habe das kopiert und eingefügt, es funktioniert (nur ein Beispiel)

Wie kann ich dafür sorgen, dass dies nur auf der Startseite oder nur auf der Kategorien-Seite gerendert wird?

Entschuldigung, falls das keine gute Frage ist.

2

Das ist eine gute Frage, keine Sorge! Das hier wird funktionieren:

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);
});

Dadurch wird eine neue Komponente erstellt, die den router-Service und das defaultHomepage-Hilfsmittel verwendet, um zu prüfen, ob du dich auf der Startseite befindest. Anschließend wird die Komponente im Outlet gerendert.

Hier findest du weitere Informationen dazu: Add custom content that only appears on your homepage

3

Danke, Kris, das funktioniert einwandfrei. Vielen Dank auch für den Link, ich versuche, etwas zu lernen.

4

Ich habe eine Nachfolgefrage für alle

Mein kleines Stück injiziertem HTML erzeugt ein nettes Banner auf meiner Startseite und lädt und funktioniert. Ich habe Folgendes in den -Bereich meines Themes eingefügt:

document.addEventListener('DOMContentLoaded', loadMyWidget);

Es funktioniert, aber wenn ich zu einer anderen Seite navigiere und dann wieder zur Startseite zurückkehre, wird mein Widget nicht erneut geladen. Ich habe versucht, Folgendes hinzuzufügen:

window.addEventListener('focus', loadMyWidget);

Das hat jedoch nicht geholfen. Kann mir jemand helfen? Sollte ich ein neues Thema erstellen, um dies zu fragen?

EDIT:

Ich glaube, ich habe es herausgefunden

Ich habe dies zu meinem export default apiInitializer((api) => { hinzugefügt:

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

und es lädt mein Widget beim Zurückkehren zur Startseite neu.