[有料] テーマコンポーネントで定義されたカスタムスクリプトのキャッシュ破壊

[rahim123]

何をしたいですか？

こちらのトピック で、api.createWidget を使っていくつかのランダムな画像をローテーションさせる簡単な JavaScript を追加しようとしていたこと、そして api.onPageChange の正しい使い方について助けを得たことを説明しました。また、こちら の解決策に基づいて、api.decorateWidget を使用して同様のことを行う予定です。above-main-container の場所に使用した最終的なコードは次のとおりです。

テーマコンポーネントでのカスタム HTML/CSS

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

これらの方法で問題となっているのは、画像ソース URL や href URL が変更された場合に、スクリプト全体が Discourse の SPA コードにキャッシュされるため、ユーザーが手動でページをリロードする必要があることです。そのため、ユーザーが次にページをロードしたときに、カスタム JavaScript の最新バージョンを取得するための、キャッシュ破壊のための柔軟な方法を学びたいです。これは、私が現在行っているように、テーマコンポーネントとして実装し、CSS/HTML の編集 ボタンで CSS と JavaScript を追加することを好みます（app.yml で定義されたプラグインや Ember コンポーネント、外部 GIT リポジトリ経由ではありません）。公式 Discourse Ad プラグインに、これを達成するための再利用可能なコードが含まれているかどうか疑問に思っています。ハウス広告の管理者が定義した HTML の変更は、ユーザーが次に移動するページにすぐに反映されるためです。

いつまでに必要ですか？

非常に柔軟です。

このタスクに提供できる予算はいくらですか？

150ドル以下。