[PAYANT] Cache busting pour les scripts personnalisés définis dans le composant de thème

Marché
1

Que souhaitez-vous faire ?

Dans ce sujet, j’ai expliqué que j’essayais d’ajouter un simple script JavaScript pour faire pivoter quelques images aléatoires avec api.createWidget, et j’ai reçu de l’aide pour utiliser correctement api.onPageChange. Je prévois également de faire quelque chose de similaire basé sur api.decorateWidget en utilisant la solution ici. Voici le code final que j’ai fini par utiliser pour l’emplacement above-main-container :

HTML/CSS personnalisé dans le composant de thème

Head

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

Le problème que je rencontre avec ces méthodes est qu’elles obligent les utilisateurs à recharger la page manuellement lorsque l’URL de la source de l’image et/ou l’URL du href sont modifiées, car l’ensemble du script est mis en cache dans le code SPA de Discourse. Je souhaite donc apprendre une méthode flexible pour effectuer un “cache busting” pour ce type de script, afin qu’il récupère la dernière version du JavaScript personnalisé lors du prochain chargement de page de l’utilisateur. Je préfère l’implémenter comme je le fais actuellement via un composant de thème que je crée et auquel j’ajoute du CSS et du JavaScript avec le bouton Modifier CSS/HTML (et pas via un plugin défini dans app.yml ou un composant Ember ou un dépôt GIT externe). Je me demande si le plugin officiel Discourse Ad contiendrait du code réutilisable pour accomplir cela, car les modifications apportées au HTML des House Ads définies par l’administrateur se reflètent immédiatement lors de la prochaine page vers laquelle l’utilisateur navigue.

Quand avez-vous besoin que ce soit fait ?

Très flexible.

Quel est votre budget, en dollars USD, que vous pouvez offrir pour cette tâche ?

150 $ ou moins.

2

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