كيفية استخدام api.onPageChange مع api.createWidget؟

[rahim123]

مرحباً، أحاول إضافة لافتة صور لجميع الصفحات تقوم بالاختيار عشوائياً من صورتين عشوائيتين. تعمل عندما أضيفها إلى قسم Head في القالب الخاص بي وأعيد تحميل الصفحة الرئيسية بالقوة:

تحرير: محاولتي التي تقترب من الحل موجودة هنا:

How to use api.onPageChange with api.createWidget?

This is my more proper attempt. When I run it without the api.onPageChange(() function it works, but doesn’t randomize the image until I do a hard page refresh. When I add the api.onPageChange(() function it doesn’t show any image at all. Any tips on what I’m doing wrong? <script type="text/discourse-plugin" version="0.8"> api.onPageChange(() => { doStuff(); }); function doStuff() { const h = require("virtual-dom").h; let banners = new Array(); banners[0]="https://example.com/upload…

أي فكرة عما أفعله بشكل خاطئ؟ شكراً!

[rahim123]

هذه محاولتي الأكثر ملاءمة. عندما أقوم بتشغيلها بدون الدالة api.onPageChange(() فإنها تعمل، ولكنها لا تقوم بخلط الصورة عشوائيًا حتى أقوم بتحديث الصفحة بالكامل. عندما أضيف الدالة api.onPageChange(() فإنها لا تعرض أي صورة على الإطلاق. أي نصائح حول ما أفعله بشكل خاطئ؟

<script type="text/discourse-plugin" version="0.8">

api.onPageChange(() => {
        doStuff();
});

function doStuff() {

const h = require("virtual-dom").h;

let banners = new Array();
banners[0]="https://example.com/uploads/default/original/1X/9d9762a4129c78c478d14ff857c3bd1f2be0322a.jpg";
banners[1]="https://example.com/uploads/default/original/1X/04ede2abd9ac117c64988a5b0bcf033474381527.jpg";

let GoTo = new Array();
GoTo[0]="https://google.com";
GoTo[1]="https://brave.com";

let Number = Math.round(1 * Math.random());
let TheLink = GoTo[Number];
let TheImage = banners[Number];

  api.createWidget("top-banner-widget", {
    tagName: "div.top-banner",
    html() {
    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>

[awesomerobot (Kris)]

أعتقد أن القطعة المفقودة كانت تشغيل إعادة عرض لعنصر واجهة المستخدم (widget)… إذا كنت أتذكر بشكل صحيح، فإن عناصر الواجهة تعيد العرض عند التفاعل، لذلك أضفت this.scheduleRerender(); لجعلها تعيد العرض عند تغيير الصفحة.

هذا يعمل لدي محليًا:

api.createWidget("top-banner-widget", {
    tagName: "div.top-banner",

    html() {
        let Number = Math.round(1 * Math.random());
        
        let banners = new Array();
        banners[0]="https://placekitten.com/500/500";
        banners[1]="https://placekitten.com/500/300";

        let GoTo = new Array();
        GoTo[0]="https://google.com";
        GoTo[1]="https://brave.com";
  
        let TheLink = GoTo[Number];
        let TheImage = banners[Number];
        
        api.onPageChange(() => {
            this.scheduleRerender();
        });
  
        return h("div#top-banner", [
          h(
            "a.custom-ad-link",
            { href: TheLink },
            h("img", { src: TheImage })
          )
        ]);
    }
});

[rahim123]

رائع! شكراً جزيلاً، لم أكن لأكتشف ذلك أبداً!

إليك كود الرأس الكامل لمكون السمة:

<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 Number = Math.round(1 * Math.random());
        
        let banners = new Array();
        banners[0]="https://example.com/uploads/default/original/1X/9d9762a4129c78c478d14ff857c3bd1f2be0322a.jpg";
        banners[1]="https://example.com/uploads/default/original/1X/04ede2abd9ac117c64988a5b0bcf033474381527.jpg";

        let GoTo = new Array();
        GoTo[0]="https://google.com";
        GoTo[1]="https://brave.com";
  
        let TheLink = GoTo[Number];
        let TheImage = banners[Number];
        
        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>

[awesomerobot (Kris)]

تجدر الإشارة أيضًا إلى أن هذا يمكن أن يكون مكون Ember. على المدى الطويل، سنبدأ في الاعتماد على Ember أكثر من نظام الأدوات المخصصة لدينا. ما زلنا في طور العمل على تحديثات Ember، لذا فإن وثائقنا حول تخصيص Discourse متأخرة قليلاً في هذا الشأن.

لقد قمت بتجميع مكون سمة يوضح مثالاً لكيفية عمل هذا كمكون Ember: GitHub - awesomerobot/discourse-component-example

هناك 3 ملفات مهمة هنا:

1. الموصل (/javascripts/discourse/connectors/custom-header-banner-connector.hbs)

2. المكون (/javascripts/discourse/components/custom-header-banner.js)

3. قالب المكون (/javascripts/discourse/templates/components/custom-header-banner.hbs)

الموصل هو المكان الذي تتم فيه إضافة المكون، لذا يحتاج فقط إلى احتواء <CustomHeaderBanner />. المكون هو المكان الذي نكتشف فيه تغييرات الصفحة (تغييرات المسار) ونقوم بإعداد المنطق للصورة/الرابط الذي يظهر عشوائيًا. قالب المكون هو كيفية تقديم البيانات بتنسيق HTML.

[rahim123]

أهلاً، من الجيد معرفة ذلك، شكراً جزيلاً على ذلك أيضاً. أؤكد أنه يعمل عند تثبيته من المستودع الخاص بك كمكون سمة على موقعي.

بدلاً من ذلك، هل يمكنني إضافته يدوياً كمكون سمة Ember عبر واجهة تخصيص > تثبيت > إنشاء جديد ثم تعديل CSS / HTML؟ سيجعل ذلك من السهل تغيير الصور والروابط بسرعة حسب الحاجة. أفترض أن محتويات custom-header-banner.js ستذهب تحت رأس، ثم \u003cCustomHeaderBanner /\u003e في بعد الرأس أو الجسم، ولكن لست متأكداً من مكان إضافة محتويات custom-header-banner.hbs.

[awesomerobot (Kris)]

الأمر أكثر تعقيدًا من ذلك لترجمته إلى مكون سمة مثبت محليًا، ولكن إحدى الطرق لإضافة بعض المرونة إلى سمة بعيدة ستكون باستخدام إعدادات السمة (Add settings to your Discourse theme).

يتضمن ذلك إضافة ملف settings.yml وتحديث بعض القيم في المكون و/أو القالب. ثم تحصل على إعدادات في صفحة مسؤول مكون السمة الخاصة بك مثل هذا:

من الجيد أيضًا الالتزام بتنفيذ الأداة المذكور أعلاه والتحديث عبر لوحة المسؤول، ولكننا نميل إلى التوصية باستخدام git عندما يكون ذلك ممكنًا؛ من الأسهل مشاركته إذا كنت بحاجة إلى استكشاف الأخطاء وإصلاحها، ويجعل من السهل تتبع تغييراتك.

[rahim123]

ممتاز، أقدر حقًا شرحك الصبور والواضح، من الرائع أن يكون لديك هذا الخيار أيضًا.

[rahim123]

مرحباً مرة أخرى، أحاول معرفة أفضل طريقة لجعل الويدجت يظهر فقط على عنوان URL محدد، مثل الصفحة الرئيسية.

الطريقة السهلة هي ببساطة استخدام منفذ إضافة (plugin outlet) موجود فقط في الصفحة الرئيسية، وهذا يعمل لما أحتاجه في الوقت الحالي (تحديداً، discovery-navigation-bar-above). لكنني ما زلت مهتماً بكيفية القيام بذلك برمجياً بطريقة حساسة لعنوان URL للصفحة المحدد.

لقد وجدت هذا الموضوع المفيد جداً، أيضاً من @awesomerobot:

Add custom content that only appears on your homepage

A very common situation you’ll find yourself in as a theme developer is the need to create content that only shows on the homepage of your community. You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s use a Discourse theme to create a component with content that is only visible on your homepage. If you’re unfamiliar with Discourse themes …

لقد حاولت تكييف هذا في الحل من بداية هذا المنشور:

        api.onPageChange((url) => {
            if (url === "/" || url === homeRoute) {
               this.scheduleRerender();
            }
        });

لكن هذا لا يزال يجعل الصورة تظهر على جميع الصفحات. لقد حاولت أيضاً وضع المتغيرات الخاصة بي وكود الاختيار العشوائي داخل جملة if، لكن ذلك لا يعمل على الإطلاق.

هناك أيضاً قسم <script type="text/x-handlebars" ... من المثال، ولكنه يبدو أنه يسمح فقط بـ HTML، ولا أعرف كيف أحصل على المتغيرات فيه من البرنامج النصي السابق.