Предыдущий урок: 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: "Фиолетовое Щупальце"
show: "Показать Фиолетовое Щупальце"
Если вы перезапустите сервер разработки, вы сможете перейти на /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.
