Advertisement
  1. Code
  2. CMS

Erstellen Sie ein CMS: nodePress

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Sie haben erfolgreich ein flaches Dateisystem Content Management System (CMS) mit Go erstellt.  Der nächste Schritt besteht darin, dasselbe Ideal zu verwenden und einen Webserver mit Node.js zu erstellen.  Ich werde Ihnen zeigen, wie Sie die Bibliotheken laden, den Server erstellen und den Server ausführen.

Dieses CMS verwendet die Site-Datenstruktur, wie im ersten Lernprogramm, Erstellen eines CMS: Struktur und Stil, beschrieben.  Laden Sie diese grundlegende Struktur daher in einem neuen Verzeichnis herunter und installieren Sie sie.

Knoten- und Knotenbibliotheken abrufen

Node.js kann auf einem Mac am einfachsten mit Homebrew installiert werden.  Wenn Sie Homebrew noch nicht installiert haben, zeigt Ihnen das Tutorial Homebrew Demystified: Der Ultimate Package Manager von OS X.Um Node.js mit Homebrew zu installieren, geben Sie diese Anweisung in ein Terminal ein:

Um Node.js mit Homebrew zu installieren, geben Sie diese Anweisung in ein Terminal ein:

Wenn Sie fertig sind, sind auf Ihrem Mac die Befehle node und npm vollständig installiert.  Befolgen Sie für alle anderen Plattformen die Anweisungen auf der Node.js-Website.

Seien Sie vorsichtig: Viele Paketmanager installieren derzeit Node.js Version 0.10.  In diesem Lernprogramm wird davon ausgegangen, dass Sie über Version 5.3 oder neuer verfügen.  Sie können Ihre Version überprüfen, indem Sie Folgendes eingeben:

Der note führt den JavaScript-Interpreter aus.  Der Befehl npm ist ein Paketmanager für Node.js, um neue Bibliotheken zu installieren, neue Projekte zu erstellen und Skripts für ein Projekt auszuführen.  Es gibt viele großartige Tutorials und Kurse zu Node.js und NPM bei Envato Tuts +.

Um die Bibliotheken für den Webserver zu installieren, müssen Sie diese Befehle im Programm "Terminal.app" oder "iTerm.app" ausführen:

Express ist eine Plattform zur Entwicklung von Webanwendungen.  Sie ähnelt der goWeb-Bibliothek in Go.  Lenker ist die Templating Engine zum Erstellen der Seiten.  Moment ist eine Bibliothek zum Arbeiten mit Datumsangaben. Markiert ist ein großartiger Markdown to HTML Konverter in JavaScript.  Jade ist eine HTML-Abkürzungssprache für die einfache Erstellung von HTML.  Morgan ist eine Middleware-Bibliothek für Express, die die Apache-Standardprotokolldateien generiert.

Alternativ können Sie die Bibliotheken installieren, indem Sie die Quelldateien für dieses Lernprogramm herunterladen.  Nach dem Herunterladen und Entpacken geben Sie Folgendes in das Hauptverzeichnis ein:

Dadurch wird alles installiert, was zum Erstellen dieses Projekts erforderlich ist.

nodePress.js

Jetzt können Sie mit dem Erstellen des Servers beginnen.  Erstellen Sie im obersten Verzeichnis des Projekts eine Datei mit dem Namen nodePress.js, öffnen Sie sie in einem Editor Ihrer Wahl und fügen Sie den folgenden Code hinzu.  Ich werde den Code erklären, wenn er in die Datei eingefügt wird. 

Der Servercode beginnt mit der Initialisierung aller zum Erstellen des Servers verwendeten Bibliotheken.  Bibliotheken, die keinen Kommentar mit einer Webadresse enthalten, sind interne Node.js-Bibliotheken.

Als Nächstes habe ich alle globalen Variablen und Bibliothekskonfigurationen eingerichtet.  Die Verwendung globaler Variablen ist nicht die beste Methode für das Software-Design, aber sie funktioniert und sorgt für eine schnelle Entwicklung.

Die parts variable ist ein Hash-Array, das alle Teile einer Webseite enthält.  Jede Seite verweist auf den Inhalt dieser Variablen.  Es beginnt mit dem Inhalt der Datei server.json, die sich oben im Serververzeichnis befindet.

Ich verwende dann die Informationen aus der Datei server.json, um die vollständigen Pfade zu den für diese Site verwendeten styles- und layouts verzeichnissen zu erstellen.

Drei Variablen werden dann auf Nullwerte gesetzt: siteCSS, siteScripts und mainPage.  Diese globalen Variablen enthalten den gesamten Inhalt der CSS, JavaScripts und der Hauptindexseite.  Diese drei Elemente sind die am häufigsten angeforderten Elemente auf einem Webserver.  Das Speichern im Speicher spart daher Zeit.  Wenn die Cache-Variable in der Datei server.json den Wert false hat, werden diese Elemente bei jeder Anforderung erneut gelesen.

Dieser Codeblock dient zum Konfigurieren der Markierten Bibliothek zum Generieren von HTML aus Markdown.  Meistens schalte ich Unterstützung für Tabellen und SmartLists ein.

Die parts variable wird weiter mit den Teilen aus den styles - und layout verzeichnissen geladen.  Jede Datei im parts-Verzeichnis im site-Verzeichnis wird auch in die globale Variable von parts geladen.  Der Name der Datei ohne die Erweiterung ist der Name, unter dem der Inhalt der Datei gespeichert wird.  Diese Namen werden im Handlebars-Makro erweitert.

Der nächste Codeabschnitt definiert die Handlebars-Helfer, die ich für die Verwendung auf dem Webserver definiert habe: save, date und cdate.  Der Sicherungshelfer ermöglicht das Erstellen von Variablen innerhalb einer Seite.  Diese Version unterstützt die GoPress-Version, bei der Name und Wert des Parameters durch ein "|" getrennt sind. Sie können auch ein Speichern mit zwei Parametern angeben.  Zum Beispiel:

Dies führt zu den gleichen Ergebnissen.  Ich bevorzuge den zweiten Ansatz, aber die Handlebars-Bibliothek in Go lässt nicht mehr als einen Parameter zu.

Die Hilfe für date und cdate formatiert das aktuelle Datum (date) oder ein bestimmtes Datum (cdate) gemäß den Formatierungsregeln der Moment.js-Bibliothek.  Der cdate-Helper erwartet, dass das Datum als erster Parameter gerendert wird und das Format ISO 8601 aufweist.

Nun erstellt der Code eine Express-Instanz zum Konfigurieren der tatsächlichen Server-Engine.  Die Funktion nodePress.use()  richtet die Middleware-Software ein.  Middleware ist jeder Code, der bei jedem Aufruf an den Server bereitgestellt wird.  Hier habe ich die Morgan.js-Bibliothek eingerichtet, um die richtige Serverprotokollausgabe zu erstellen.

In diesem Codeabschnitt werden alle zum Implementieren des Webservers erforderlichen Routen definiert.  Alle Routen führen die Funktion setBasicHeader() aus, um die richtigen Headerwerte festzulegen.  Alle Anforderungen für einen Seitentyp rufen die Funktion page() hervor, während alle Anforderungen für die Seite mit dem Beitragstyp die Funktion posts() aufrufen.

Der Standard für Content-Type ist HTML.  Daher wird der Content-Type für CSS, JavaScript und Bilder explizit auf den entsprechenden Wert gesetzt.

Sie können Routen auch mit den Verben put, delete und post definieren.  Dieser einfache Server verwendet nur das get-Verb.

Bevor Sie die verschiedenen Funktionen definieren, müssen Sie zuerst den Server starten.  Die Datei server.json enthält den DNS-Namen (hier localhost) und den Port für den Server.  Nach dem Analysieren verwendet die listen() - Funktion des Servers die Portnummer, um den Server zu starten.  Sobald der Serverport geöffnet ist, protokolliert das Skript die Adresse und den Port für den Server.

Die erste definierte Funktion ist die Funktion setBasicHeader().  Diese Funktion setzt den Antwortheader so, dass der Browser die Seite für einen Monat im Cache speichert.  Sie teilt dem Browser außerdem mit, dass der Server ein nodePress-Server ist.  Wenn Sie andere Standardheaderwerte möchten, fügen Sie diese hier mit der Funktion response.append() hinzu. Funktion.

Die Funktion page() sendet die Layoutvorlage für eine Seite und den Speicherort der Seite auf dem Server an die Funktion processPage().

Die post() - Funktion ist genauso wie die page() - Funktion, mit der Ausnahme, dass Posts für jeden Post mehr Elemente enthalten.  In dieser Server-Serie enthält ein Beitrag einen type, eine Kategorie und den tatsächlichen post.  Der Typ ist entweder blogs oder news.  Die Kategorie ist flatcms.  Da diese Verzeichnisnamen darstellen, können Sie sie beliebig machen.  Passen Sie die Benennung einfach an das in Ihrem Dateisystem an.

Die Funktion processPage() ruft das Layout und den Pfad zum Seiteninhalt auf, der gerendert werden soll.  Die Funktion beginnt mit dem Erstellen einer lokalen Kopie der globalen Variablen der parts und dem Hinzufügen des Hashtags "Inhalt" mit den Ergebnissen des Aufrufs von figurePage().  Dann setzt sie den PageName-Hashwert auf den Namen der Seite.

Diese Funktion kompiliert dann den Seiteninhalt mithilfe von Lenkern zur Layoutvorlage.  Danach erweitert die Funktion processShortCodes() alle auf der Seite definierten Kurzcodes.  Dann durchläuft die Handlebars-Vorlagen-Engine den Code noch einmal.  Der Browser erhält dann die Ergebnisse.

Die Funktion processShortCodes() übernimmt den Inhalt der Webseite als Zeichenfolge und sucht nach allen Kurzwahlen.  Ein Shortcode ist ein Codeblock, der HTML-Tags ähnelt.  Ein Beispiel wäre:

Dieser Code enthält einen Kurzcode für einen box um einen HTML-Absatz.  Wo HTML verwendet < und >, verwenden Shortcodes -[ und ]-.  Nach dem Namen kann oder darf keine Zeichenfolge mit Argumenten für den Kurzcode vorhanden sein.

Die Funktion processShortCodes() ermittelt einen Shortcode, ermittelt dessen Namen und Argumente, ermittelt den Inhalt, verarbeitet den Inhalt für Shortcodes, führt den Shortcode mit den Argumenten und dem Inhalt aus, fügt die Ergebnisse der fertigen Seite hinzu und sucht nach nächster Shortcode im Rest der Seite.  Die Schleife wird durch rekursives Aufrufen der Funktion ausgeführt.

In diesem nächsten Abschnitt wird die json-Struktur für shortcodes definiert, die den Namen eines seiner Funktion zugeordneten Kurzcodes definiert.  Alle Shortcode-Funktionen akzeptieren zwei Parameter: args und inside.  Die Argumente sind alles nach dem Namen und dem Leerzeichen und vor dem Schließen des Tags.  Das inside ist alles, was in den öffnenden und schließenden Shortcode-Tags enthalten ist.  Diese Funktionen sind einfach, aber Sie können einen Shortcode erstellen, um alles auszuführen, was Sie sich in JavaScript vorstellen können.

Die Funktion figurePage() erhält den vollständigen Pfad zu einer Seite auf dem Server.  Diese Funktion prüft dann, ob es sich um eine HTML-, Markdown- oder Jade-Seite handelt, basierend auf der Erweiterung.  Ich verwende immer noch .amber für Jade, da dies die Bibliothek war, die ich mit dem goPress-Server verwendete.  Alle Markdown- und Jade-Inhalte werden vor der Weitergabe an die aufrufende Routine in HTML-Code übersetzt.  Da der Markdown-Prozessor alle Anführungszeichen in &quot;  ich sie zurück, bevor ich sie zurückgebe.

Die fileExists() - Funktion ersetzt die fs.exists() - Funktion, die früher Bestandteil der fs-Bibliothek von Node.js war.  Es verwendet die Funktion fs.statSync(), um den Status der Datei abzurufen.  Wenn ein Fehler auftritt, wird ein false zurückgegeben.  Andernfalls wird true zurückgegeben.

Die letzte Funktion ist die MergeRecursive() - Funktion. Das zweite Durchgangsobjekt wird in das erste übergebene Objekt kopiert. Ich benutze dies, um die globale Variable der Hauptteile in eine lokale Kopie zu kopieren, bevor sie seitenabhängige parts hinzufügt.

Lokal laufen

Nach dem Speichern der Datei können Sie den Server folgendermaßen ausführen:

Alternativ können Sie das npm-Skript verwenden, das sich in der package.json-Datei befindet.  Sie führen npm-Skripts wie folgt aus:

Dadurch wird das Startskript ausgeführt, das sich in der package.json-Datei befindet.

nodePress Server Main Page
nodePress Server Hauptseite

Richten Sie Ihren Webbrowser auf http://localhost:8080, und Sie sehen die obige Seite. Sie haben vielleicht bemerkt, dass ich der Hauptseite mehr Testcode hinzugefügt habe.  Alle Änderungen an den Seiten sind im Download für dieses Tutorial enthalten.  Meist handelt es sich nur um kleinere Verbesserungen, um die Funktionalität vollständiger zu testen und um Unterschiede zwischen verschiedenen Bibliotheken zu finden.  Der bemerkenswerteste Unterschied ist, dass die Jade-Bibliothek $ nicht zur Benennung von Variablen verwendet, während Amber dies tut.

Fazit

Jetzt haben Sie genau dasselbe flache Dateisystem-CMS in Go und Node.js.  Dies verkratzt nur die Oberfläche dessen, was Sie mit dieser Plattform erstellen können.  Experimentieren Sie und probieren Sie etwas Neues aus.  Das ist der beste Teil beim Erstellen eines eigenen Webservers.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.