上一教程:Developing Discourse Plugins - Part 1 - Create a basic plugin
入门:模板
Discourse 的客户端应用是使用 Ember.js JavaScript 框架编写的。Ember 使用 模板 来生成 HTML。该链接提供了对模板语言的精彩介绍,请务必仔细阅读。
问题:向 Discourse 用户界面添加元素
许多插件需要向 Discourse 网页界面添加或扩展内容。我们提供了一种称为“插件插槽(plugin outlets)”的机制,用于在 Handlebars 模板中实现这一功能。
如果你浏览 Discourse 的模板,经常会看到如下标记:
<PluginOutlet @name="edit-topic" />
这声明了一个名为“edit-topic”的插件插槽。它是模板中的一个扩展点,插件作者可以利用它添加自己的标记。
在编写插件时,请查看你想要修改的 Discourse 模板(.gjs 文件),寻找 <PluginOutlet />。如果没有,请直接联系我们进行扩展!如果你有合理的用例,我们会很乐意添加。如果你想让我们更轻松、快速地完成这项工作,请在 GitHub 上提交拉取请求!
如果你想查看插件插槽存在的位置,可以在符合 POSIX 标准的 shell 中运行以下命令:
git grep -A 1 "<PluginOutlet" -- "*.gjs"
你还可以通过启用 Discourse 开发者工具栏 在 Discourse 站点上显示插件插槽。只需在 Discourse 论坛的浏览器控制台中输入 enableDevTools(),然后点击页面左侧出现的插头图标。
连接到插件插槽
找到你想要添加的插件插槽后,需要为其编写一个 connector(连接器)。连接器是一个 .gjs 组件,其文件名路径中包含 connectors/<插槽名称>。
例如,如果 Discourse 模板中有:
<PluginOutlet @name="evil-trout" />
那么你在 connectors/evil-trout 目录下创建的任何 .gjs 文件都将被自动追加。因此,如果你创建了文件:
plugins/hello/assets/javascripts/discourse/connectors/evil-trout/hello.gjs
内容如下:
<template>
<b>Hello World</b>
</template>
Discourse 将在模板的该位置插入 <b>Hello World</b>。
请注意,我们将文件命名为 hello.gjs —— 文件名(与目录名不同)并不重要,但它在所有插件中必须唯一。建议将其命名为能描述你扩展功能的名称,这将有助于未来的调试。
故障排查
- 仔细检查连接器的名称,确保其与插件名称完全匹配。
更多信息
系列更多内容
第 1 部分:插件基础
第 2 部分:本文主题
第 3 部分:站点设置
第 4 部分:git 设置
第 5 部分:管理界面
第 6 部分:验收测试
第 7 部分:发布你的插件
本文档已进行版本控制 - 建议更改请 在 GitHub 上提交。



