使用 JS API

Discourse 的 JavaScript API 允许主题和插件对用户体验进行广泛的自定义。使用它的最简单方法是从管理面板创建一个新主题,点击“编辑代码”,然后转到 JS 选项卡。

对于基于文件的(file-based)主题,可以通过在 api-initializers 目录中创建一个文件来使用 API。对于主题,该文件是 {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) => {
  // 您的代码
});

所有可用的 API 都列在 Discourse 核心的 plugin-api.gjs 源代码 中,并附有简短的描述和示例。

有关完整的教程,包括 JS API 用法的示例,请参阅:


本文档受版本控制 - 在 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!

9 个赞

此功能已弃用,截至:

1 个赞

已在此处以及许多其他版本控制文档中更新。感谢您的提醒 @NateDhaliwal

2 个赞

此链接不再有效,我收到此消息:

discourse 的 main 分支不包含路径 app/assets/javascripts/discourse/app/lib/plugin-api.gjs。

2 个赞

Ah,这是因为 javascript 文件被移动到了 frontend/ 目录,而不是 app/assets/javascripts/。\n\n我已经打开了一个 PR:\nChange app/assets/javascripts/ to frontend/ by NateDhaliwal · Pull Request #75 · discourse/discourse-developer-docs · GitHub

4 个赞

顶一下这个拉取请求(PR)。可以进行审查了吗?谢谢!

1 个赞