Vorheriges Tutorial: Developing Discourse Plugins - Part 4 - Setup git
Manchmal sind Site-Einstellungen für die Administratoroberfläche deines Plugins nicht ausreichend, um es so zu betreiben, wie du es möchtest. Wenn du zum Beispiel das Plugin discourse-akismet installierst, ist dir vielleicht aufgefallen, dass es einen Navigationseintrag im Bereich der Admin-Plugins in deiner Discourse-Instanz hinzufügt:
In diesem Tutorial zeigen wir dir, wie du eine Administratoroberfläche für dein Plugin hinzufügst. Ich werde mein Plugin „purple-tentacle“ nennen, zu Ehren eines meiner Lieblings-Computerspiele. Ernsthaft, ich liebe dieses Spiel wirklich!
Einrichten der Admin-Route
Beginnen wir, indem wir eine plugin.rb hinzufügen, wie wir es in den vorherigen Teilen des Tutorials getan haben.
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
Die Zeile add_admin_route teilt Discourse mit, dass dieses Plugin einen Link auf der Seite /admin/plugins benötigen wird. Sein Titel wird purple_tentacle.title aus unserer i18n-Übersetzungsdatei sein, und er wird zur Route purple-tentacle verlinken.
Die Zeilen darunter richten die serverseitige Zuordnung von Routen für unser Plugin ein. Eine Annahme, die Discourse trifft, ist, dass fast jede Route auf der Frontend-Seite eine serverseitige Route hat, die Daten bereitstellt. Für dieses Beispiel-Plugin benötigen wir eigentlich keine Daten vom Backend, aber wir müssen Discourse mitteilen, dass es etwas bereitstellen soll, falls der Benutzer direkt /admin/plugins/purple-tentacle aufruft. Diese Zeile sagt einfach: „Hey, wenn der Benutzer diese URL direkt auf der Serverseite aufruft, stelle den Standard-Plugin-Inhalt bereit!"
(Wenn dies verwirrend ist, mach dir keine großen Sorgen, wir kommen darauf zurück, wenn wir in einem zukünftigen Tutorial serverseitige Aktionen behandeln.)
Als Nächstes fügen wir eine Vorlage hinzu, die angezeigt wird, wenn der Benutzer den Pfad /admin/plugins/purple-tentacle aufruft. Sie enthält nur eine Schaltfläche, die ein animiertes GIF eines violetten Tentakels anzeigt, wenn der Benutzer auf die Schaltfläche klickt:
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>
Wenn du die Grundlagen von Handlebars gelernt hast, sollte die Vorlage ziemlich einfach zu verstehen sein. Das <DButton /> ist eine Komponente in Discourse, die wir verwenden, um eine Schaltfläche mit einem Label und einem Icon anzuzeigen.
Um unsere neue Vorlage zu verdrahten, müssen wir eine Routenkarte erstellen:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Eine Routenkarte ist etwas, das wir zu Discourse hinzugefügt haben, damit Plugins Routen zur Ember-Anwendung hinzufügen können. Die Syntax innerhalb von map() ist der Embers Router sehr ähnlich. In diesem Fall ist unsere Routenkarte sehr einfach; sie deklariert nur eine Route namens purple-tentacle unter /admin/plugins.
Schließlich fügen wir unsere Übersetzungszeichenfolgen hinzu:
config/locales/client.en.yml
en:
js:
purple_tentacle:
title: "Purple Tentacle"
show: "Show Purple Tentacle"
Wenn du deinen Entwicklungsserver neu startest, solltest du in der Lage sein, /admin/plugins aufzurufen, und du siehst unseren Link! Wenn du darauf klickst, siehst du die Schaltfläche, um unseren violetten Tintenfisch anzuzeigen:
Leider passiert nichts, wenn du auf die Schaltfläche klickst 
Wenn du in deine Entwicklerkonsole schaust, solltest du einen Fehler sehen, der einen Hinweis darauf gibt, warum das so ist:
Uncaught Error: Nothing handled the action 'showTentacle'
Ach ja, der Grund liegt in unserer Vorlage, die von ein paar Dingen abhängt:
- Dass beim Klicken auf die Schaltfläche
showTentacleauf dem Controller aufgerufen wird. showTentaclesollte die EigenschafttentacleVisibleauftruesetzen, damit das Bild angezeigt wird.
Wenn du die Ember-Anleitungen zu Controllern noch nicht gelesen hast, ist jetzt ein guter Zeitpunkt dafür, da wir einen Controller für unsere Vorlage purple-tentacle implementieren, der diese Logik behandelt.
Erstelle die folgende Datei:
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;
}
}
Und jetzt, wenn wir unsere Seite aktualisieren, zeigt das Klicken auf die Schaltfläche unseren animierten Charakter!
Ich überlasse es als zusätzliche Übung für den Leser, eine Schaltfläche hinzuzufügen, die den Tintenfisch beim Klicken ausblendet 
Falls du Schwierigkeiten hast, deine Version dieses Plugins zum Laufen zu bringen, habe sie auf GitHub hochgeladen.
Mehr in der Reihe
Teil 1: Plugin-Grundlagen
Teil 2: Plugin-Ausgabepunkte
Teil 3: Site-Einstellungen
Teil 4: git-Einrichtung
Teil 5: Dieses Thema
Teil 6: Akzeptanztests
Teil 7: Veröffentliche dein Plugin
Dieses Dokument ist versioniert – schlage Änderungen auf GitHub vor.
