Discourse 插件新手开发指南 - 第2部分:Plugin Outlets(Beginner’s Guide to Creating Discourse Plugins - Part 2)


(Cheng Zheng) #1

原文地址:Beginner’s Guide to Creating Discourse Plugins Part 2: Plugin Outlets - developers - Discourse Meta

起步:handlebars 模板(Getting Started: Handlebars Templates)

Discourse 用了 Ember.js 做前端框架。
Ember 用 Handlebars 做 HTML 模板。强烈建议先阅读这个链接里的信息,了解基础。

问题:添加元素到 Discourse 用户界面(The Problem: Adding elements to the Discourse User Interface)

很多插件需要扩展 Discourse 的界面. 所以我们提供了 plugin outlets 机制来做到这点。

如果你看 Discourse 自己的 handlebars 模板,会经常看到

{{plugin-outlet name="edit-topic"}}

这里声明了一个 plugin-outlet 叫 edit-topic
这是一个扩展点(extension point),插件可以把自己的 hardlebars 标签插入这里。

当你写插件的时候,请翻阅 handlebars 模板(.hbs 后缀的文件)
看看想用那个 {{plugin-outlet}},如果你发现没有适合你的,欢迎告知我们,如果使用案例合理,我们很乐意加进去!

如果你想看 plugin-outlets 都在哪里,可以跑如下命令(如果你用的是 macOS / Linux)

git grep "plugin-outlet" -- "*.hbs"

@Mittineague 也写了个插件 来显示这些 outlet 的地址。
我承认自己还没试过这个插件,但看起来挺有帮助的。

连接到 Plugin Outlet (Connecting to a Plugin Outlet)

找到一个合适的 plugin outlet 之后,可以写 connector
connecter 就是一个 handlebars 模板文件(.hbs 文件)放在 connectors/<outlet name> 路径

举例,Discourse 的模板里有如下代码:

{{plugin-outlet name="evil-trout"}}

假设想把内容插到这个位置。

任何在 connectors/evil-trout 目录的 .hbs 文件都会自动添加到这个地方。

假设
plugins/hello/assets/javascripts/discourse/templates/connectors/evil-trout/hello.hbs
内容是

<b>Hello World</b>

Discoursee 会把这个 <b>Hello World</b>
插入到 {{plugin-outlet name="evil-trout"}} 的位置

如果碰到问题如何解决(Troubleshooting)

  • 检查 connector 的名字是否和 plugin-outlet 完全一致
  • 有疑问就直接 rm -rf tmp/,删掉 tmp 文件夹,然后重启 Rails 服务器。