Vorheriges Tutorial: Developing Discourse Plugins - Part 4 - Setup git
Manchmal reichen Site-Einstellungen als Admin-Oberfläche für dein Plugin nicht aus, um es so funktionieren zu lassen, wie du es möchtest. Wenn du beispielsweise das discourse-akismet-Plugin installierst, wirst du vielleicht bemerkt haben, dass es einen Navigationspunkt zum Abschnitt „Plugins“ in deinem Discourse-Adminbereich 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 eines meiner Lieblingscomputerspiele. Ernsthaft, ich liebe dieses Spiel wirklich!
Einrichten der Admin-Route
Beginnen wir damit, eine plugin.rb hinzuzufügen, wie wir es in den vorherigen 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. Der Titel wird purple_tentacle.title aus unserer i18n-Übersetzungsdatei sein und es wird zur Route purple-tentacle verlinken.
Die darunter folgenden Zeinen richten die serverseitige Zuordnung der Routen für unser Plugin ein. Eine Annahme, die Discourse trifft, ist, dass fast jede Route auf der Client-Seite 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, etwas bereitzustellen, falls der Benutzer direkt /admin/plugins/purple-tentacle besucht. Diese Zeile sagt einfach: „Hey, wenn der Benutzer diese URL direkt auf der Serverseite besucht, liefere den Standard-Plugins-Inhalt!“
(Falls das verwirrend ist, mach dir keine großen Sorgen, wir werden darauf in einem zukünftigen Tutorial zurückkommen, wenn wir serverseitige Aktionen behandeln.)
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 den Button 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 kennst, sollte die Vorlage ziemlich einfach zu verstehen sein. Das <DButton /> ist eine Komponente in Discourse, die wir verwenden, um einen Button mit einem Label und einem Symbol anzuzeigen.
Um unsere neue Vorlage anzubinden, 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 sehr ähnlich zu Embers Router. In diesem Fall ist unsere Routenkarte sehr einfach, sie deklariert nur eine Route namens purple-tentacle unter /admin/plugins.
Zum Schluss fügen wir unsere Übersetzungsstrings hinzu:
config/locales/client.en.yml
de:
js:
purple_tentacle:
title: "Lila Tentakel"
show: "Lila Tentakel anzeigen"
Wenn du deinen Entwicklungsserver neu startest, solltest du in der Lage sein, /admin/plugins zu besuchen, und du wirst unseren Link sehen! Wenn du darauf klickst, siehst du den Button, um unseren lila Tentakel anzuzeigen:
Leider passiert beim Klicken auf den Button nichts 
Wenn du dir deine Entwicklerkonsole ansiehst, 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 darin, dass wir in unserer Vorlage von ein paar Dingen abhängen:
- Dass beim Klicken auf den Button
showTentacleauf dem Controller aufgerufen wird. showTentaclesollte die EigenschafttentacleVisibleauftruesetzen, damit das Bild angezeigt wird.
Wenn du die Ember-Leitfäden zu Controllern noch nicht gelesen hast, ist jetzt ein guter Zeitpunkt dafür, da wir einen Controller für unsere purple-tentacle-Vorlage implementieren werden, der diese Logik handhabt.
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 unseren animierten Charakter!
Ich überlasse es dem Leser als zusätzliche Übung, einen Button hinzuzufügen, der den Tentakel beim Klicken versteckt 
Wenn du Probleme 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-Ausgabeorte
Teil 3: Site-Einstellungen
Teil 4: Git-Einrichtung
Teil 5: Dieses Thema
Teil 6: Akzeptanztests
Teil 7: Veröffentliche dein Plugin
Dieses Dokument ist versionskontrolliert – schlage Änderungen auf github vor.
