كيفية تخصيص الرأس باستخدام إضافة؟

مطور
1

أحاول إنشاء إضافة ستغير الرأس إلى شيء مثل هذا

YQ9ojOm
YQ9ojOm1241×150 15.7 KB

لا يهم حقًا كيف يبدو الشكل، المهم أنني لا أريد استخدام التخصيص في مسار /admin/customize/css_html. أريد إنشاء إضافة ستقوم بتغيير كل ما أحتاجه سحرًا.

ما توصلت إليه حتى الآن هو أنه لا يوجد قالب للرأس، بل يتم عرضه عبر virtual-dom.

طريقة العرض هي كالتالي:

  1. قالب assets/javascripts/discourse/templates/application.hbs، الذي يمكن تحميله، يعرض مكون site-header.

    {{plugin-outlet “above-site-header”}}
    {{site-header canSignUp=canSignUp
    showCreateAccount=“showCreateAccount”
    showLogin=“showLogin”
    showKeyboard=“showKeyboardShortcutsHelp”
    toggleMobileView=“toggleMobileView”
    toggleAnonymous=“toggleAnonymous”
    logout=“logout”}}
    {{plugin-outlet “below-site-header”}}

  2. المكون assets/javascripts/discourse/components/site-header.js.es6 يمتد ويعيد widget header.

    const SiteHeaderComponent = MountWidget.extend(Docking, {
    widget: ‘header’,
    ..
    });

    export default SiteHeaderComponent;

  3. الـ widget assets/javascripts/discourse/widgets/header.js.es6 يولد virtual-dom للرأس.

    export default createWidget(‘header’, {
    tagName: ‘header.d-header.clearfix’,

    html(attrs, state) {}
    });

أفكاري

يمكنني إنشاء widget خاص بي باسم my-header سيمتد من header الحالي، وسأقوم هناك فقط بتحديث html. لا أريد نسخ أي شيء ولصقه، أريد فقط تجاوز دالة html().

/plugins/discourse-foo/assets/javascripts/discourse/widgets/my-header.js.es6

ثم يمكنني إنشاء مكون خاص بي باسم my-site-header سيمتد من site-header الحالي مع تجاوز بسيط ليوجه إلى widget my-header.

/plugins/discourse-foo/assets/javascripts/discourse/components/my-site-header.js.es6

ثم أقوم بتجاوز قالب application لعرض مكون my-site-header بدلاً من site-header

/plugins/discourse-foo/assets/javascripts/discourse/templates/application.hbs

{{plugin-outlet "above-site-header"}}
{{my-site-header canSignUp=canSignUp
              showCreateAccount="showCreateAccount"
              showLogin="showLogin"
              showKeyboard="showKeyboardShortcutsHelp"
              toggleMobileView="toggleMobileView"
              toggleAnonymous="toggleAnonymous"
              logout="logout"}}
{{plugin-outlet "below-site-header"}}

السؤال هو، كيف يمكنني توسيع كل هذه المكونات والـ widgets؟ هل يمكنك من فضلك إرشادي إلى الطريقة الصحيحة للقيام بذلك؟ شكرًا.

2

Based on the screenshot, this seems like something that is plausible to do with just CSS customizations. That would also be much simpler than writing a plugin and would not require updating with new versions of Discourse code.

3

Well, I knew you going to say that, that’s why I mentioned that I need a plugin :slight_smile:

First of all, because I want to learn how to do plugins, I’ll have to do whole lot more complicated things later. That menu is just an example.

Secondly, I really need that menu to be a plugin, because:

  1. We may reuse it on different projects;
  2. We need a version control, to roll back sometimes;
  3. Some links will be generated from external json;
  4. I want a clean solution. I believe doing it with a plugin is a clean solution;
4

Sitepoint use a plugin to override the header.
Take a look here:

5

Thank you for your link, it will be definitely interesting to see how other people are doing it.

As I see now, they are not extending existing header widget. They just copy-pasted it from the core and customised it.
In that case they have to support that code themselves, and Discourse most likely to break it on next update.