# 如何在discourse UI中集成自定义插件

**URL:** https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629
**Category:** Development
**Created:** [2025年二月11日 12:31 UTC](https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629 "2025-02-11T12:31:30Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Elizeo\_Rocha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elizeo_rocha/32/485602_2.png) [@Elizeo\_Rocha](https://meta.discourse.org/u/Elizeo_Rocha)
#### Post date: [2025年二月11日 12:31 UTC](https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629/1 "2025-02-11T12:31:30Z")

</div>

我正在为我的 Discourse 实例开发一个新插件。虽然插件本身运行良好，但在将其集成到 Discourse UI 时遇到了一些困难。我已经查阅了可用的[文档](https://meta.discourse.org/t/developing-discourse-plugins-part-2-connect-to-a-plugin-outlet/31001)，但其中一些部分对我来说仍然不清楚。由于我刚接触这个领域，因此非常感谢您能提供一份详细的分步指南，介绍如何将插件添加到 UI 中。即使是一个简单的示例（例如一个醒目的“黄色框”）也能帮助我理解这个过程。

感谢您的帮助！

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2025年二月11日 12:36 UTC](https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629/2 "2025-02-11T12:36:18Z")

</div>

> [@Elizeo\_Rocha](#):
>
> 将插件添加到用户界面

这有点模糊。你能具体一点吗？你究竟想向用户界面添加什么？

你有没有查看过现有的 #Customization > Plugin 源代码，看看它们是如何实现的？（这正是开源的好处之一）

---

<div class="post-metadata">

### Author: ![Elizeo\_Rocha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elizeo_rocha/32/485602_2.png) [@Elizeo\_Rocha](https://meta.discourse.org/u/Elizeo_Rocha)
#### Post date: [2025年二月11日 12:44 UTC](https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629/3 "2025-02-11T12:44:23Z")

</div>

@merefield 我基本上想在我的 Discourse 实例中添加一个插件，该插件会在我的页面上显示一个小的框。我的目标是了解如何做到这一点，例如一个显示“Hello, World!”的插件，这样我将来就可以创建更复杂的东西了。

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/c/2/ac2495ef555e7be8031abb649b6340fb1bc90dfa.png)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2025年二月11日 12:51 UTC](https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629/4 "2025-02-11T12:51:50Z")

</div>

您需要使用插件插槽。

> [@Using Plugin Outlet Connectors from a Theme or Plugin](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727):
>
> Discourse includes hundreds of Plugin Outlets which can be used to inject new content or replace existing contend in the Discourse UI. ‘Outlet arguments’ are made available so that content can be customized based on the context. Choosing an outlet To find the name of a plugin outlet, search Discourse core for “\<PluginOutlet”, or use the [plugin outlet locations](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673) theme component. (e.g. topic-above-posts). Wrapper outlets Some outlets in core look like \<PluginOutlet @name="foo" /\>. These allow you…

一个用于确定位置和插件插槽名称的便捷工具：

> [@Introducing Discourse developer toolbar](https://meta.discourse.org/t/introducing-discourse-developer-toolbar/346215):
>
> When running the [latest version of Discourse core](https://github.com/discourse/discourse/commit/498481e5be21780c20e3646bd934eb9d7316a8f8) in a development environment, you’ll notice a new toolbar on the left-hand-side of the screen: This provides one-click access to commonly-needed developer tools. So far, we have: electric_plug Plugin Outlet Debug This shows all plugin outlets, with tooltips showing realtime values of all of the available @outletArgs. This was inspired by the popular [plugin outlet locations](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673) theme component, and [the plugin before it](https://meta.discourse.org/t/plugin-outlet-locations/29589). But un…

 ![该图片是来自 Discourse 的技术问答格式，展示了用于生成响应和加载旋转器的各种模板和结构。（由 AI 标注）](https://global.discourse-cdn.com/meta/original/4X/f/4/d/f4de42a025750ce87e7f0a34c0644f29b02e2e60.png)

---

<div class="post-metadata">

### Author: ![Elizeo\_Rocha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elizeo_rocha/32/485602_2.png) [@Elizeo\_Rocha](https://meta.discourse.org/u/Elizeo_Rocha)
#### Post date: [2025年二月11日 12:55 UTC](https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629/5 "2025-02-11T12:55:00Z")

</div>

谢谢！我会试试看，然后回来给你反馈。

---

<div class="post-metadata">

### Author: ![Elizeo\_Rocha](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/elizeo_rocha/32/485602_2.png) [@Elizeo\_Rocha](https://meta.discourse.org/u/Elizeo_Rocha)
#### Post date: [2025年二月11日 13:28 UTC](https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629/6 "2025-02-11T13:28:51Z")

</div>

它奏效了！我安装了 Ember.js Chrome 扩展程序，并在我的网站上找到了 PluginOutlet。按照文档操作后，一切都如预期般运行。

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [2025年二月11日 16:30 UTC](https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629/7 "2025-02-11T16:30:23Z")

</div>

另外，还可以看看这些主题组件 [自定义标题链接](https://meta.discourse.org/t/custom-header-links/90588) 和 [自定义标题链接（图标）](https://meta.discourse.org/t/custom-header-links-icons/86307)。

如果你只想添加一个按钮，则不需要插件。

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2025年二月15日 02:43 UTC](https://meta.discourse.org/t/how-to-integrate-a-custom-plugin-in-discourse-ui/351629/8 "2025-02-15T02:43:22Z")

</div>

别忘了你的TC 😉

> [@Custom Components -- add button or text at any plugin outlet](https://meta.discourse.org/t/custom-components-add-button-or-text-at-any-plugin-outlet/349629?u=heliosurge):
>
> information_sourceSummary Add button or text anywherehammer_and_wrenchRepository [https://github.com/literatecomputing/discourse-custom-components](https://github.com/literatecomputing/discourse-custom-components)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Add a link button or arbitrary text at any plugin outlet. (Ignore the watermarks in the images–I took these screenshots on a staging/test site.) …