[مدفوع] إبطال ذاكرة التخزين المؤقت للبرامج النصية المخصصة المعرفة في مكون السمة

السوق
1

ماذا تريد أن يتم إنجازه؟

في هذا الموضوع شرحت أنني كنت أحاول إضافة بعض جافاسكريبت بسيطة لتدوير بين بعض الصور العشوائية باستخدام api.createWidget ، وقد تلقيت بعض المساعدة في استخدام api.onPageChange بشكل صحيح. أخطط أيضًا للقيام بشيء مشابه بناءً على api.decorateWidget باستخدام الحل هنا. هذه هي الشيفرة النهائية التي انتهيت من استخدامها للموقع above-main-container:

HTML/CSS مخصص في مكون السمة

رأس

<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. لذلك، أود تعلم طريقة مرنة لتعطيل ذاكرة التخزين المؤقت لمثل هذه الشيفرة، لجعلها تحصل على أحدث إصدار من جافاسكريبت المخصص عند تحميل الصفحة التالية للمستخدم. أفضل تنفيذها كما أفعل حاليًا عبر مكون سمة أقوم بإنشائه وإضافة CSS وجافاسكريبت إليه باستخدام زر تحرير 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.