Davon haben Sie wahrscheinlich schon gehört Geist , die neue ish-Blogging-Plattform, die die Blogging-Welt im Sturm erobert hat; es ist einfach, es ist glatt, es ist sexy; es hat dieses Live-Preview-Ding. Was ist nicht zu mögen?
Ich ziehe um Geist , wie viele Webdesigner, aus einem WordPress-Hintergrund. Aber bevor ich es geschafft habe, meinen Kopf herumzulegen WordPress 'Template-Funktionen hatte ich Dutzende, möglicherweise Hunderte von CMS-Optionen ausprobiert. Einige der einprägsamsten gehören ExpressionEngine , Textmuster das Unglückliche FrogCMS , eine alte, alte Schrift namens SüßNeuigkeiten , und viele mehr.
WordPress hat mir lange Zeit alles gegeben, was ich brauchte: leistungsfähige Template-Funktionen; eine endlose Versorgung mit Plugins; nur zu sehen, was ich tun könnte.
Aber WordPress war schon lange eine Menge mehr als eine Blogging-Engine. Es bewegt sich in gewisser Weise stetig in Richtung des Rahmens. Ein Veröffentlichungs-Framework, wenn Sie so wollen.
Ich habe den Punkt erreicht, an dem ich eine Software möchte, die bloggt, und das war's. Ich möchte meine Posts schreiben in Abschlag Geben Sie einige Schlüsselwörter ein, fügen Sie ein oder zwei Bilder hinzu und klicken Sie auf "Veröffentlichen", und vergessen Sie dann das Ganze.
Stellt sich heraus, ich bin nicht allein in meinem Wunsch nach einer tod-einfachen Blogging-Plattform. Die Schöpfer von Ghost haben große Anstrengungen unternommen, um all die Probleme, die wir dem Blogging-Prozess hinzugefügt haben, aus dem Weg zu räumen und eine einfache, schnelle Publishing-Plattform zu entwickeln, die die Arbeit erledigt. Es ist ein ganz anderes Biest.
Es basiert auf der Philosophie, dass ein CMS zum Bloggen eine Sache tun sollte und es gut macht. Sie werden keine Zeitschriften sehen, die auf dieser Plattform ohne viel Anpassung gestartet werden. Es ist ein Blog, und wenn man es zu etwas anderem macht, würde das seinen Zweck besiegen.
Hinzu kommt, dass es auf neuen Technologien aufbaut. Ghost ist aufgebaut Node.js , die JavaScript-Code auf dem Server und nicht im Browser ausführt. Es wird von den gleichen Leuten geliebt, die PaaS-Hosting lieben, und all diese neuen Systeme, die Leute wie ich zu verstehen suchen. In gewissem Sinne ist es von Anfang an zukunftssicher. Es ist Teil der ersten Generation einer neuen CMS-Generation.
Wohlgemerkt, aus der Sicht des Bloggers ist es nur eine einfache Schnittstelle zum Bloggen. Aus der Perspektive des Endbenutzers ändert sich nichts wirklich, außer vielleicht sieht das Standard-Blog-Thema ein bisschen "flach" aus. Aber unter der Haube sehen wir etwas völlig Neues, und das ist eine gute Sache.
Ghost einfach installieren.
Normalerweise müssen Sie eine oder zwei Komponenten separat installieren, um Ghost zu installieren und auf einem lokalen Computer auszuführen. Sie müssten Node.js installieren, und dann müssten Sie manuell einige zusätzliche Node-Pakete über die Befehlszeile installieren.
Das richtige Setup für Ghost erfordert die Verwendung der Befehlszeile. Für Leute, die mehr an den "Fünf-Minuten-Setup" -Prozess von WordPress mit MySQL-Datenbanken und einem grafischen Installer gewöhnt sind, kann dies unangenehm sein.
Wenn Sie die Befehlszeile auf einem Mac- oder Linux-Rechner nicht gewohnt sind, könnte das ein Problem sein.
Zum Glück, die freundlichen Leute drüben Bitnami machte grafische Installer für Windows, Mac und Linux.
Hier sind alle Schritte, die Sie befolgen müssen:
Da das Installationsprogramm Ihnen alle erforderlichen Komponenten wie Node.js und einen Mini-Server zur Verfügung stellt, ist das Dateiverzeichnis nicht gerade einfach.
Sie müssen den Ordner öffnen, in dem Sie Ghost installiert haben, und dann zu apps / ghost / htdocs / navigieren. Das ist die eigentliche Ghost-Installation.
Die Themen befinden sich in apps / ghost / htdocs / content / themes / .
Ghost-Themen sind ziemlich einfach zu erstellen, solange Sie HTML und CSS kennen. Programmierkenntnisse sind hilfreich, aber nicht unbedingt notwendig. Ghosts Template-System ist einfach und sogar ziemlich intuitiv, wenn Sie Themen für WordP erstellt haben ... ähem, andere CMS vorher.
Ich weiß, ich weiß. Der Vergleich zu WordPress ist alt. Aber dieses ein bisschen Software hat den Markt seit Jahren beherrscht - ähnlich wie Photoshop für Bilder - die Vergleiche sind unvermeidlich. In diesem Fall sind sie sogar nützlich.
Leute, die WordPress-Themes erstellt haben, werden feststellen, dass einige der Dateistrukturen und Templating-Sprachen vertraut sind, obwohl sie viel einfacher sind. WordPress PHP-Funktionen geben Ihnen eine Menge Flexibilität; aber sie komplizieren auch den Themencodierungsprozess.
Ghosts Templating-System (gebaut mit Lenker ), ist semantisch, leistungsfähig und viel lesbarer als die rohen PHP-Funktionen, mit denen wir arbeiten. Ich persönlich finde es einfach viel einfacher zu benutzen.
Auf der anderen Seite ist es nur für den Aufbau von Blogs gedacht. Sie werden keine hybride Nachrichtenseite / soziales Netzwerk / Forum mit dieser Sache bauen. Einfacher, aber begrenzt. Das ist der Kompromiss, der der gesamten Plattform innewohnt.
Erstellen eines Grundthemas für Ghost.
Nun, wenn Sie das Video gesehen haben (Sie sollten es wirklich tun), werden Sie die Grundlagen kennen. Ihre Ghost-Installation befindet sich im Entwicklungsmodus und Sie haben ein sehr, sehr begrenztes Design, mit dem Sie arbeiten können.
Um es kurz zu fassen: Technisch gesehen benötigen Sie nur drei Dateien, um ein Ghost-Theme zu erstellen:
index.hbs (This template will list your posts)post.hbs (This will display a single post)package.json (This contains theme information)
Es gibt jedoch andere grundlegende Vorlagen, die Sie wahrscheinlich hinzufügen möchten. Sie können natürlich benutzerdefinierte Vorlagen für Seiten, Posts, Autoren, Tags und mehr erstellen. All das werden wir mit der Zeit erreichen.
Im Moment möchte ich mich nur auf die Grundlagen konzentrieren: die Struktur des Themas, die Erweiterung der Vorlagendateien und die Platzierung des gesamten HTML. Das bedeutet, dass wir unserem Ghost-Theme dort einige zusätzliche Dateien und Ordner hinzufügen müssen. Werfen wir einen Blick auf die überarbeitete Struktur:
default.hbsindex.hbspage.hbspost.hbspackage.jsonassets/css/images/javascript/partials/ (Just examples, here. Not required.)navigation.hbsloop.hbs
default.hbs wird als Grundlage für Ihr Thema dienen. Ihre ,
, und Tags werden hier hingehen. Jede andere Vorlage wird "innerhalb" dieser Vorlage gerendert. Jetzt musst du es nicht so machen; aber es ist Standardpraxis und wird von den Ghost Entwicklern selbst sehr empfohlen.page.hbs ist genau das, was Sie denken, die Vorlage für statische Seiten. Der Ordner "Assets" ist ziemlich selbsterklärend.
In den Teiltabellen / Ordnern können Sie Codeteile, die Sie mehr als einmal verwenden, auf verschiedenen Vorlagen aufbewahren. Zum Beispiel könnte navigation.hbs den Site-Namen / das Logo und die primäre Navigation enthalten. loop.hbs gibt möglicherweise eine Liste mit Posts mit generischem HTML und Styling aus. Dies könnte in einer Reihe von Orten auf der Website verwendet werden.
Lassen Sie uns Ihnen also zeigen, wie einfach das Templating sein kann. Zuerst richten wir unsere default.hbs- Datei ein:
{{! Here we see the functions for page titles and descriptions. }}{{meta_title}} {{! Anything in the assets/ folder can be easily linked to, like so: }}{{! This function here outputs meta keywords, some styling information, stuff like that. }}{{ghost_head}}{{! Any .hbs file in the partials folder can be called in like this. }}{{> header}}{{! This is where the content of all the sub-templates will be output. }}{{{body}}}{{! Like ghost_head, this outputs scripts, data, that sort of thing. Currently adds a link to jQuery by default. }}{{ghost_foot}}
Jetzt erstellen wir die navigation.hbs- Vorlage, da diese auf jeder Seite sein wird:
{{! This should be fairly self-explanatory. }} {{@blog.title}}
{{! Each post excerpt will be displayed with this same markup. }}{{#foreach posts}}» {{/für jede}}{{! Links zu den nächsten und vorherigen Seiten von Links. Sie können festlegen, wie viele Links auf jeder Seite im Admin-Steuerfeld angezeigt werden. }}{{Seitennummerierung}}
Jetzt werden wir alles mit der index.hbs- Vorlage verknüpfen , die auch als Startseite fungiert, sofern Sie nichts anderes angeben. Der Code dafür, wie wir den HTML-Code anderswo aufgeteilt und organisiert haben, ist sehr einfach:
{{!< default}}{{! That isn't a comment up there. It tells Ghost that everything on this page must be rendered inside the default.hbs template.}}{{! This next function can be used to call in anything in the partials/ folder. In this case, we're calling up everything we just put into "loop.hbs". }}{{> loop}}
Und das ist es. Ich sagte dir, es war einfach!
Wenn Sie Probleme haben, schauen Sie sich das Standardthema von Ghost an Dokumentation . Spielen Sie mit dem HTML, spielen Sie mit dem Vorlagensystem und fangen Sie an, Ihr Thema zu stylen.
Nächstes Mal werden wir ein wenig tiefer graben. In der Zwischenzeit, viel Spaß!