Предыдущий урок: 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.
