[ПЛАТНО] Обход кэширования для пользовательских скриптов, определенных в компоненте темы

Маркетплейс
1

Что вы хотите сделать?

В этой теме я объяснил, что пытался добавить простой 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 источника изображения и/или URL href, поскольку весь скрипт кэшируется в коде Discourse SPA. Поэтому я хотел бы узнать гибкий метод обхода кэша для скриптов такого типа, чтобы при следующей загрузке страницы пользователем получалась последняя версия пользовательского JavaScript. Я предпочитаю реализовать это так, как делаю сейчас: через компонент темы, который я создаю, и добавлять CSS и JavaScript с помощью кнопки Редактировать CSS/HTML (а не через плагин, определенный в app.yml, компонент Ember или внешний репозиторий GIT). Интересно, содержит ли официальный плагин Discourse для рекламы какой-либо переиспользуемый код для достижения этого, поскольку изменения в HTML объявлений дома, определенные администратором, сразу отражаются на следующей странице, на которую переходит пользователь.

Когда вам это нужно?

Очень гибко.

Какой у вас бюджет в долларах США, который вы можете предложить за эту задачу?

150 долларов США или меньше.

2

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