Erstellen Sie individuelle Lenkerhelfer in Ghost!

Dieser Artikel richtet sich an viele Entwickler und Theme-Ersteller, die die von Ghost (https://ghost.org/docs/themes/helpers/) angebotenen Standardhelfer für unzureichend halten. Es ist völlig normal, nach Möglichkeiten zu suchen, die Fähigkeiten unserer Themes zu erweitern, die die von Ghost bereitgestellten Handlers verwenden. Bevor ich diesen Artikel veröffentlichte und eine Lösung für mein Thema fand, habe ich das gesamte Internet durchsucht und selbst eine Analyse des Ghost-Quellcodes durchgeführt.

Methode 1 (Kerncode ändern)

Ich habe herausgefunden, dass es möglich ist, den Quellcode von Ghost mit zusätzlichen Hilfsprogrammen zu erweitern. Dies habe ich erreicht, indem ich ein neues Verzeichnis in current/core/frontend/apps hinzugefügt habe. Ich habe das Beispiel einer vorhandenen „App“ namens amp verwendet, deren Code sehr einfach ist, um mit der Erstellung eines neuen im Theme verfügbaren Helfers zu beginnen. In diesen vorhandenen Apps ist die Struktur unkompliziert, da Helfer in lib/helpers registriert sind. Am Ende des Prozesses müssen Sie den Namen Ihres Verzeichnisses in Apps zu current/core/shared/config/overrides.json im Abschnitt apps.internal JSON hinzufügen.

Ein Beispielinhalt der Datei index.js in unserer App wäre:

const path = require('path');

module.exports = {
    activate: function activate(ghost) {
        ghost.helperService.registerDir(path.resolve(__dirname, './lib/helpers'));
    }
};

Als nächstes erstellen wir im lib-Verzeichnis dieser App einen Ordner mit dem Namen helpers. Darin erstellen wir eine neue Datei, die den Namen des Helfers enthält, der in einer Lenkervorlage aufgerufen werden soll. Nennen wir es zum Beispiel „uppercase.js“.

Unten ist ein Beispiel für einen solchen Hilfscode, der einfach die Buchstaben des angegebenen Textes im Hilfsargument in Großbuchstaben umwandelt:

const {SafeString, escapeExpression} = require('../../../../services/handlebars');

module.exports = function uppercase(text) {
    return `${text.toUpperCase()}`;
};

Vergessen Sie nicht, den Namen des Anwendungsverzeichnisses zu current/core/shared/config/overrides.json hinzuzufügen. Nach dem Neustart von Ghost sollte alles bereit sein.

Methode 2 (ohne den Kerncode zu ändern)

Ich habe diese Methode kürzlich entwickelt und Sie können sie nicht nur auf selbst gehostete Ghost-Instanzen anwenden, sondern auch auf Ghost-Instanzen, die von Hosting-Anbietern angeboten werden. Im letzteren Fall ist eine entsprechende Architekturplanung und der Kauf eines kleinen Servers erforderlich, der als Proxy für Ihre endgültige Ghost-Instanz fungiert.

Die Architektur, die wir in dieser Methode verwenden werden:
Nginx-Server ← Node.js-Middleware ← Ghost-Instanz

Der Browser des Benutzers sendet eine Anfrage an den Nginx-Server, der den Upstream der Middleware enthält. Alle Anfragen, unabhängig vom Standort, werden an die Middleware weitergeleitet.

Die Middleware ist ein Express-Server, der in Node.js mit der hinzugefügten Express-http-proxy-Bibliothek (https://github.com/villadora/express-http-proxy) läuft, was die Arbeit erheblich vereinfacht. Wir konfigurieren den Proxy für die Kommunikation mit der Ghost-Instanz. Die Express-http-Proxy-Bibliothek verfügt über eine userResDecorator-Eigenschaft, die wir verwenden können, um „die Antwort des Proxy-Servers zu dekorieren“. Einfach ausgedrückt können wir die Antwort von Ghost ändern, bevor wir sie an den Browser des Benutzers senden.

Unser userResDecorator wird asynchron sein, um den Hauptthread nicht zu blockieren. Wir werden auf das Thema der asynchronen Verarbeitung beim Erstellen von Helfern zurückkommen. Zunächst müssen Sie wissen, dass nicht alles, was der Browser des Benutzers anfordert, dekoriert werden muss. Daher besteht der erste Schritt darin, den Inhaltstyp-Header der Antwort von Ghost zu überprüfen. Sie können dies wie folgt tun und dann vergleichen, ob es sich um Text/HTML handelt, um nur HTML-Dokumente zu dekorieren, die an den Benutzer zurückgegeben werden:

const path = require('path');

module.exports = {
    activate: function activate(ghost) {
        ghost.helperService.registerDir(path.resolve(__dirname, './lib/helpers'));
    }
};

In dieser bedingten Anweisung können wir mit der Änderung von htmlContent beginnen, aber warum brauchen wir das? Beginnen wir damit, die Grundlage für unseren benutzerdefinierten Helfer im Ghost-Theme zu schaffen!

In diesem Artikel werde ich einen benutzerdefinierten Helfer in der index.hbs-Datei (Homepage) meines Themes erstellen. An einer sichtbaren Stelle in der Vorlage „Lenker“ füge ich einen beispielhaften benutzerdefinierten Helfer hinzu und nenne ihn {{hello_world}}.

⚠️ Dann platziere ich es an einer sichtbaren Stelle auf der Startseite – aber beachten Sie, was passiert, wenn ich die Ghost-Seite aktualisiere!

const {SafeString, escapeExpression} = require('../../../../services/handlebars');

module.exports = function uppercase(text) {
    return `${text.toUpperCase()}`;
};

In dieser Variablen haben wir die Antwort der Ghost-Instanz als vollständigen HTML-Code der Seite. Stellen Sie sich vor, dass diese Antwort die Homepage Ihrer Ghost-Instanz ist. Der HTML-Inhalt enthält auch unseren Klartext {{hello_world}}, der als Klartext angezeigt wird. Wenn unser benutzerdefinierter Helfer in dieser Form vorliegt, können wir ihn mithilfe von Handlers.js (https://handlebarsjs.com/) in unserer Middleware kompilieren. Denken Sie daran, die Bibliothek zuerst über einen Paketmanager zu installieren, z. B. npm: npm install handlebars, und fügen Sie sie Ihrem Code hinzu: const handlebars = require("handlebars");.

// Where 'proxyRes' is your proxy response inside 'userResDecorator'
const contentType = proxyRes.headers['content-type'] || '';
if (!contentType.includes('text/html')) {
    // Return original content if response is not 'text/html'
    return proxyResData;
}

let htmlContent = proxyResData.toString('utf8');
// Do something with 'htmlContent' and return
return htmlContent;

Wow! Wir haben jetzt HTML mit Handlers.js kompiliert und gerendert – aber wir sind noch nicht fertig. Wir müssen noch unseren benutzerdefinierten Helfer {{hello_world}} registrieren. Fügen Sie den folgenden Code hinzu, vorzugsweise nach der Initialisierung von Handlers.js:

{{!< default}}
<div>



<p>After refreshing, I get an error message from Ghost because the {{hello_world}} helper doesn’t exist in Ghost's default helpers. For our logic to work, we must escape this helper so that it’s not treated as a helper by Ghost’s built-in Handlebars.</p>

<p>The correct way is to write this helper as \{{hello_world}}. This way, Ghost treats it as plain text. After refreshing the Ghost homepage, you should see the plain text {{hello_world}}. If this happens, you are on the right track. Let’s now return to the middleware server file, where we will use the response decorator.</p>

<p>⚠️ Remember to escape custom helpers in your theme! Don’t forget to add the \ character.<br>
</p>

<pre class="brush:php;toolbar:false">let htmlContent = proxyResData.toString('utf8');

Nach dem Neustart des Middleware-Servers und der Registrierung des oben genannten Helfers sollten Sie den gerenderten Helfer im Browser mit dem von unserem Helfer zurückgegebenen Text sowie dem aktuellen Datum und der aktuellen Uhrzeit sehen.

In dieser Phase können Sie Ihr Ghost-Theme um zusätzliche benutzerdefinierte Helfer erweitern, die Sie dem Middleware-Servercode hinzufügen.

Sicherheit

Vielleicht möchten Sie irgendwann mit Ihren Helfern verschiedene Dinge zurückgeben. Standardmäßig schützt die Bibliothek vor XSS-Angriffen, aber wenn Sie die SafeString-Methode verwenden, funktioniert dieser Schutz nicht mehr. Vermeiden Sie es wann immer möglich.

Noch etwas! Stellen Sie sich vor, ein Benutzer fügt einen solchen Helfer im Kommentarbereich unter einem Beitrag hinzu und fügt im Parameter schädliche Inhalte hinzu. Achten Sie auf die Sicherheit. Wenn Sie beispielsweise jeden HTML-Code vollständig rendern, könnten Sie anfällig für XSS-Angriffe sein. Es wird empfohlen, Handlers.js in bestimmten, geschlossenen Bereichen zu kompilieren und zu rendern. Sie können die Cheerio-Bibliothek (https://cheerio.js.org/) zum Parsen von HTML und zum Rendern von Lenkern bei Bedarf verwenden. Hier ist ein Beispiel dafür, wie Sie sich schützen können, indem Sie den vorherigen Rendering-Code ändern:

const path = require('path');

module.exports = {
    activate: function activate(ghost) {
        ghost.helperService.registerDir(path.resolve(__dirname, './lib/helpers'));
    }
};

Denken Sie daran, die Bibliotheksinitialisierung am Anfang Ihres Skripts hinzuzufügen: const asyncHelpers = require('handlebars-async-helpers');. Wenn bei der Installation aufgrund von Versionskonflikten zwischen handlebars-async-helpers und handlebars Probleme auftreten, stufen Sie handlebars einfach auf ^4.7.6 herunter. Leider wurde die asynchrone Hilfsbibliothek schon seit einiger Zeit nicht mehr gepflegt, funktioniert aber in der Praxis immer noch.

Datenbankkommunikation und Objekte

Wenn Sie Datenbankabfragen in Ghost durchführen möchten, um beispielsweise den aktuellen Beitrag abzurufen, ist dies möglich und nicht schwierig. Sie können eine Bibliothek wie knex (https://knexjs.org/) verwenden, die ein übersichtlicher und schneller SQL-Abfrage-Builder ist. Denken Sie daran, dass Sie hierfür handlebars-async-helpers benötigen. Konfigurieren Sie knex richtig, um eine Verbindung zur Ghost-Datenbank herzustellen.

Initialisieren Sie knex als DB-Variable und probieren Sie den folgenden Code aus:

const {SafeString, escapeExpression} = require('../../../../services/handlebars');

module.exports = function uppercase(text) {
    return `${text.toUpperCase()}`;
};

Fügen Sie dann in der post.hbs-Vorlage des Ghost-Designs den folgenden Helfer hinzu: {{post_title uuid="{{uuid}}"}}. In diesem Beispiel wird {{uuid}} abgerufen und als in Ghost verfügbarer Helfer übergeben, der das UUID-Feld unseres Helfers ausfüllt und dafür sorgt, dass der Beitragstitel vom benutzerdefinierten Helfer angezeigt wird.

Sie können axios auch verwenden, um HTTP-Anfragen an die Ghost Content API zu stellen, dies ist jedoch deutlich langsamer als die direkte Datenbankkommunikation.

Leistung

Ich weiß, dass eine Middleware-basierte Lösung in Bezug auf die Geschwindigkeit möglicherweise nicht die beste ist, aber ich persönlich verwende diese Lösung und habe keinen signifikanten Rückgang der Seitenladezeiten festgestellt. Die durchschnittliche Antwortzeit für eine einzelne Anfrage lag unter 100 ms (laut Express-Status-Monitor), und ich verwende einen benutzerdefinierten Helfer, der auf jeder Seite einige Werte aus der Datenbank abruft.

Sie können natürlich Caching-Mechanismen hinzufügen, um die Leistung der Middleware zu verbessern, oder alternative Lösungen anstelle von Express-http-Proxy verwenden.

Umsetzung von Architektur

Verwenden Sie Docker oder einen anderen Containerisierungsmechanismus. Ich habe es in meinem Projekt verwendet und es funktioniert großartig. Fügen Sie Ghost- und Datenbank-Images für Ghost, Nginx und ein Node.js-Image hinzu. Verbinden Sie sie mit einem gemeinsamen Netzwerk (Treiber: Bridge), konfigurieren Sie Nginx und den Node.js-Server entsprechend – alles ist ganz einfach!

Das obige ist der detaillierte Inhalt vonErstellen Sie individuelle Lenkerhelfer in Ghost!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!