上一个教程：Developing Discourse Plugins - Part 4 - Setup git
有时，站点设置 不足以作为插件所需的完整管理界面。例如，如果您安装了 discourse-akismet 插件，可能会注意到它在 Discourse 的管理员插件部分添加了一个导航项：
在本教程中，我们将向您展示如何为插件添加管理界面。为了致敬 我最喜欢的电子游戏之一，我将我的插件命名为 purple-tentacle（紫色触手）。说真的，我真的很喜欢那款游戏！
设置管理路由
让我们从添加一个 plugin.rb 文件开始，就像我们在教程的前几部分所做的那样。
plugin.rb
# name: purple-tentacle
# about: A sample plugin showing how to add a plugin route
# 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。
系列更多内容
第 1 部分：插件基础
第 2 部分：插件出口
第 3 部分：站点设置
第 4 部分：Git 设置
第 5 部分：本文主题
第 6 部分：验收测试
第 7 部分：发布您的插件
本文档已进行版本控制 - 如有建议，请 在 GitHub 上提交。
