Adventskalender Tag 13 – Ghost – Ein Theme in seiner einfachsten Form

Heute möchte ich mit euch ein Ghost Theme in seiner einfachsten Form bauen.

Die einzigen Dateien die dafür von Ghost verlangt werden sind index.hbs und post.hbs. Das hbs steht für handlebars, einer JavaScript templating Bibliothek, welche von Ghost unter anderem wegen dessen Erweiterbarkeit genutzt wird.

Handlebars kommt bereits mit einigen Helper-Methoden. Viel spannender ist aber das Detail, dass man sich seine eigenen Helper schreiben kann, um die Daten für die Views zu modellieren. Das und noch vieles mehr macht Handlebars zu einem würdigen Kandidaten für eine Template-Engine, sei es für einfache oder komplexe Applikationen.

Einstellungen

Um zu beginnen, gehen wir in das Ghost-Hauptverzeichnis und navigieren von dort zu /content/themes. Wir erstellen hier einen neuen Ordner namens Basic Theme. Innerhalb dieses Ordners kommen nun die zwei von Ghost benötigten Dateien: index.hbs und post.hbs. Um dieses Theme zu aktivieren müssen wir jetzt nur noch Ghost neu starten. Wenn dies erledigt ist rufen wir http://yourblog.com/ghost/settings/general/ auf und wählen das Basic Theme aus.

ghost-settings-middle-sized

index.hbs

index

    {{#foreach posts}}
  • {{{title}}}
  • {{/foreach}} </ul

Das Template innerhalb von index.hbs fungiert als Startseite. Dieser Seite wird eine Liste von Beiträgen übergeben. Um diese Beiträge auszugeben nutzen wir den foreach Helper, welcher als Iterator für Beiträge dient. Jeder Beitrag hat einen url Helper, welcher auf die jeweilige Einzelseite des Beitrages zeigt.

post.hbs

post

{{#post}}
    

{{title}}

{{content}}
{{/post}}

Das Template in post.hbs dient der Anzeige einzelner Beiträge. Um auf die Daten eines einzelnen Beitrages zugreifen zu können muss mit dem Block-Ausdruck {{#post}} der Kontext gewechselt werden. Innerhalb dieses Blocks stehen alle Informationen, die zur Umsetzung der Einzelseite benötigt werden, zur Verfügung.

Fazit

Und das wars auch schon. Unser minimales Theme ist fertig und freut sich darauf gestyled zu werden. Zur Umsetzung eines solch einfachen Themes benötigt man nicht mehr als handlebars und HTML. Natürlich beschränkt sich das Theming bei Ghost nicht auf die Dateien und Notationen die hier aufgeführt sind. Die Ghost Dokumentation gibt einen guten Einblick darüber, was mit der Plattform alles möglich ist.

Referenzen:

Ghost theme guide
Theme helper

Newsletter abonnieren

Schaue unsere Datenschutzverordnung an

Das könnte dich auch interessieren

Die besten WooCommerce Themes 2019

Welches Theme darf es denn sein? Das fragen uns unsere Onlineshop-Kunden immer wieder. Wir haben eine Auswahl für dich: Klassiker, aber auch an unbekannte ...

Mehr erfahren

Neu: Atomion - Das erste Gutenberg WooCommerce Theme

Unser neues Theme Atomion macht deinen Onlineshop deutlich attraktiver und schneller zu verwalten. Mit einem ausgefeilten Design, einer klaren Benutzerfüh ...

Mehr erfahren

Aktion: 20% Sommer-Rabatt auf unsere WooCommerce-Themes

Es wird Sommer, und da solltest du eigentlich nicht vor dem Rechner sitzen. Aber du kannst ab morgen bis Sonntag sparen: Mit 20 Prozent Discount auf unsere ...

Mehr erfahren

Kommentare

2 Kommentare

  1. Ok. Danke erst mal für die klare … Anleitung.
    Allerdings ist mir nicht ganz klar geworden, wie ich GHOST einsetzen kann, wann es sich lohnt … und wie das mit WordPress zusammen hängt. „Theme“ heißen die Templates ja nur bei WordPress, oder? Bin etwas verunsichtert…

  2. Danny Witting

    Hallo Mark,

    Ghost hat in erster Linie nichts mit WordPress zu tun. Ghost ist eine eigene Blogging Plattform. Es ist insgesamt schlanker als WordPress und bietet dementsprechend auch nicht den gleichen funktionalen Umfang. Wenn man also einfach nur schreiben möchte und auf die von WordPress bekannten Plugins verzichten kann, ist Ghost eine Alternative.
    Ein Theme ist softwareübergreifend ein ‚Kleid‘ für eine Software, die in der Regel aus mehreren Templates zusammengestellt wird.

Schreibe eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst folgende HTML Tags verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>