يتيح واجهة برمجة تطبيقات جافاسكريبت (JavaScript API) الخاصة بـ Discourse للمظاهر (themes) والإضافات (plugins) إجراء تخصيصات واسعة لتجربة المستخدم. أسهل طريقة لاستخدامها هي إنشاء مظهر جديد من لوحة الإدارة، والنقر على “Edit Code” (تحرير الكود)، ثم التوجه إلى علامة التبويب 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) => {
// الكود الخاص بك هنا
});
جميع واجهات برمجة التطبيقات المتاحة مدرجة في الكود المصدري لـ plugin-api.gjs في نواة Discourse، جنبًا إلى جنب مع وصف موجز وأمثلة.
للحصول على برنامج تعليمي كامل، بما في ذلك أمثلة على استخدام واجهة برمجة تطبيقات جافاسكريبت، راجع:
يتم التحكم في إصدار هذا المستند - اقترح تغييرات على github.
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>
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
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.
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
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?
