استخدام واجهة برمجة تطبيقات JS

يتيح واجهة برمجة تطبيقات JavaScript في Discourse للثيمات والإضافات إجراء تخصيصات واسعة النطاق لتجربة المستخدم. أسهل طريقة لاستخدامها هي إنشاء ثيم جديد من لوحة التحكم، والنقر على “تعديل الكود”، ثم التوجه إلى تبويب JS.

بالنسبة للثيمات القائمة على الملفات، يمكن استخدام واجهة برمجة التطبيقات من خلال إنشاء ملف في مجلد api-initializers. بالنسبة للثيمات، يكون المسار {theme}/javascripts/api-initializers/init-theme.gjs، وبالنسبة للإضافات، يكون {plugin}/assets/javascripts/discourse/api-initializers/init-plugin.js. يجب أن يكون المحتوى كالتالي:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  // Your code here
});

جميع واجهات برمجة التطبيقات المتاحة مدرجة في كود المصدر لـ plugin-api.gjs في نواة Discourse، مع وصف موجز وأمثلة.

للاطلاع على شاملة كاملة، تتضمن أمثلة على استخدام واجهة برمجة تطبيقات JS، يرجى الرجوع إلى:


هذا المستند خاضع للتحكم بالإصدار - اقترح تغييرات على github.

39 إعجابًا

What’s the best way to “import” as a Site Customisation? - is it just to use require?

Whilst this works:

<script type="text/discourse-plugin" version="0.1">
var HamburgerMenuComponent = require('discourse/components/hamburger-menu').default;
</script>

This does not:

<script type="text/discourse-plugin" version="0.1">
import {default as HamburgerMenuComponent2 } from 'discourse/components/hamburger-menu';

</script>

Where I get this error:

<script type="text/discourse-js-error">unknown: 'import' and 'export' may only appear at the top level (3:0)
  1 | Discourse._registerPluginCode('0.1', api => {
  2 |   
> 3 | import {default as HamburgerMenuComponent2 } from 'discourse/components/hamburger-menu';
    | ^
  4 | 
  5 | 
  6 | }); at <eval>:8695:14</script>
إعجابَين (2)

Instead of importing it, you can look it up with

api.container.lookupFactory('component:hamburger-menu')
5 إعجابات

Is there a way to get access to the h helper from virtual-dom in a site customization? I’m trying to add a simple dropdown widget to use in our header, and I can’t get that darned h, even though I can get createWidget

Does:

h = require('virtual-dom').h;

not work?

إعجابَين (2)

Yes it does! Works perfectly, thanks a ton!

I wouldn’t recommend doing it that way as it would likely break future compatibility. You can use this for now but I’ll try to introduce a workaround shortly that will be safer long term.

5 إعجابات

Makes sense, it’s kinda circumventing the whole Plugin API thing and relying on implementation details of the ES6 compilation output, both things that are Dangerous™

Anyways, I’ll definitely keep an eye out for a better solution

I’ll try to get to it soon and I’ll reply in this topic, so watch it and you’ll see :slight_smile:

4 إعجابات

Actually thinking about it, the decorateWidget helper gets called with an object that has the h method. How are you inserting your widget if not via a decorator?

If you could post code that would be helpful.

{{mount-widget}} in a template for a plugin outlet.

إعجاب واحد (1)

Ah that’s clever – I didn’t think people would try that. Okay, let me try something out.

Okay, I’ve added h to the pluginApi object as long as you request plugin api v0.3:

<script type="text/discourse-plugin" version="0.3">
  console.log(api.h('b', ['hello', 'world']));
</script>

That should work for you!

https://github.com/discourse/discourse/commit/b10b6c673d5f4936d0ee107e16531df106fae75e

9 إعجابات

تم إيقاف هذا الآن اعتبارًا من:

إعجاب واحد (1)

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

إعجابَين (2)

هذا الرابط لم يعد يعمل، أحصل على هذه الرسالة:

الفرع main من discourse لا يحتوي على المسار app/assets/javascripts/discourse/app/lib/plugin-api.gjs.

إعجابَين (2)

Ah, that’s because javascript files were moved to the frontend/ directory instead of app/assets/javascripts/.

I have opened a PR:

5 إعجابات

أرفع هذا الطلب (PR). هل يمكن مراجعته؟ شكرًا!

إعجاب واحد (1)

تم الدمج في ديسمبر. :tada:

إعجاب واحد (1)