[付费] 主题组件中定义的自定义脚本的缓存破坏

[rahim123]

您想做什么？

在 这个主题 中，我解释了我试图添加一些简单的 JavaScript 来使用 api.createWidget 在几个随机图片之间轮播，并且我得到了关于正确使用 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 插件是否包含任何可重用代码来实现这一点，因为对管理员定义的 House Ads HTML 的更改会立即反映在用户导航到的下一个页面上。

您何时需要完成？

非常灵活。

您能为这项任务提供的预算（美元）是多少？

150 美元或以下。