上一篇教程:Developing Discourse Plugins - Part 4 - Setup git
有时,站点设置 提供的管理界面不足以让你的插件按预期工作。例如,如果你安装了 discourse-akismet 插件,你可能注意到它在你的 Discourse 管理面板的插件部分添加了一个导航项:
在本教程中,我们将展示如何为你的插件添加一个管理界面。为了纪念 我最喜欢的电脑游戏之一,我将把我的插件命名为 purple-tentacle。说真的,我非常喜欢那款游戏!
设置管理路由
让我们从添加一个 plugin.rb 文件开始,就像我们在教程的前几部分所做的那样。
plugin.rb
# name: purple-tentacle
# about: 一个展示如何添加插件路由的示例插件
# version: 0.1
# authors: Robin Ward
# url: https://github.com/discourse/purple-tentacle
add_admin_route 'purple_tentacle.title', 'purple-tentacle'
Discourse::Application.routes.append do
get '/admin/plugins/purple-tentacle' => 'admin/plugins#index', constraints: StaffConstraint.new
end
add_admin_route 这一行告诉 Discourse 该插件需要在 /admin/plugins 页面上有一个链接。它的标题将来自我们的 i18n 翻译文件中的 purple_tentacle.title,并将链接到 purple-tentacle 路由。
下面的几行设置了我们插件的服务端路由映射。Discourse 的一个假设是,前端几乎每个路由都有一个提供数据的服务端路由。对于这个示例插件,我们实际上不需要后端提供任何数据,但我们需要告诉 Discourse,如果用户直接访问 /admin/plugins/purple-tentacle,则提供某些内容。这一行只是告诉它:“嘿,如果用户在服务端直接访问该 URL,请提供默认的插件内容!”
(如果这让你感到困惑,不用担心,我们会在以后的教程中处理服务端操作时再回来讨论它。)
接下来,我们将添加一个模板,当用户访问 /admin/plugins/purple-tentacle 路径时显示。它只是一个按钮,当用户点击按钮时,会显示一个紫色触手的动画 gif:
assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.gjs
import DButton from "discourse/components/d-button";
<template>
{{#if @controller.tentacleVisible}}
<div class="tentacle">
<img src="https://eviltrout.com/images/tentacle.gif" />
</div>
{{/if}}
<div class="buttons">
<DButton
@label="purple_tentacle.show"
@action={{@controller.showTentacle}}
@icon="eye"
@id="show-tentacle"
/>
</div>
</template>
如果你已经学习了 Handlebars 的基础知识,这个模板应该很容易理解。<DButton /> 是 Discourse 中用于显示带有标签和图标的按钮的一个组件。
为了连接我们的新模板,我们需要创建一个路由映射:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
路由映射是我们添加到 Discourse 中的一项功能,使得插件可以向 Ember 应用程序添加路由。map() 内的语法与 Ember 的路由器 非常相似。在这种情况下,我们的路由映射非常简单,它只是在 /admin/plugins 下声明了一个名为 purple-tentacle 的路由。
最后,让我们添加我们的翻译字符串:
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
如果你重启开发服务器,你应该能够访问 /admin/plugins,你会看到我们的链接!如果你点击它,你会看到显示我们紫色触手的按钮:
不幸的是,当你点击按钮时,什么也没发生 ![]()
如果你查看开发者控制台,你应该会看到一个错误,提供了原因线索:
Uncaught Error: Nothing handled the action 'showTentacle'
啊,是的,原因是在我们的模板中,我们依赖几件事:
- 当用户点击按钮时,
showTentacle将在控制器上被调用。 showTentacle应该将属性tentacleVisible设置为true,以便图像显示出来。
如果你还没有阅读 Ember 指南关于控制器,现在是一个很好的时机,因为我们将为我们的 purple-tentacle 模板实现一个控制器来处理这个逻辑。
创建以下文件:
assets/javascripts/discourse/controllers/admin-plugins-purple-tentacle.js
import Controller from "@ember/controller";
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
export default class AdminPluginsPurpleTentacleController extends Controller {
@tracked tentacleVisible = false;
@action
showTentacle() {
this.tentacleVisible = true;
}
}
现在当我们刷新页面,点击按钮会显示我们的动画角色!
我将留给读者一个额外的练习,添加一个按钮,当点击时隐藏触手 ![]()
如果你在让你的插件版本工作时遇到困难,我已经把它推送到 github。
系列更多内容
第一部分:插件基础
第二部分:插件出口
第三部分:站点设置
第四部分:git 设置
第五部分:本主题
第六部分:验收测试
第七部分:发布你的插件
本文档受版本控制 - 在 github 上建议更改。






