Update Neuerungen in Ghost-Themes

#Etikett 
 
Beiträge markiert mit: name
 
 /Etikett

Dadurch wird den Taglistenseiten ein Header hinzugefügt, der den Namen des aktuellen Tags enthält.

In Ihrer "layout.less" -Datei, nach dem das .article_uber Selektorstil, fügen Sie diesen Code hinzu:

.tag_heading font-size: 2rem; Auffüllen: 0 0 2rem 0; Text ausrichten: Mitte; Rand unten: 0.25rem;  

Wenn Sie zu einer Tag-Auflistungsseite wechseln, sollten Sie jetzt einen Überschriftenbereich wie folgt haben:

Um verschiedene Vorlagen für bestimmte Tags zu erstellen, verwenden Sie die Dateinamen-Syntax "Tag - slug. Hbs". Dies kann beispielsweise für das Erstellen von Bildergalerien aus Posts mit der Bezeichnung "gallery" von Vorteil sein, z. B. mit einer Vorlage mit dem Namen "tag-gallery.hbs"..

Home-Kontext / Home-Vorlage

Möglicherweise möchten Sie für Ihre Homepage eine andere Vorlage haben als für nachfolgende Listen von Beiträgen, während die Personen durchblättern. Beispielsweise haben Sie möglicherweise ein großes Titelbild oder eine Diashow auf Ihrer Startseite, auf der die Besucher nicht auf der nächsten Seite mit Beiträgen einen Bildlauf durchführen müssen.

Erstellen Sie zum Anpassen der Anzeige Ihrer Homepage eine Vorlage mit dem Namen "home.hbs"..

Lesen Sie mehr in den Ghost-Entwicklerdokumenten.

Benutzerdefinierte Fehlerseiten

Wenn Sie die genaue Darstellung der Fehlerseiten steuern möchten, können Sie jetzt eine Vorlage mit dem Namen "error.hbs" erstellen..

Weitere Informationen finden Sie in den Ghost-Entwicklerdokumenten (können Sie sich vorstellen?)!

Neue Helfer

Ghost hat mehrere neue Helfer eingeführt. Art von Vorlagen-Tags, mit denen Sie bestimmte Arten von Inhalten in Ihrem Design ausgeben können.

navigation Helfer

Es ist jetzt möglich, grundlegende Navigationsmenüs in Ghost zu erstellen, indem Sie auf gehen Einstellungen> Navigation im Adminbereich.

Um ein Nav-Menü in Ihrem UberTheme anzuzeigen, öffnen Sie die Datei "header.hbs" aus dem Ordner "partials" und fügen Sie diesen Code vor dem letzten schließenden div-Tag hinzu:

Öffnen Sie im Ordner "LESS" des Projekts "layout.less" und suchen Sie den Ordner .header_uber Klasse. Ändern Sie in Zeile 33 die Polsterboden Wert von:

Polsterung unten: 3 * @golden + 0em;

… An:

Polsterung: 1,5 * @golden + 0em;

Fügen Sie dann den folgenden Code hinzu, um Ihr neues Navigationsmenü zu gestalten:

ul.nav list-style-type: none; Rand oben: 1,5 * @golden + 0em; Polsterung: 0; Anzeige: Flex; Inhalt rechtfertigen: Mitte; Border-Top: 0,0625rem Festkörper (@ color_03, 33%); Rand unten: 0,0625rem Festkörper (@ color_03, 33%); Hintergrundfarbe: Aufhellen (@ color_03, 42%); li margin: 0 0,25 em; Polsterung: 0,75em 1em; eine Textdekoration: keine; 

Hinweis: Wir verwenden Flexbox hier für eine schnelle und einfache Menüimplementierung. Wenn Sie jedoch ältere Browser unterstützen möchten, möchten Sie möglicherweise einen anderen Ansatz verwenden.

Ihr Theme sollte jetzt ein Navigationsmenü haben, das folgendermaßen aussieht:

Lesen Sie mehr über die Navigation in der… Sie wissen.

image Helfer

Ghost bietet jetzt die Möglichkeit, einem Beitrag ein gekennzeichnetes Bild hinzuzufügen. Um ein Bild hinzuzufügen, klicken Sie auf das kleine Zahnradsymbol unten rechts in der Nachbearbeitungsoberfläche und anschließend auf Beitragsbild hinzufügen Quadrat oben in der Seitenleiste, die herausspringt. Alternativ können Sie ein Bild auf das Bild ziehen und dort ablegen.

Um das Bild des Beitrags auszugeben, verwenden Sie die Bild Helfer. Öffnen Sie in UberTheme die Datei "index.hbs" und suchen Sie die Datei Inhalt Tag in Zeile 12:

 Inhalt 

Direkt darüber fügen Sie ein Bildelement mit dem hinzu Bild Helfer in der src Attribut. Wir werden auch den Titel des Beitrags in verwenden alt Attribut und wickeln Sie es mit einem #if image… / if Stellen Sie sicher, dass ein Bild angezeigt wird:

 #if image  / if content 

Sie sollten jetzt in der Lage sein, ein hinzugefügtes Beitragsbild direkt unter dem Beitragstitel in Ihrem Design zu sehen:

Weiter so, docs.

#has Helfer

Das neue #hat Mit helper können Sie überprüfen, ob für einen Beitrag ein bestimmter Autor als Verfasser verwendet wird und / oder bestimmte Tags zugeordnet sind. Auf diese Weise können Sie verschiedene Arten von Präsentationen für verschiedene Autoren erstellen oder verschiedene Tags für Posts einrichten, die Tumblr-Motiven oder WordPress-Postformaten ähneln.

So könnten Sie beispielsweise alle Beiträge mit einem „Foto“ versehen und mit einem speziellen Foto-Layout versehen, alle mit „Video“ gekennzeichneten Beiträge auf ihre eigene Weise und die anderen Beiträge auf das Standard-Markup zurückgesetzt:

#has tag = "photo" Spezieller Fotobeitrag hier else #has tag = "video" Spezieller Videobeitrag hier else Auf Standard-Präsentation zurückgreifen hat / hat

Docs.

#is Helfer

Bisher haben wir viele der neuen "Kontexte" innerhalb einer Ghost-Site durchlaufen, beispielsweise "post", "author", "page", "tag" und "home". Das #is helper gibt Ihnen die Möglichkeit, die Ausgabe in einer Vorlage zu steuern, abhängig davon, in welchem ​​Kontext die Vorlage verwendet wird.

Anstatt beispielsweise wie oben beschrieben eine andere "tag.hbs" -Vorlage zu erstellen, können Sie stattdessen der Datei "index.hbs" Folgendes hinzufügen:

#ist "Tag" #tag 
 
Beiträge markiert mit: name
 
 / tag / is

Das #ist "Tag" Zeile prüft, ob der aktuelle Kontext "Tag" ist, d. h., der Zuschauer betrachtet eine Liste von Beiträgen unter einem bestimmten Tag und gibt nur dann die Tag-Überschrift aus.

Weiterlesen.

#prev_post und #next_post Helfer

Wenn Sie möchten, können Sie jetzt eine hinzufügen Nächster Beitrag und ein Vorherigen Post Link, damit Leser direkt von einem Beitrag zum anderen wechseln können. Diese Links sollten der Vorlage „post.hbs“ hinzugefügt werden.

Ein Beispiel, wie diese Links implementiert werden können (von der Ghost-Dokumentseite), lautet wie folgt:

#Post 
Titel
 
 Inhalt 
 #prev_post title / prev_post #next_post title / next_post / post

Vorlagen überschreiben

Alle bisher behandelten Vorlagen entsprechen bestimmten Kontexten, es gibt jedoch auch einige, mit denen die Ausgabe bestimmter Helfer gesteuert werden kann, z. Navigation und Seitennummerierung. Standardmäßig behandelt Ghost die Ausgabe dieser Helfer automatisch. Sie haben jedoch die Möglichkeit, Ihre eigene Ausgabe in Ihrem Design zu definieren.

Navigationsvorlage

Die Standard-Markup-Ausgabe von Navigation Helfer ist:

 #foreach navigation 
Etikette
 /für jeden 

Um stattdessen Ihr eigenes Navigations-Markup zu verwenden, erstellen Sie eine Datei mit dem Namen "navigation.hbs" und platzieren Sie diese im Teilverzeichnis Ihres Designs.

Lesen Sie mehr in den Dokumenten.

Paginierungsvorlage

Die Möglichkeit zum Erstellen einer benutzerdefinierten Vorlage für Seitennummerierung helper ist nicht wirklich neu, aber es ist etwas, was wir in der Serie noch nicht behandelt haben und deshalb hier erwähnenswert ist. Der Standard Seitennummerierung Code in Ghost ist:

Überschreiben Sie diesen Code mit Ihrem eigenen Code, indem Sie eine Vorlage mit dem Namen "pagination.hbs" im Ordner "partials" Ihres Themas erstellen.

Mehr hier in den Dokumenten.

Zusätzliche Funktionen

Neben neuen Kontexten, Vorlagen und Helfern wurden in Ghost noch ein paar weitere Dinge hinzugefügt.

Beliebte Beiträge

Wenn Sie einen bestimmten Beitrag als "Featured" markieren möchten, gibt es jetzt zwei Möglichkeiten in der Administrationsoberfläche.

Klicken Sie im Admin-Bereich, in dem alle Ihre Beiträge aufgelistet sind, auf den kleinen Stern in der oberen linken rechten Ecke des Vorschaufensters.

Klicken Sie im Post-Editor auf das kleine Zahnradsymbol unten rechts auf dem Bildschirm und aktivieren Sie das Kontrollkästchen Diesen Beitrag kennzeichnen.

Wenn Sie in Ihrem Thema eine andere Markierung für gekennzeichnete Beiträge verwenden möchten, prüfen Sie, ob ein Beitrag mit gekennzeichnet ist #feature

#foreach posts #feature  sonst  / if / foreach

Ausgewählte Beiträge tragen auch die Klasse vorgestellt So können Sie sie für unterschiedliche Stile in Ihrem CSS auswählen. Um diese Klasse auszugeben, schließen Sie das ein post_class Helfer für deine Beiträge. 

Zum Beispiel ändern Sie in UberThemes Dateien "index.hbs", "post.hbs" und "page.hbs" diese Zeile:

… An:

Standardmäßig werden gekennzeichnete Posts nicht über anderen Posts positioniert. Sie befinden sich in ihrer regulären Position, basierend auf dem Zeitpunkt ihrer Veröffentlichung. Wenn Sie jedoch möchten, dass gekennzeichnete Beiträge zuerst angezeigt werden, benötigen Sie zwei Beitragsschleifen: eine für gekennzeichnete Beiträge und eine für reguläre Beiträge.

#foreach posts #if featured ! - Zeigen Sie hier hervorgehobene Posts an - / if / foreach #foreach posts #unless Featured ! - Hier regelmäßige Beiträge anzeigen - / wenn / foreach

Alle singen jetzt mit: Lesen Sie mehr in den Dokumenten.

Benutzerdefinierte Favicons

Um ein benutzerdefiniertes Favicon festzulegen, legen Sie die Datei „favicon.ico“ im Ordner „assets“ ab und laden Sie sie in das Verzeichnis Abschnitt Ihres Themas mit

asset "/favicon.ico"

Lesen Sie mehr auf Wikipedia (Scherz, probieren Sie die Ghost-Dokumente aus).

Einpacken

Das ist eine ganze Menge neuer Möglichkeiten für die Ghost-Themenentwicklung, mit einer Fülle neuer Möglichkeiten für die kreative Themenentwicklung!

Zusammenfassend haben wir:

• „Package.json“ -Datei und Anlage Helfergebrauch jetzt erforderlich
• Navigation hinzugefügt, mit der Möglichkeit, die HTML-Ausgabe anzupassen
• Ausgewählte Bilder hinzugefügt
• Neue Helfer, die viele weitere Optionen beim Markup ermöglichen
• Statische Seiten und benutzerdefinierte Vorlagen für sie
• Markieren Sie Seiten und benutzerdefinierte Vorlagen für sie
• Erstellen Sie Seiten und benutzerdefinierte Vorlagen für sie
• Homepagevorlage
• Benutzerdefinierte Fehlervorlage
• Beliebte Beiträge
• Anpassbare Favicons

Auch wenn alles, was wir hier behandelt haben, noch verfügbar ist, gibt es in Ghost noch mehr neue Helfer und Funktionen sowie mehr Details zu allen oben genannten Themen. Lesen Sie sich also unter themes.ghost.org ein, um alle Informationen zu erhalten und Outs.

Im Anhang zu diesem Tutorial finden Sie einen Download der Quelldatei, in dem Sie das aktualisierte Design sowie die bearbeitete Datei "layout.less" herunterladen können. Verwenden Sie UberTheme als Testumgebung, um sich mit den neuen Neuerungen in Ghost vertraut zu machen. Steigen Sie dann aus und erstellen Sie ein paar tolle Themen!

Envato Market

Vergessen Sie nicht, die Ghost-Kategorie im Envato Market zu besuchen!