Vorheriges Tutorial: Developing Discourse Plugins - Part 4 - Setup git
Manchmal reichen Site-Einstellungen nicht als Admin-Oberfläche für dein Plugin aus, damit es so funktioniert, wie du es möchtest. Wenn du zum Beispiel das Plugin discourse-akismet installierst, hast du vielleicht bemerkt, dass es einen Navigationseintrag im Admin-Plugins-Bereich deines Discourse hinzufügt:
In diesem Tutorial zeigen wir dir, wie du eine Admin-Oberfläche für dein Plugin hinzufügst. Ich werde mein Plugin purple-tentacle nennen, zu Ehren von einer meiner Lieblingscomputerspiele. Ernsthaft, ich liebe dieses Spiel!
Einrichten der Admin-Route
Beginnen wir damit, eine plugin.rb hinzuzufügen, wie wir es in früheren Teilen des Tutorials getan haben.
plugin.rb
# name: purple-tentacle
# about: Ein Beispiel-Plugin, das zeigt, wie man eine Plugin-Route hinzufügt
# 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ötigt. Sein Titel wird purple_tentacle.title aus unserer i18n-Übersetzungsdatei sein und es 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 eine serverseitige Route hat, die Daten bereitstellt. Für dieses Beispiel-Plugin benötigen wir tatsächlich keine Daten vom Backend, aber wir müssen Discourse mitteilen, dass es etwas ausliefert, falls der Benutzer /admin/plugins/purple-tentacle direkt besucht. Diese Zeile sagt ihm einfach: „Hey, wenn der Benutzer diese URL direkt auf der Serverseite besucht, liefere den Standard-Plugin-Inhalt aus!“
(Wenn dies verwirrend ist, mach dir keine allzu großen Sorgen, wir werden in einem zukünftigen Tutorial darauf zurückkommen, wenn wir uns mit serverseitigen Aktionen befassen.)
Als Nächstes fügen wir eine Vorlage hinzu, die angezeigt wird, wenn der Benutzer den Pfad /admin/plugins/purple-tentacle besucht. Es wird einfach ein Button sein, der ein animiertes GIF eines lila Tentakels anzeigt, wenn der Benutzer auf einen Button klickt:
assets/javascripts/discourse/templates/admin/plugins-purple-tentacle.hbs
{{#if tentacleVisible}}
<div class="tentacle">
<img src="https://eviltrout.com/images/tentacle.gif" />
</div>
{{/if}}
<div class="buttons">
<DButton
@label="purple_tentacle.show"
@action={{action "showTentacle"}}
@icon="eye"
@id="show-tentacle"
/>
</div>
Wenn du die Grundlagen von Handlebars gelernt hast, sollte die Vorlage ziemlich einfach zu verstehen sein. Der <DButton /> ist eine Komponente in Discourse, die wir verwenden, um einen Button mit einem Label und einem Icon anzuzeigen.
Um unsere neue Vorlage zu verknüpfen, müssen wir eine Routen-Map erstellen:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Eine Routen-Map 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 von Ember’s Router sehr ähnlich. In diesem Fall ist unsere Routen-Map sehr einfach, sie deklariert nur eine Route namens purple-tentacle unter /admin/plugins.
Zuletzt fügen wir unsere Übersetzungstexte 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 /admin/plugins besuchen können und unseren Link sehen! Wenn du darauf klickst, siehst du den Button, um unseren lila Tentakel anzuzeigen:
Leider passiert nichts, wenn du auf den Button klickst 
Wenn du deine Entwicklerkonsole öffnest, solltest du einen Fehler sehen, der einen Hinweis darauf gibt, warum das so ist:
Uncaught Error: Nothing handled the action 'showTentacle'
Ah ja, der Grund liegt in unserer Handlebars-Vorlage, wir sind von ein paar Dingen abhängig:
- Dass beim Klicken des Buttons
showTentacleaufgerufen wird. showTentaclesollte die EigenschafttentacleVisibleauftruesetzen, damit das Bild angezeigt wird.
Wenn du die Ember Guides zu Controllern noch nicht gelesen hast, ist jetzt ein guter Zeitpunkt dafür, denn wir werden einen Controller für unsere purple-tentacle-Vorlage implementieren, der diese Logik übernimmt.
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 den Button unsere animierte Figur!
Ich überlasse es als zusätzliche Übung dem Leser, einen Button hinzuzufügen, der das Tentakel wieder ausblendet, wenn er angeklickt wird 
Wenn du Schwierigkeiten hast, deine Version dieses Plugins zum Laufen zu bringen, habe ich es auf github hochgeladen.
Mehr in der Serie
Teil 1: Plugin-Grundlagen
Teil 2: Plugin-Outlets
Teil 3: Site-Einstellungen
Teil 4: Git-Setup
Teil 5: Dieses Thema
Teil 6: Akzeptanztests
Teil 7: Veröffentliche dein Plugin
Dieses Dokument wird versioniert – schlage Änderungen auf github vor.
