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