Предыдущий урок: 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. Это будет просто кнопка, которая показывает анимированный 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. В этом случае наша карта маршрутов очень проста, она просто объявляет один маршрут с именем 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.
