Vorheriges Tutorial: Developing Discourse Plugins - Part 4 - Setup git
Manchmal reichen Site-Einstellungen nicht als Admin-Oberfläche aus, damit Ihr Plugin so funktioniert, wie Sie es möchten. Wenn Sie beispielsweise das Plugin discourse-akismet installieren, haben Sie vielleicht bemerkt, dass es einen Navigationseintrag im Admin-Bereich für Plugins in Ihrem Discourse hinzufügt:
In diesem Tutorial zeigen wir Ihnen, wie Sie eine Admin-Oberfläche für Ihr Plugin hinzufügen. Ich nenne mein Plugin „purple-tentacle“ zu Ehren von einem meiner Lieblingscomputerspiele. Ernsthaft, ich liebe dieses Spiel wirklich!
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: 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 er verweist auf die Route purple-tentacle.
Die darunter liegenden 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 zwar keine Daten vom Backend, aber wir müssen Discourse mitteilen, dass es etwas ausliefert, falls der Benutzer direkt /admin/plugins/purple-tentacle aufruft. Diese Zeile sagt einfach: „Hey, wenn der Benutzer diese URL direkt auf der Serverseite aufruft, liefere den Standard-Plugin-Inhalt aus!"
(Wenn das verwirrend ist, machen Sie sich keine Sorgen – wir werden in einem zukünftigen Tutorial darauf 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 aufruft. Es wird nur ein Button sein, der beim Klicken ein animiertes GIF eines lila 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 Sie die Grundlagen von Handlebars gelernt haben, sollte die Vorlage ziemlich einfach zu verstehen sein. <DButton /> ist eine Komponente in Discourse, die wir verwenden, um einen Button mit Beschriftung und Icon anzuzeigen.
Um unsere neue Vorlage zu verknüpfen, 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 Embers Router sehr ähnlich. In diesem Fall ist unsere Routenmap 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 Sie Ihren Entwicklungsserver neu starten, sollten Sie /admin/plugins aufrufen können und unseren Link sehen! Wenn Sie darauf klicken, erscheint der Button, um unseren lila Tentakel anzuzeigen:
Leider passiert beim Klicken auf den Button nichts 
Wenn Sie in Ihrer Entwicklerkonsole nachsehen, sollten Sie einen Fehler sehen, der einen Hinweis darauf gibt, warum dies der Fall ist:
Uncaught Error: Nothing handled the action 'showTentacle'`
Ah ja, der Grund liegt darin, dass wir in unserer Vorlage von ein paar Dingen abhängig sind:
- Dass beim Klicken auf den Button
showTentacleim Controller aufgerufen wird. - Dass
showTentacledie EigenschafttentacleVisibleauftruesetzt, damit das Bild angezeigt wird.
Wenn Sie die Ember-Guides zu Controllern noch nicht gelesen haben, ist jetzt ein guter Zeitpunkt dafür, da wir einen Controller für unsere purple-tentacle-Vorlage implementieren werden, der diese Logik übernimmt.
Erstellen Sie 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 neu laden, zeigt das Klicken auf den Button unseren animierten Charakter an!
Ich überlasse es dem Leser als zusätzliche Übung, einen Button hinzuzufügen, der den Tentakel beim Klicken ausblendet 
Wenn Sie Schwierigkeiten haben, Ihre Version dieses Plugins zum Laufen zu bringen, habe ich es auf GitHub hochgeladen.
Mehr in dieser 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öffentlichen Sie Ihr Plugin
Dieses Dokument ist versioniert – schlagen Sie Änderungen auf GitHub vor.
