Vorheriges Tutorial: Developing Discourse Plugins - Part 4 - Setup git
Manchmal reichen Site-Einstellungen nicht als Admin-Oberfläche aus, damit dein Plugin so funktioniert, wie du es möchtest. Wenn du zum Beispiel das discourse-akismet-Plugin installierst, wirst du vielleicht bemerkt haben, dass es einen Navigationspunkt zum Abschnitt „Plugins“ in der Discourse-Admin-Oberfläche hinzufügt:
In diesem Tutorial zeigen wir dir, wie du eine Admin-Oberfläche für dein Plugin hinzufügst. Ich nenne mein Plugin „purple-tentacle“, zu Ehren eines meiner Lieblingscomputerspiele. Ernsthaft, ich liebe dieses Spiel wirklich!
Die Admin-Route einrichten
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: 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ötigt. Der Titel wird purple_tentacle.title aus unserer i18n-Übersetzungsdatei sein und verlinkt auf die Route purple-tentacle.
Die folgenden Zeilen richten die serverseitige Zuordnung der 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 tatsächlich keine Daten vom Backend, aber wir müssen Discourse mitteilen, dass es etwas bereitstellen soll, falls der Benutzer /admin/plugins/purple-tentacle direkt aufruft. Diese Zeile sagt im Grunde: „Hey, wenn der Benutzer diese URL direkt auf der Serverseite aufruft, liefere den Standardinhalt für Plugins aus!"
(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 aufruft. Es wird einfach ein Button sein, der beim Klicken ein animiertes GIF eines violetten Tentakels anzeigt:
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 ein Component in Discourse, das wir verwenden, um einen Button mit einer Beschriftung und einem Symbol anzuzeigen.
Um unsere neue Vorlage zu verbinden, 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 Übersetzungsstrings 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 wirst unseren Link sehen! Wenn du darauf klickst, siehst du den Button, um unseren violetten 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-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 
Falls du Probleme hast, deine Version dieses Plugins zum Laufen zu bringen, habe ich sie 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 versioniert – vorschlagen von Änderungen auf GitHub.
