[유료] 테마 컴포넌트에서 정의된 사용자 정의 스크립트의 캐시 버스팅

마켓플레이스
1

어떤 작업을 원하시나요?

이 토픽에서 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 리포지토리를 통해 구현하지 않음). House Ads의 관리자 정의 HTML 변경 사항이 사용자가 이동하는 다음 페이지에 즉시 반영되는 것처럼, 공식 Discourse Ad 플러그인에 이를 달성하기 위한 재사용 가능한 코드가 포함되어 있는지 궁금합니다.

언제까지 완료되어야 하나요?

매우 유연합니다.

이 작업을 위해 제공할 수 있는 예산(USD)은 얼마인가요?

150달러 이하.

2

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