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

Entwickler
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.

2 „Gefällt mir“