Ghost-Theme-Dateien und -Ordner organisieren

Dies ist der zweite Teil unserer Ghost Theme-Tutorialreihe. Alles von hier setzt voraus, dass Sie ein grundlegendes Verständnis von Ghost haben. Wenn nicht, nehmen Sie sich bitte die Zeit, um den Begriff Grundlegendes zu verstehen: Entwicklungsphasen..

Wie im vorigen Abschnitt beschrieben, gibt es zwei Schritte für das Entwerfen eines Designs für Ghost: die Erstellung von Vorlagendateien und das Erstellen von Formaten.

In diesem Lernprogramm konzentrieren wir uns auf die erste Stufe, indem wir Sie Schritt für Schritt durch den Einstellungsprozess Ihrer Vorlagen führen. Sie erfahren etwas über die Vorlagendatei und das Teilsystem von Ghost, über die Vorlagetags für die Lenkstangen und über das Markup-Skelett Ihres Themas.

Hinweis: Dieses Lernprogramm wird auf einem Windows-Computer durchgeführt. Führen Sie daher die entsprechenden Schritte auf Ihrem bevorzugten Betriebssystem aus.

Sie müssen außerdem Ihren bevorzugten Code-Editor zur Hand haben. Dieses Tutorial wird in Sublime Text 2 durchgeführt.

Ghost lokal installieren

Das erste, was Sie tun müssen, ist Ghost auf Ihrem lokalen Rechner zu installieren. Dies ist ziemlich einfach, solange Sie die erforderlichen Voraussetzungen in Ihrem System haben. Es ist nicht erforderlich, XAMPP oder ein gleichwertiges Programm auszuführen, um Ghost auf Ihrem lokalen Computer auszuführen, da es tatsächlich von selbst ausgeführt wird.

Hinweis: Wenn Sie gelegentlich ein neues Design erstellen, Ghost neu starten und dann das neue Design in admin auswählen, wird möglicherweise immer noch CSS aus dem vorherigen Design geladen. Wenn dieses Problem auftritt, während Sie diese Lernprogrammreihe abschließen oder jederzeit beim Erstellen eines neuen Designs arbeiten, müssen Sie Ghost erneut starten. Bei einem zusätzlichen Neustart sollte der Cache geleert werden, damit das CSS des neuen Themas sichtbar wird.

Wenn Sie die Anweisungen befolgt und Ghost auf Ihrem lokalen Computer installiert haben (und überprüft haben, dass alles ordnungsgemäß funktioniert), können Sie mit der Erstellung Ihres Ghost-Designs beginnen, wobei Sie mit den folgenden Schritten beginnen.

Beginnen Sie ein neues leeres Design

Zu Beginn erstellen und aktivieren wir ein leeres Ghost-Design mit dem absoluten Minimum an erforderlichen Dateien.

Schritt 1:

Navigieren Sie in Windows Explorer (oder einem ähnlichen Verzeichnis) zu dem Ordner, in dem Sie Ghost installiert haben. Sie sollten die folgende Struktur in Ihrem Ghost-Hauptordner sehen:

Schritt 2:

Navigieren Sie zum Ordner "content> themes", in dem Sie den Ordner des Standarddesigns "casper" sehen..

Schritt 3:

Erstellen Sie an diesem Ort einen neuen Ordner und benennen Sie ihn so, wie Sie möchten, dass Ihr Thema aufgerufen wird. In diesem Tutorial erstellen wir ein Design mit dem Namen "UberTheme". Dies ist der Name des Ordners, den wir erstellen:

Fügen Sie die erforderlichen Dateien hinzu

Wir werden jetzt die erforderlichen Vorlagendateien hinzufügen, ohne die Sie Fehler erhalten, wenn Sie versuchen, Ihr neues Design zu aktivieren.

Die beiden Dateien, die für die Ausführung eines Ghost-Themas absolut notwendig sind, sind:

index.hbs: steuert die Anzeige Ihrer neuesten Beiträge / Homepage
post.hbs: steuert die Anzeige einzelner Beiträge

Schritt 1:

Erstellen Sie in Ihrem bevorzugten Code-Editor eine neue Datei und speichern Sie sie in Ihrem "UberTheme" -Ordner als "index.hbs". Sie haben noch keinen Code, der zur Datei hinzugefügt werden muss, so dass die von Ihnen erstellte Datei leer ist.

Schritt 2:

Erstellen Sie eine zweite neue Datei und speichern Sie diese ebenfalls in Ihrem "UberTheme" -Ordner, diesmal als "post.hbs". Wie die Datei "index.hbs", die Sie im vorherigen Schritt erstellt haben, ist diese Datei ebenfalls leer / leer.

Das Innere Ihres Ordners "UberTheme" sollte nun so aussehen:

Tourthema aktivieren

Wir müssen Ghost jetzt neu starten / starten, damit "UberTheme" in der Liste der verfügbaren Themen im Admin-Panel angezeigt wird, sodass wir es auswählen und aktivieren können.

Schritt 1:

Wenn Sie Ghost bereits ausgeführt haben, fahren Sie es herunter, indem Sie in Ihrem Terminal STRG + C drücken. Geben Sie dann bei Aufforderung "y" gefolgt von ENTER ein.

Schritt 2:

Starten Sie Ghost neu, indem Sie "npm start" in Ihr Terminal eingeben.

Spitze: Wenn Sie nicht sicher sind, wie Sie das Terminal öffnen, um den obigen Schritt auszuführen, navigieren Sie zu Ihrem "Ghost" -Ordner, halten Sie die UMSCHALTTASTE gedrückt, klicken Sie mit der rechten Maustaste, um das Windows-Optionsmenü zu öffnen, und klicken Sie dann mit der linken Maustaste auf "Befehlsfenster hier öffnen".

Hinweis: Die obigen Schritte setzen voraus, dass Sie unter Wie man Ghost installiert hat, Anweisungen zum Installieren und Ausführen von Ghost erhalten.

Schritt 3:

Besuchen Sie Ihr Ghost-Admin-Bedienfeld (ggf. Anmeldung), normalerweise unter http: // localhost: 2368 / ghost

Schritt 4:

Klicken Sie auf die Schaltfläche "EINSTELLUNGEN" im oberen Menü Ihres Admin-Bereichs:

Sie gelangen in den Bereich "EINSTELLUNGEN> Allgemein" Ihres Admin-Bereichs.

Schritt 5:

Scrollen Sie bis zum Ende der Seite und suchen Sie nach der Dropdown-Liste "Theme". Sie sollten "UberTheme" als eine der Optionen sehen:

Schritt 6:

Wählen Sie "UberTheme" aus der Liste aus und klicken Sie auf die blaue Schaltfläche "SAVE" oben rechts auf der Seite.

Schritt 7:

Besuchen Sie in Ihrem Browser das Frontend Ihrer Ghost-Installation, normalerweise unter http: // localhost: 2368 /.

Ergebnis: Sie sollten nur ein leeres weißes Browserfenster sehen.

Wenn Sie kein leeres weißes Browserfenster sehen und stattdessen etwas wie das unten abgebildete Bild sehen, führen Sie die oben genannten Schritte erneut durch und stellen Sie sicher, dass Sie Ihre Vorlagendateien korrekt benannt haben:

Vervollständigen Sie die Datei- und Ordnerstruktur

Die einzig notwendigen Dateien sind die Vorlagendateien "index.hbs" und "post.hbs", wie im letzten Abschnitt beschrieben.

Es gibt jedoch noch zwei weitere Dateien, die Sie in nahezu jedem Thema verwenden möchten, auch wenn sie nicht unbedingt erforderlich sind. Wir werden diese also jetzt hinzufügen. Wir organisieren auch eine Ordnerstruktur, in der später zusätzliche Dateien zu Ihrem Design hinzugefügt werden.

Theme-Wrapper-Datei

Es gibt nur eine weitere Hauptvorlagendatei, die Sie im Stammordner Ihres Designs verwenden möchten. Dies ist die "default.hbs" -Datei.

Diese Datei erstellt den "Wrapper" -Code für Ihr Design, d. H. Den Kopf- und Fußcode, der um jede Seite einer Website gelegt wird, auf der Ihr Design ausgeführt wird. Es wird Ihren Standard enthalten , und Abschnitte sowie einige Template-Tags, die wichtigen Ghost-Code ausgeben.

Wir werden später ausführlicher darauf eingehen, was eigentlich in diese Datei geschrieben werden muss. Im Moment erstellen wir einfach die leere Datei selbst.

Schritt 1:

Erstellen Sie in Ihrem bevorzugten Code-Editor eine neue Datei und speichern Sie sie in Ihrem "UberTheme" -Ordner als "default.hbs"..

Erstellen Sie Ihren Partials-Ordner

Mit Templates für Lenker haben Sie die Möglichkeit, sogenannte "partielle" Vorlagendateien zu erstellen. Mit diesen partiellen Vorlagendateien können Sie Ihr Thema in kleinere Komponenten unterteilen, um eine modularere, übersichtlichere Struktur zu erhalten.

Sie möchten beispielsweise Ihr Layout in die Abschnitte "Header", "Haupt" und "Fußzeile" aufteilen, wobei der Code für jeden Teil in einer eigenen Teildatei enthalten ist. Sie werden diesen Prozess später in der Praxis sehen. Für den Moment erstellen wir einfach den Ordner, in dem diese "partiellen" Dateien gespeichert werden.

Schritt 1:

Navigieren Sie im Windows Explorer (oder einem gleichwertigen Element) zu Ihrem Ordner "UberTheme".

Schritt 2:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "partials".

Hinweis: Stellen Sie sicher, dass der Ordner richtig benannt ist und sich im Stammordner des Themas befindet. Andernfalls kann Ghost Ihre partiellen Vorlagendateien nicht finden.

Ordnerstruktur für Assets

Wenn wir die Stylingphase erreicht haben, werden alle Ihre mit dem Styling zusammenhängenden Dateien in Ihrem "Assets" -Ordner gespeichert, einschließlich CSS-, JS-, Schriftart- und Bilddateien.

Hinweis: Sie müssen den Ordner nicht "Assets" nennen - Sie können ihn tatsächlich beliebig benennen. In diesem Lernprogramm folgen wir einfach den Best Practices-Richtlinien von Ghost.

Schritt 1:

Navigieren Sie im Windows Explorer (oder einem gleichwertigen Element) zu Ihrem Ordner "UberTheme".

Schritt 2:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "Assets"..

Schritt 3:

Navigieren Sie in Ihren Ordner "Assets".

Schritt 4:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "css"..

Schritt 5:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "Schriftarten"..

Schritt 6:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "Bilder"..

Schritt 7:

Erstellen Sie einen neuen Ordner und nennen Sie ihn "Js"..

Ihre Design-Datei und Ordnerstruktur sollte jetzt so aussehen:

Fügen Sie Ihre Stylesheet-Datei hinzu

Technisch gesehen kann das Hinzufügen Ihrer Stylesheet-Datei als Teil des Stilprozesses bezeichnet werden. Wir werden jedoch das schreiben Abschnitt in der nächsten Phase des Lernprogramms, und als Teil davon möchten wir das Stylesheet Ihres Themes verknüpfen und prüfen, ob es geladen wird.

Zu diesem Zweck erstellen wir eine Stylesheet-Datei, die Ihrem Design eine Hintergrundfarbe hinzufügt, sodass Sie anschließend sicherstellen können, dass die Verknüpfung mit Ihrem Design besteht Abschnitt richtig.

Schritt 1:

Erstellen Sie in Ihrem bevorzugten Code-Editor eine neue Datei.

Schritt 2:

Fügen Sie der Datei das folgende CSS hinzu:

body Hintergrundfarbe: # F0F0F0;

Schritt 3:

Speichern Sie die Datei in Ihrem Ordner "UberTheme> assets> css" als "style.css"..

Die default.hbs-Datei schreiben

Wir beginnen jetzt mit dem Schreiben des eigentlichen Template-Codes Ihres Designs, beginnend mit der Datei "default.hbs". (Siehe oben für eine Zusammenfassung, wofür diese Datei gedacht ist.).

Hinweis: Um html-Tags und Handlebars-Template-Tags zu unterscheiden, verwenden wir entweder den Begriff "html-Tags" oder "template-Tags", damit Sie wissen, auf welchen Typ verwiesen wird.

Schritt 1:

Öffnen Sie in Ihrem bevorzugten Code-Editor die Datei "default.hbs" im Stammordner von theme, d. H. "UberTheme"..

Schritt 2:

Fügen Sie den folgenden Code hinzu:

    ! Dokumenteinstellungen   ! Responsive Meta-Tags

Alles, was wir hier getan haben, ist das Hinzufügen der wichtigsten Doctype-, HTML-, Kopf- und Körper-Tags. Wir haben auch einige grundlegende Meta-Tags hinzugefügt, um den Zeichensatz festzulegen, Chrome Frame (falls verfügbar) oder Edge-Modus (der höchste verfügbare Modus) für IE zu aktivieren und unsere responsive Anzeige zu initialisieren.

Hinweis: Im obigen Code finden Sie auch zwei Beispiele, wie Kommentare in Lenkerdateien geschrieben werden können (Kommentare zu "Dokumenteinstellungen" und "Responsive Meta-Tags"). Kommentare werden unterschieden, wenn unmittelbar nach dem Öffnen zweier Sätze geschweifter Klammern ein Ausrufezeichen eingefügt wird, wobei das Schließen des Kommentars durch zwei schließende Sätze geschweifter Klammern markiert wird. Hier ist ein anderes Beispiel:

 ! Ihr Kommentar hier

Schritt 3:

Fügen Sie den folgenden Ausschnitt direkt über dem hinzu ! Responsive Meta-Tags Code:

 ! Seitenmeta Meta-Titel

Dadurch werden seitenspezifische Meta-HTML-Tags hinzugefügt.

Schritt 4:

Fügen Sie den folgenden Ausschnitt über dem hinzu ! Responsive Meta-Tags Code und direkt unter den zuvor hinzugefügten Meta-HTML-Tag-Zeilen der Seite:

 ! Stile

Dadurch wird der externe Link zu Ihrem Stylesheet hinzugefügt.

Hinweis: Sie benötigen keinen vollständigen Pfad zu Ihrem Stylesheet, sondern nur einen Pfad relativ zum Stammordner Ihres Designs.

Schritt 5:

Fügen Sie Folgendes über dem Abschluss hinzu HTML-Tag:

 ghost_head

Ghost verwendet dieses Tag, um wichtige Stil- und Metadaten im Kopfbereich auszugeben.

Hinweis: Für diejenigen, die einen WordPress-Hintergrund haben, können Sie dies mit der Aufnahme von vergleichen wp_head () in allen themen Abschnitte.

Schritt 6:

Ersetzen Sie die HTML-Tag mit dem folgenden Code:

Dieses Vorlagen-Tag gibt je nach geladenem Bereich der Site einen anderen CSS-Klassennamen aus:

Auf der Startseite: "home-template"
Auf Seiten älterer Beiträge, die über Paginierung erreicht wurden: "Archiv-Vorlage"
Bei einzelnen Beiträgen: "Post-Template"

Schritt 7:

Unter dem

Karosserie

 Wo auch immer Sie das platzieren Karosserie Das Tag in Ihrer "default.hbs" -Datei ist der Ort, an dem Ihr Hauptinhalt angezeigt wird, d. h. Ihre letzte Beitragsliste oder Einzelpostensicht.
 Wir haben auch ein Div mit der wrapper_uber Klassenname werden wir später als Wrapper gestalten, um die Breite und andere Form des Hauptinhaltsbereichs des Themas zu steuern.
 Hinweis: Alle CSS-Klassen sollten einen Namespace enthalten, um sicherzustellen, dass sie nicht mit anderen Stilen kollidieren, die von der Website geladen werden. In diesem Fall hängen wir alle Klassennamen mit an _uber.
 Wichtig: Es ist sehr wichtig das Karosserie Tag ist umgeben von dreifach geschweifte Klammern, da dies verhindert, dass die hier zurückgegebenen Werte entkommen. Wenn Sie hier keine dreifach geschweiften Klammern verwenden, wird anstelle des eigentlichen Inhalts HTML angezeigt.
 Schritt 8:
 Direkt über dem  HTML-Tag fügen Sie den folgenden Code hinzu:
  ghost_foot
 Ähnlich wie das ghost_head Tag, den wir oben hinzugefügt haben ghost_foot Zur Ausgabe wichtiger Skripte und Daten muss ein Template-Tag eingefügt werden.
 Schritt 9:
 Speichern Sie die Datei "default.hbs".
 Ihre "default.hbs" -Datei sollte jetzt so aussehen:
     ! Dokumenteinstellungen   ! Seitenmeta Meta-Titel  ! Stile  ! Responsive Meta-Tags    ghost_head    Karosserie 
 ghost_foot  
 
 Testen Sie Ihre "default.hbs" -Datei
 Sie können jetzt Ihre Vorlagendatei "default.hbs" testen und sicherstellen, dass alles korrekt ist.
 Dazu müssen Sie Ghost lediglich mitteilen, dass Sie die Vorlage "default.hbs" laden möchten.
 Schritt 1:
 Öffnen Sie die Dateien "index.hbs" und "post.hbs" in Ihrem Code-Editor.
 Schritt 2:
 Fügen Sie den folgenden Code zu jedem hinzu und speichern Sie dann:
  !< default
 Wenn Ghost das sieht !< default tag wird wissen, dass Sie die Seite im Code von der Vorlage "default.hbs" umschließen möchten.
 Schritt 3:
 Um Ihre "default.hbs" -Datei zu testen, kehren Sie zum Front-End Ihrer Ghost-Site zurück, normalerweise unter http: // localhost: 2368 / ghost, und aktualisieren Sie die Seite.
 Schritt 4:
 Wo Sie zuvor nur ein leeres weißes Browserfenster gesehen haben, sollte jetzt die Hintergrundfarbe des Fensters in ein hellgrau umgewandelt werden.
 Wenn Sie dies sehen, haben Sie überprüft, ob Ihr Stylesheet ordnungsgemäß geladen wird.
 Wenn das Browserfenster immer noch weiß ist, überprüfen Sie noch einmal, ob der Speicherort und der Name Ihres Stylesheets korrekt in das eingegeben wurde  Linie, die Sie zu Ihrem hinzugefügt haben  Sektion.
 Schritt 5:
 Verwenden Sie Ihren Browser, um die Seitenquelle anzuzeigen. Wenn es so aussieht, haben Sie Ihre Datei "default.hbs" erfolgreich erstellt:
       Geist           
   
 Hinweis: Möglicherweise werden Ihr Titel und die Meta-Beschreibungsinhalte unterschiedlich angezeigt, wenn Sie Ihre Seitenquelle anzeigen. Wenn ja, ist das völlig normal, da die Daten in diesen Feldern aus dem Blogtitel und der Blogbeschreibung stammen, die auf der Ghost-Admin-Seite "Einstellungen> Allgemein" eingegeben wurden.
 
 Im Anschluss
 Obwohl dies das Ende des zweiten Teils ist, sind wir noch nicht mit der Vorlagephase fertig, mit der Sie Ihr Ghost-Design erstellen können.
 Wir sind jedoch bereit, mit dem Hinzufügen von Inhalten zu beginnen, damit dieser auf einer Seite angezeigt werden kann und wir das Setup unserer Vorlagen ständig testen können.
 Die nächste Phase unserer Tutorialserie wird fortgesetzt und beendet den Vorlagenprozess. Sie erfahren, wie Sie Vorlagen-Tags und Markierungen hinzufügen, die drei Hauptvorlagendateien Ihres Themas abschließen und die Vorlagendateien hinzufügen, die eine gemeinsame Kopf- und Fußzeile in Ihr Design einfügen. Am Ende des nächsten Teils ist der Vorlagenprozess zum Erstellen Ihres Designs abgeschlossen.



		
			
	   
	




Web-Design