Erstellen Sie Ihr eigenes Blog-Thema für Ghost

Geist ist eine neue und kostenlose Open Source Blogging Plattform. Durch Kickstarter erfolgreich finanziert, übertraf es seine ursprüngliche Forderung von nur 25.000 GBP und erzielte im Mai 2013 mehr als 196.000 GBP an Finanzmitteln von der Community. Ghost wurde von John O'Nolan ins Leben gerufen und hat einen einzigartigen Zweck darin, Bloggern eine einfache Oberfläche zur Verfügung zu stellen, die es ihnen ermöglicht Schreiben und veröffentlichen Sie ihre Inhalte ohne den Aufwand oder die Ablenkung durch die Komplexität der Entwicklung traditioneller Plattformen.

Sehen Sie sich einen exklusiven Screencast dieses Tutorials an:



Ghost wurde von Grund auf wunderschön gestaltet. Dank der übersichtlichen und vereinfachten Benutzeroberfläche können Sie schnell durch das Archiv blättern, sodass Sie weniger Zeit für die Verwaltung Ihres Blogs und mehr Zeit für das Bloggen benötigen. Es verfügt über einen intelligenten Schreibbildschirm mit Markdown, einer Echtzeitvorschau auf dem rechten Bildschirm und einer einfachen Drag & Drop-Funktion zum Hinzufügen von Bildern.

wie man den Hintergrund in Photoshop cs6 verwischt

Ghost hat drei Hauptprinzipien: Es wurde eher für Benutzer als für Entwickler wie viele andere Blogging- und CMS-Plattformen entwickelt. Die Plattform verfügt über eine MIT-Lizenz, sodass Sie mit dieser Plattform mit wenigen Einschränkungen das tun können, was Sie möchten. Endlich ist es für die Liebe gemacht. Ghost ist eine gemeinnützige Organisation. Seine Motivation ist es, Blogger zu unterstützen, anstatt Investoren zufrieden zu stellen. In diesem Tutorial werde ich Ihnen zeigen, wie Sie Ghost lokal installieren und einrichten und Ihr erstes Ghost-Thema erstellen.

Laden Sie die Unterstützungsdateien für dieses Tutorial .

Beginnen Sie mit dem Erstellen unseres Ghost-Themas im Ghost-Installationsordner. Unter Inhalt> Themen Erstellen Sie ein neues Thema mit dem Namen mein Thema . Stellen Sie sicher, dass dies in Kleinbuchstaben ohne Leerzeichen steht (Bindestriche sind zulässig). Dies ist das Verzeichnis, in dem sich unsere Themencodebasis befindet. Erstellen Sie in diesem Verzeichnis die folgenden Dateien und Ordner:

- /assets/ — /css/ — normalize.css — screen.css — /images/ — /js/ — /fonts/ - /partials/ — header.hbs - default.hbs - index.hbs - post.hbs

Beide index.hbs und post.hbs sind die einzigen Dateien, die für ein gültiges Thema erforderlich sind. Ohne diese erhalten Sie eine Fehlermeldung.

Wir trennen unseren Header als Teilvorlage, um den Code in unserem Thema besser verwalten und wiederverwenden zu können

Wir trennen unseren Header als Teilvorlage, um den Code in unserem Thema besser verwalten und wiederverwenden zu können

Aktivieren Sie das neue Thema

Navigieren Sie nun im Ghost-Dashboard zu Einstellungen> Allgemein . Unter Thema Wählen Sie das neue Thema aus, das Sie gerade erstellt haben mein Thema . Wenn es fehlt, müssen Sie zum Terminal gehen und Ghost neu starten. Klicken speichern um dieses Thema zu aktivieren. Sie werden noch nichts im Frontend sehen. Dies liegt daran, dass wir noch kein Markup in unser Thema einfügen müssen.

Lenker verwenden

Ghost verwendet eine Template-Sprache namens Lenker.js . Vordefinierte Lenkerausdrücke erleichtern das Erstellen und Verwalten von Ghost-Themen.

Der Lenker trennt die Vorlagen für Sie vom unformatierten HTML. Beachten Sie, dass Sie mit dem Lenker keine Funktionen schreiben oder Variablen halten können. Der Lenker wurde einfach entwickelt, um Inhalte anzuzeigen, in denen die Ausdrücke ausgegeben werden.

Lenkerausdrücke sind in geschweifte Klammern eingeschlossen und sehen folgendermaßen aus: {{Autorenname}} . Dies sieht im Grunde die Autorenname Eigenschaft und gibt es aus.

Default.hbs

Lassen Sie uns die Hände schmutzig machen und unser Thema erstellen. Öffne die default.hbs in Ihrem bevorzugten Texteditor. Dies ist die Basisvorlage und enthält alle grundlegenden , , Tags, die auf Ihrer Website verwendet werden.

wie man im Kino animiert 4d

In diese Vorlage geben wir unseren HTML-Doctype, grundlegende Meta-Tags sowie Kopf- und Körper-Tags ein. (Sehen default.hbs in Tutorial-Dateien.) Sie werden Ausdrucks-Tags bemerken: {{! Responsive Meta Tags}} . Alle Ausdrücke, die mit einem Ausrufezeichen in den geschweiften Klammern versehen sind, sind Kommentare und werden nicht im endgültigen Quellcode gedruckt.

Sie können den Helfer {{date}} verwenden, um das Veröffentlichungsdatum des Blogs auszugeben, und die Formatoption verwenden, um das Datumsformat zu steuern

Das {{ghost_head}} Der Helfer wird verwendet, um alle Systemskripte, Stile und Meta-Tags auszugeben. Das {{ghost_foot}} Der Helfer wird verwendet, um Skripte am unteren Rand des Dokuments auszugeben. Der Lenkerausdruck {{{Körper}}} ist wichtig. Hier wird Ihr gesamter Inhalt angezeigt, wodurch die Standardvorlage erweitert wird. Folgende {{body_class}} wird verwendet, um automatisch CSS-Klassennamen für das Targeting bestimmter Seiten zu generieren:

{{{body}}} {{ghost_foot}} index.hbs

Jetzt in unserer index.hbs (siehe diesen Quellcode in den Projektdateien) verwenden wir den Ausdruck Lenker {{!< default}} ganz am Anfang dieses Dokuments, um auf unsere vorherige Basisvorlage zu verweisen. Diese Vorlage wird für unsere Homepage verwendet. Wir werden jeden Blog-Beitrag innerhalb des foreach-Helfers gestalten wollen. Durch die Öffnung {{#foreach posts}} und schließen {{/für jedes}} Schleife, alles in diesem wird jeden Beitrag mit dem Markup anzeigen.

Best Buy MacBook Pro Black Friday 2016

Um den Inhalt jedes Blogposts anzuzeigen, verwenden wir einen Lenkerausdruck {{Inhalt}} . Wir können die Wortzahl auch mithilfe des Parameters begrenzen Wörter = '100' .

Namenskonventionen für Klassen und IDs

Sie werden feststellen, dass alle Klassennamen bearbeitet werden mein Thema_ . Dies ist eine empfohlene Vorgehensweise beim Erstellen eines Ghost-Themas. Ghost weist bestimmten Elementen in Ihrem Thema automatisch bestimmte Klassennamen und insbesondere IDs zu. Sie sollten Konflikte vermeiden und Ihren Umfang an Klassennamen berücksichtigen.

Teilweise

Normalerweise können wir unser Header-Markup direkt unter dem einfügen {{!< default}} Der Vorteil von Lenkervorlagen ist jedoch die hierarchische Unterstützung, bei der eine Vorlage eine andere erweitern kann. Dies schließt die Verwendung von Partials ein. Dies hilft, Wiederholungen von Code zu vermeiden und die Wiederverwendbarkeit zu fördern. Wir können unseren Header in eine Teilvorlage aufteilen.

Mit dem foreach-Helfer behandelt index.hbs den Beitrag

Mit dem foreach-Helfer verarbeitet index.hbs das Objekt des Posts, um jeden Blog-Post auf der Homepage auszugeben

Öffnen Sie im Teilverzeichnis die header.hbs . Im Ghost-Dashboard die Einstellungen können Sie Ihr eigenes Blog-Logo und Blog-Titelbild hochladen. Wir werden eine verwenden wenn Anweisung, um zu überprüfen, ob ein Blog-Titelbild vorhanden ist. Wenn ja, geben wir es als Hintergrundbild aus:

{{#if @blog.cover}}style='background-image: url({{@blog.cover}})'{{/if}}

Dieses Mal prüfen wir, ob ein Blog-Logo verfügbar ist.

{{#if @blog.logo}} {{/if}}

Das @Blog Global Data Accessor hat Zugriff auf globale Einstellungen in Ghost, die wir in unserem Thema ausgeben können. Lassen Sie uns nun in den lustigen Teil des Stylings unseres Themas eintauchen. In unserem Thema haben wir verlinkt normalize.css für unseren HTML5-fähigen CSS-Reset. In der Datei screen.css geben wir alle unsere benutzerdefinierten Designstile ein. Wir werden dann einige globale Stile hinzufügen, gefolgt von der Gestaltung unseres Headers und dem Festlegen eines maximale Breite um zu verhindern, dass sich unser Layout über eine bestimmte Pixelgröße erweitert:

.mytheme_page { max-width: 980px; margin: 0 auto; } .mytheme_header { padding:20px 0; text-shadow: 2px 2px 2px rgba(26, 26, 26, 0.1); text-align: center; color: #2f3727; }

Gestalten Sie nun jeden Blog-Beitrag in seinem Artikelcontainer:

main article { margin: 30px 0; borderz-left:1px solid #DBDBDB; border-right:1px solid #DBDBDB; background-color: #FFFFFF; } .mytheme_post_content { padding: 0 20px; } .mytheme_post_title { margin: 0 0 20px 0; padding: 10px; font-size: 2em; letter-spacing: 2px; text-align: center; text-shadow: 2px 2px 2px rgba(26, 26, 26, 0.2); color: #FFFFFF; background-color: #8ACD36; } .mytheme_post_title a { text-decoration: none; color: #FFFFFF; } .mytheme_main_img img { width: 100%; max-width: 100%; border: 0; }

Platzieren Sie das Datum auf der linken Seite und die Weiterlesen Taste gegenüber. Geben Sie diesem Link die Darstellung einer Schaltfläche:

.mytheme_post_info { overflow: auto; padding: 0 20px; background-color: #98C148; } .mytheme_date { float: left; padding-top: 20px; color: #FFFFFF; } .button { float: right; padding: 20px 0; } .button a { padding: 5px; transition: ease .3s; text-decoration: none; color: #FFFFFF; background-color: #39A9DA; } .button a:hover { background-color: #199ED9; }

Wir haben die wichtigsten Aspekte bei der Entwicklung eines Ghost-Themas angesprochen. Hoffentlich hat dieser Einblick Möglichkeiten eröffnet, Ihr eigenes personalisiertes Thema zu erstellen. Sie werden sehen, dass das Erstellen eines Ghost-Themas mit den vordefinierten Lenkerausdrücken sehr einfach zu erlernen ist.

ist MacBook Air gut für Photoshop

Wählen Sie das neu erstellte Thema im Dashboard aus, um es zu aktivieren. Möglicherweise müssen Sie Ghost im Terminal neu starten, um das Thema aufzunehmen

Wählen Sie das neu erstellte Thema im Dashboard aus, um es zu aktivieren. Möglicherweise müssen Sie Ghost im Terminal neu starten, um das Thema aufzunehmen

Vergessen Sie nicht, das Tutorial herunterzuladen Begleitdateien . Lesen Sie auch die Ghost-Dokumentation für Mehr Informationen um Ihnen zu helfen, Ihr eigenes Thema zu erstellen und anzupassen.

Wörter :: Steven Wu

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 252.