[BEZAHLT] Cache-Busting für benutzerdefinierte Skripte, die in der Theme-Komponente definiert sind

Marktplatz
1

Was möchten Sie tun?

In diesem Thema habe ich erklärt, dass ich versucht habe, ein einfaches JavaScript hinzuzufügen, um zwischen einigen zufälligen Bildern mit api.createWidget zu wechseln, und ich habe Hilfe bei der korrekten Verwendung von api.onPageChange erhalten. Ich plane auch, etwas Ähnliches basierend auf api.decorateWidget zu tun, unter Verwendung der Lösung hier. Dies ist der endgültige Code, den ich für den Speicherort above-main-container verwendet habe:

Benutzerdefiniertes HTML/CSS in Theme-Komponente

Kopfzeile

<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("top-banner-widget", {
    tagName: "div.top-banner",
    html() {
        let banners = new Array();
        let goTo = new Array();
        
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        let bannerCount = 2;
        banners[0]="https://example.com/0.jpg";
        banners[1]="https://example.com/1.jpg";
        goTo[0]="https://google.com";
        goTo[1]="https://brave.com";
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        
        bannerCount-=1;
        let randPick = Math.round(bannerCount * Math.random());
        let theLink = goTo[randPick];
        let theImage = banners[randPick];
        
        api.onPageChange(() => {
            this.scheduleRerender();
        });
  
        return h("div#top-banner", [
          h(
            "a.custom-ad-link",
            { href: theLink },
            h("img", { src: theImage})
          )
        ]);
    }
});
</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/inject-widget">
  {{mount-widget widget="top-banner-widget"}}
</script>

CSS

.top-banner {
    padding-bottom: 1em;
    display: flex;
    clear: both;
    max-width: 100%;
    background-color: #FFFFFF;
    border: none;
    box-sizing: border-box;
    img {
        max-width: 100%;
        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
        }
    }
}

Das Problem, das ich mit diesen Methoden habe, ist, dass Benutzer einen vollständigen Seiten-Neuladevorgang durchführen müssen, wenn sich die Bildquellen-URL und/oder die href-URL ändern, da das gesamte Skript im Discourse SPA-Code zwischengespeichert wird. Daher möchte ich eine flexible Methode für das Cache-Busting für diese Art von Skript lernen, damit es bei der nächsten Seitenaufrufung des Benutzers die neueste Version des benutzerdefinierten JavaScripts abruft. Ich bevorzuge es, es so zu implementieren, wie ich es derzeit über eine Theme-Komponente tue, die ich erstelle und mit CSS und JavaScript über die Schaltfläche CSS/HTML bearbeiten hinzufüge (und nicht über ein in app.yml definiertes Plugin, eine Ember-Komponente oder ein externes GIT-Repository). Ich frage mich, ob das offizielle Discourse Ad-Plugin wiederverwendbaren Code zur Erreichung dieses Ziels enthalten würde, da Änderungen am vom Administrator definierten HTML von House Ads sofort bei der nächsten vom Benutzer navigierten Seite reflektiert werden.

Wann benötigen Sie es?

Sehr flexibel.

Was ist Ihr Budget in USD, das Sie für diese Aufgabe anbieten können?

150 USD oder weniger.

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.