Vorheriges Tutorial: Developing Discourse Plugins - Part 4 - Setup git
Manchmal reichen Site-Einstellungen als Administratorschnittstelle für dein Plugin nicht aus, um es so funktionieren zu lassen, wie du es möchtest. Wenn du zum Beispiel das discourse-akismet-Plugin installierst, hast du vielleicht bemerkt, dass es einen Navigationspunkt im Bereich „Plugins“ der Discourse-Administration hinzufügt:
In diesem Tutorial zeigen wir dir, wie du eine Administratorschnittstelle für dein Plugin hinzufügst. Ich nenne mein Plugin „purple-tentacle“ (lila Tentakel), zu Ehren eines meiner Lieblingscomputerspiele. Ernsthaft, ich liebe dieses Spiel wirklich!
Die Admin-Route einrichten
Beginnen wir damit, eine plugin.rb-Datei 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 add_admin_route-Zeile teilt Discourse mit, dass dieses Plugin einen Link auf der /admin/plugins-Seite benötigt. Der Titel wird purple_tentacle.title aus unserer i18n-Übersetzungsdatei sein und auf die purple-tentacle-Route verweisen.
Die folgenden Zeilen richten die serverseitige Zuordnung der Routen für unser Plugin ein. Eine Annahme, die Discourse trifft, ist, dass fast jede Route im 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, 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 Standardinhalt für Plugins!“
(Falls das verwirrend ist, keine Sorge, wir werden darauf in einem zukünftigen Tutorial eingehen, 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 darauf 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 einer Beschriftung und einem Symbol anzuzeigen.
Um unsere neue Vorlage zu verdrahten, müssen wir eine Routenmap erstellen:
assets/javascripts/discourse/purple-tentacle-route-map.js
export default {
resource: "admin.adminPlugins",
path: "/plugins",
map() {
this.route("purple-tentacle");
},
};
Eine Routenmap 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 Routenmap sehr einfach, sie deklariert nur eine Route namens purple-tentacle unter /admin/plugins.
Zum Schluss fügen wir unsere Übersetzungszeichenfolgen 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 ist, 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-Anleitungen 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 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 ausblendet 
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-Ausgänge
Teil 3: Site-Einstellungen
Teil 4: Git-Einrichtung
Teil 5: Dieses Thema
Teil 6: Akzeptanztests
Teil 7: Veröffentliche dein Plugin
Dieses Dokument wird versionskontrolliert – vorschlage Änderungen auf GitHub.
