Modernisierung von Inline-Script-Tags für Templates & JS API

Entwickler
42

Hallo nochmal, vielen Dank für die Antwort!

Dies ist der aktuell funktionierende, veraltete Code, den ich in den Abschnitt \u003chead\u003e einer Theme-Komponente einfüge. Es gibt auch etwas unterstützendes CSS, aber das ist hier kein Problem.

<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("post:after", helper => {
  const firstPost = helper.attrs.firstPost;
  const h = helper.h;
  if (firstPost) {
        let images = new Array();
        let goTo = new Array();
        
/////////////////////////////////
        let imageCount = 2;
        images[0]="/uploads/3213123123123213.jpg";
        goTo[0]="https://example1.com";
        images[1]="/uploads/djdsalklkjdsajsalkd.jpg";
        goTo[1]="https://example2.com";
/////////////////////////////////
        
        imageCount-=1;
        let randPick = Math.round(imageCount * Math.random());
        let theLink = goTo[randPick];
        let theImage = images[randPick];

    return h("div.p3-image", [
      h(
        "a.p3-image-link",
        { href: theLink,  target: "_blank" },
        h("img", { src: theImage})
      )
    ]);
  }
});
</script>

Ich habe weiter nach Code-Schnipseln gesucht und daran herumgebastelt, die etwas Ähnliches wie das, was ich brauche, mit den modernen Methoden tun, und das ist es, was ich bisher zum Laufen gebracht habe, eingefügt in den Reiter JS:

import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";

function customizePost(api) {
  api.renderAfterWrapperOutlet(
    "post-article-content",
    class extends Component {
      static shouldRender(args) {
        return args.post?.post_number === 1;
      }

      <template>Hallo, funktioniert das? Ja, aber CSS-Divs werden benötigt...</template>
      
    }
  );
}

export default {
  name: "not-sure-if-I-need-this",
  initialize() {
    withPluginApi((api) => {
      customizePost(api);
    });
  }
};
43

Versuchen Sie etwas wie:

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.renderAfterWrapperOutlet(
    "post-article-content",
    class extends Component {
      @tracked imageSrc = "";
      @tracked imageHref = "";

      constructor() {
        super(...arguments)
        this.randomImageLink();
      }

      static shouldRender(args) {
        return args.post?.post_number === 1;
      }
      
      randomImageLink() {
        let images = new Array();
        let goTo = new Array();
        
        /////////////////////////////////
        let imageCount = 2;
        images[0]="/uploads/3213123123123213.jpg";
        goTo[0]="https://example1.com";
        images[1]="/uploads/djdsalklkjdsajsalkd.jpg";
        goTo[1]="https://example2.com";
        /////////////////////////////////
        
        imageCount-=1;
        let randPick = Math.round(imageCount * Math.random());
        this.imageSrc = goTo[randPick];
        this.imageHref = images[randPick];
      }

      <template>
        <div class="p3-image">
          <a href={{this.imageHref}} target="_blank">
            <img src={{this.imageSrc}} />
          </a>
        </div>
      </template>
    }
  );
});

Sie müssen dies möglicherweise noch etwas anpassen, ich habe es noch nicht vollständig getestet.

44

Entschuldigung für meine langsame Antwort, ich bin in letzter Zeit etwas überlastet.

Sehr schön!! Es funktioniert, nur diese beiden waren vertauscht:

        this.imageSrc = images[randPick];
        this.imageHref = goTo[randPick];

Ich muss mich über die @tracked-Sache (ich weiß nicht einmal, wie ich es nennen soll, getrackte Variablen?) sowie diese constructor-Methode informieren. Ich verstehe auch nicht ganz, wie oder an welchem Punkt die shouldRender-Methode ausgeführt wird.

Vielen Dank für Ihre Hilfe dabei, ich hätte diese Methoden niemals von selbst verwendet.

45

Sie können sich hier über getrackte Eigenschaften informieren: here.

Ich glaube, shouldRender wird ganz am Anfang ausgeführt, da es entscheidet, ob die Vorlage sichtbar ist oder nicht.

Froh, dass ich helfen konnte!

46 
<script type="text/x-handlebars" data-template-name="/connectors/discovery-list-container-top/moe-counter-banner">
  <div class="moe-counter-container">
    <img 
      src="https://moe.8845.top/get/?name=Monika&theme=booru-helltaker" 
      alt="Besucherzähler" 
      class="moe-counter-img"
    >
  </div>
</script>

Wie sollte ich das schreiben? Ich bin auch neu hier.

47

Versuche dies:

api.renderInOutlet(
  "discovery-list-container-top",
  <template>
    <div class="moe-counter-container">
      <img 
        src="https://moe.8845.top/get/?name=Monika&theme=booru-helltaker" 
        alt="Visitor Counter" 
        class="moe-counter-img"
      >
    </div>
  </template>
);

Siehe:

49

Die Unterstützung für diese Inline-Skript-Tags wurde in der neuesten Version von Discourse entfernt