Предыдущее руководство: 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. Его заголовок будет взят из purple_tentacle.title в нашем файле переводов i18n, и он будет вести на маршрут purple-tentacle.
Строки ниже настраивают серверное сопоставление маршрутов для нашего плагина. Discourse исходит из предположения, что почти каждый маршрут на фронтенде имеет соответствующий серверный маршрут, предоставляющий данные. Для этого примера плагина нам на самом деле не нужны данные с бэкенда, но мы должны сообщить Discourse, что нужно что-то отдать, если пользователь перейдет напрямую на /admin/plugins/purple-tentacle. Эта строка просто говорит: «эй, если пользователь перейдет по этому URL напрямую на серверной стороне, отдайте содержимое по умолчанию для плагинов»!
(Если это сбивает с толку, не волнуйтесь слишком сильно, мы вернемся к этому в следующем руководстве, когда будем разбирать действия на стороне сервера.)
Далее мы добавим шаблон, который будет отображаться, когда пользователь перейдет по пути /admin/plugins/purple-tentacle. Это будет просто кнопка, которая показывает анимированный гиф-файл с фиолетовым щупальцем при нажатии на кнопку:
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. В данном случае наша карта маршрутов очень проста: она просто объявляет один маршрут с именем purple-tentacle под /admin/plugins.
Наконец, давайте добавим наши строки переводов:
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.
