() translation by (you can also view the original English article)
Jekyll ist ein statisches Site-Generierungssystem, mit dem Sie Textdateien empfangen und in ein komplexes Blog konvertieren können, ohne sich um Datenbanken, Sicherheitsprobleme, Updates und andere Komplikationen zu sorgen, die bei vielen CMS- und Blog-Plattformen auftreten können.
Wie bei den meisten Websiteverwaltungssystemen können Sie Themen auf Jekyll-Websites verwenden. Im Moment verwendet Jekyll die Themen jedoch nicht in der gewohnten Form.
Derzeit sind Jekyll-Designs keine eigenständigen Pakete, die Sie mit dem Installationsprogramm verwenden müssen. Wenn Sie das Jekyll-Design herunterladen, laden Sie auch alle Dateien herunter, die zum Ausführen der gesamten Jekyll-Site erforderlich sind.
Das wird sich in der zukünftigen Version von Jekyll ändern, aber jetzt müssen Sie wissen, wie Sie mit der Tatsache umgehen müssen, dass Jekyll-Designs mit der gesamten Site geliefert werden, die an sie angehängt ist.
In dieser Lektion schauen wir ganz am Anfang Jekyll Themen zu setzen, mit einigen grundlegenden Empfehlungen für die Installation starten, gehen Sie zu, wie mit den Funktionen des neuen Themas vertraut zu machen, und gehen Sie durch den Rat der Einrichtung eine neue Website, oder Wiederverwendung von einem bestehenden Thema.
Lass uns anfangen!
Jekyll auf dem Envato-Markt
In der Jekyll-Kategorie auf dem Envato-Markt gibt es viele, die zwischen 19 und 24 Dollar kosten. Später werden wir "Writer" und "Astro" (zwei aktuelle Verkaufsleiter) verwenden, um die Installation zu demonstrieren.
Jekyll Installation
Jekyll wurde für die Offline-Verwaltung auf Ihrem eigenen Computer entwickelt, in eine statische HTML-Site integriert und dann angewendet. Beim Hinzufügen von Inhalt besteht der Hauptprozess darin, eine aufgezeichnete Datei zu erstellen, ein vorderes Element am Anfang hinzuzufügen, den Rest der Datei mit Inhalt zu füllen und anschließend Ihre Site neu zu erstellen.
Sobald Ihre Website erstellt wurde, können Sie sie auf beliebige Weise veröffentlichen, unabhängig davon, ob Sie FTP- oder git-Befehle verwenden. Wir konzentrieren uns jedoch nicht auf das Placement in dieser Lektion. Wenn Sie mehr über das Thema erfahren möchten, besuchen Sie den Jekyll-Dokumentationsabschnitt.
Höchstwahrscheinlich konzentrieren wir uns auf einen Teil Ihres Installationsprozesses der Jekyll-Site, der offline auf Ihrem Computer stattfindet und mit der Installation beginnt.
Voraussetzungen
Die Arbeit mit Jekyll beinhaltet ein bisschen Befehlszeilennutzung, aber wenn Sie noch nie mit der Befehlszeile gearbeitet haben, dann haben Sie keine Angst. Ich empfehle aus Bequemlichkeit, einige Einträge in der Befehlszeilenserie für das Webdesign zu überarbeiten.
Wenn Ihr Computer mit Windows arbeitet, wird Jekyll leider nicht offiziell unterstützt. Das bedeutet nicht, dass Sie es nicht schaffen können, aber Sie müssen möglicherweise mehrere Hindernisse überwinden. Wenn Sie Jekyll unter Windows ausführen möchten, lesen Sie die Details in der Jekyll-Dokumentation.
Andernfalls müssen Sie, wenn Sie Mac OS X, Linux oder Unix verwenden, sicherstellen, dass Sie folgende Voraussetzungen erfüllen:
Um zu überprüfen, ob Ruby installiert ist, führen Sie den Befehl ruby -v aus. Um zu überprüfen, dass Ruby Gems gem -v ausführt. In beiden Fällen überprüfen diese Befehle die Versionsnummer, bis die Nummer an Ihrem Terminal angezeigt wird, und Sie können weitergehen.
Wir arbeiten mit Jekyll 3.1.x, so dass Sie NodeJS oder Python nicht benötigen, wie auf der Seite von Jekyll-Installationsdokumentation angegeben.
Starten der Jekyll-Installation
Um nun Jekyll auf Ihrem Computer zu installieren, führen Sie folgenden Befehl aus: gem install jekyll
Wenn Sie eine Meldung sehen, dass Sie die Berechtigung nicht unterschrieben haben, starten Sie den Befehl mit sudo und geben Sie Ihr Kennwort ein, wenn Sie dazu aufgefordert werden.
Dann werden im Terminal mehrere Zeilen gedruckt, auf denen der Installationsvorgang angezeigt wird. Wenn er anzeigt, dass "1 gem installiert ist", ist alles bereit.
Einer Standard-Jekyll-Site erstellen
Lassen Sie uns schnell eine Jekyll-Site erstellen, damit Sie sehen können, wie sie in einem standardmäßigen, nicht thematischen Status aussieht, und sich mit der Struktur ihrer Dateien und Ordner vertraut machen. Erstellen Sie einen Ordner zum Hosten der Site, öffnen Sie dann das Terminal, das auf den Ordner verweist, und führen Sie Folgendes aus: jekyll new.
Hinweis: Wenn Sie irgendwann eine neue Jekyll-Site in einem Unterordner erstellen möchten, verwenden Sie den folgenden Befehl: jekyll new subfolder_name
Wenn die Einrichtung der Site abgeschlossen ist, wird in Ihrem Terminal eine Nachricht angezeigt, die besagt: "Die neue jekyll-Site ist in" installiert. An dieser Stelle in Ihrem Ordner sehen Sie den Standard-Inhalt der Jekyll-Site.
Führen Sie nun den Befehl jekyll serve aus, um Ihre Site zu aktualisieren und offline auszuführen.
Wenn Sie die Meldung "Der Server läuft ... drücken Sie ctrl-c, um zu stoppen" in seinem Terminal angezeigt wird, können Sie im Browser zu http://localhost:4000 gehen und die Standard-Jekyll-Site überprüfen.
Nachdem Sie nun die Struktur von Dateien und Ordnern auf der Standard-Jekyll-Site und deren nicht-thematischen Status gesehen haben, können Sie besser verstehen, was Sie in einem typischen Jekyll-Theme-Download sehen.
Schnelle Demonstration neuer Themen
Wie Sie aus dem, worüber wir in dieser Lektion gesprochen haben, wissen, werden jetzt die Jekyll-Themen mit allen Dateien geliefert, die zum Ausführen der gesamten Site benötigt werden. Und wie Sie im letzten Abschnitt gesehen haben, können Sie, sobald Sie alle diese Dateien haben, jekyll serve ausführen, um diese Seite im Browser anzeigen zu können.
Wenn Sie also ein neues Jekyll-Theme herunterladen, können Sie es einfach extrahieren, jekyll serve ausführen und die Designs sofort auf der voll funktionsfähigen Jekyll-Site anzeigen. Viele Themen kommen sogar mit bereits enthaltenen Demo-Inhalten.
Schauen wir uns einige Beispiele mit den Themen "Writer" und "Astro" (oder was auch immer Sie bevorzugen) an.
Führen Sie nach der Extraktion eine Suche durch die Designstruktur durch, bis Sie den Stammordner gefunden haben, in dem alle Jekyll-Site-Dateien gespeichert sind. Sie sollten diesen Ordner in Ihrer standardmäßigen frühen Jekyll-Installation erkennen können. Suchen Sie nach Dingen wie _config.yml, _includes und so weiter.
Öffnen Sie dann das Terminal im Ordner und führen Sie jekyll serve aus.
Wenn alles erfolgreich ist, wird die Nachricht "Serveradresse:" angezeigt, wobei die URL am Ende des Terminals angezeigt wird. Kopieren Sie diese URL und fügen Sie sie in den Browser ein. Daraufhin wird eine Demo Ihres neuen Themas angezeigt.
Fehlen von Abhängigkeit?
In einigen Fällen wird möglicherweise eine Fehlermeldung angezeigt, wenn Sie versuchen, jekyll serve zu starten. Wenn es der Fall ist, prüfen Sie, ob die Nachricht über den Mangel an Abhängigkeit klagt, das heißt, etwas, das für das Thema benötigt wird, befindet sich nicht in Ihrem Setup.
In diesem Beispiel können Sie in roter Schrift Fehler sehen, dass gem „jekyll-paginate“ fehlt.
Eine schnelle Google-Suche umfasst die Github-Repository für gem in Frage, geben Sie den Befehl, um es zu installieren.
Nach dem Ausführen des angegebenen Befehls und dem Festlegen der fehlenden Abhängigkeit kann jekyll serve mit dem Thema wie erwartet arbeiten.
Wenn Demo nicht geladen wird.
Wenn Sie auf der angegebenen URL-Adresse klicken, und wird die Seite nicht sehen, zum Beispiel wie folgt aus:
...überprüfen Sie den baseurl-Wert in der _config.yml-Datei. Diese Datei, über die wir später sprechen werden, steuert die Gesamtkonfiguration für die gesamte Site.
Baseurl Variable auf die Hauptdomain hinzugefügt wird, wenn wir im Offline-Modus arbeiten, ist es http://localhost:4000.
Im obigen Beispiel möchten wir, dass auf unserer Site http://localhost:4000 angezeigt wird. In der _config.yml-Datei ist unser baseurl-Wert folgendermaßen festgelegt:
1 |
baseurl: "http://localhost" |
Zunächst mag es scheint, richtig, aber als dieser Wert auf die primäre Domäne hinzugefügt wird, macht es eigentlich eine Website versuchen http://localhost: 4000 http://localhost zu laden.
Also müssen wir den Wert in eine leere Zeichenfolge wie folgt ändern:
1 |
baseurl: "" |
Ihre Website wird wie erwartet geladen.
Wenn Sie Ihre Site stattdessen aus dem Unterverzeichnis laden möchten, ändern Sie den Wert von baseurl in den Namen des Unterverzeichnisses, beginnen und enden mit einem Schrägstrich:
1 |
baseurl: "/themedemo/" |
Machen Sie sich mit dem Thema vertraut
Einer der Hauptgründe, mit dem Thema aus der bestehenden Struktur zu arbeiten (abgesehen von der erwarteten Überprüfung der Arbeit), gibt Ihnen die Möglichkeit, sich mit den Funktionen und Arbeitsabläufen vertraut zu machen.
Da Jekyll ziemlich viel Flexibilität bietet, können seine Designs Funktionen bieten, die sich sehr voneinander unterscheiden. Nachdem Sie eine Demonstration eines neuen Themas durchgeführt haben, finden Sie den Moment, in dem Sie sehen und sehen können, welche Art von Struktur das Thema hat. Achten Sie darauf, ob sich bestimmte Dinge im Betreff befinden, z. B. Kategorieseiten, Bilder, Autorenseiten usw. Beachten Sie diese Funktionen, damit Sie eine Dokumentation zu diesem Thema finden und deren Verwendung erlernen können.
Sie müssen auch die Struktur der Designdateien und -ordner anzeigen. Die wichtigsten Bereiche, die Sie erkunden möchten, sind:
- Beliebige anpassbare Seitenlayouts, die sich möglicherweise im Ordner the_layouts befinden.
- Alle benutzerdefinierten Werte, die Sie am Anfang Ihres Inhalts festlegen müssen.
Sie müssen auch herausfinden, welche erweiterten Konfigurationsoptionen Sie in der _config.yml-Site-Datei installieren können, um Designfeatures wie URLs für soziale Netzwerke, Autoreninformationen, Navigationslinks usw. zu verwenden.
Machen Sie es zu Ihrem
Jetzt haben Sie die Möglichkeit, das Thema zu sehen und sich damit vertraut zu machen. Es ist Zeit, es auf Ihrer Website zu verwenden. Belassen Sie die von Ihnen erstellte Demo unverändert, damit Sie Ihre neu erstellte Site vergleichen können.
Löschen Sie den Demo-Inhalt
Erstellen Sie einen neuen Ordner auf Ihrem Computer und extrahieren Sie alle Designdateien erneut.
Gehen Sie diesmal zum Ordner _posts und löschen Sie dort alle Dateien, damit die Demomeldungen gelöscht werden.
Löschen Sie danach alle .md (Markdown)-Dateien aus dem Stammordner, damit auch alle Demoseiten verschwinden.
Wenn Sie möchten, können Sie auch in Demo-Inhalten verwendete Bilder wie veröffentlichte Thumbnails finden und löschen, wenn Sie sie durch Ihre eigenen ersetzen möchten. Ob die Demo-Bilder des Inhalts je nach Thema angezeigt werden.
Wenn Ihr Theme Demo-Images enthält, die Sie löschen möchten, Sie aber nicht wissen, wo sie sich befinden, lesen Sie in der Dokumentation des Themas nach, in dem es geschrieben werden soll. Andernfalls müssen Sie möglicherweise den Code in den Themenvorlagen anzeigen und dort etwas herausfinden.
Einstellung der Sitekonfiguration
Als Nächstes müssen Sie die Datei _config.yml im Stammordner öffnen und alle erweiterten Site-Werte einstellen, die für das Design erforderlich sind. In der Regel sind einige Einstellungen für alle _config.yml-Dateien wie Titel, E-Mail, Beschreibung und einige andere üblich. Für dieses Thema werden jedoch einige spezielle Einstellungen vorgenommen.
Was genau Sie in der Site-Konfigurationsdatei tun müssen, hängt vom jeweiligen Thema ab. Daher wird empfohlen, dass Sie im Moment auf die Dokumentation für das Thema verweisen, um die einzelnen Parameter anzugeben.
Im Thema "Writer" ist es beispielsweise möglich, ein benutzerdefiniertes Navigationsmenü mit Hilfe des Werts nav_list einzustellen, um eine Liste mit Menüelementen zu definieren. Jeder von ihnen hat ein Label, einen permanenten Link und eine Kategorie, wodurch neben ihm ein Icon für die Schrift Awesome erscheint.
Im Gegensatz dazu verwendet das Astro-Thema nicht den speziellen Wert Writer - nav_item, aber es verfügt über eigene Werte, mit denen Sie Links zu vielen Ihrer Konten in sozialen Netzwerken hinzufügen und Disqus-Kommentare usw. aktivieren können.
Arbeiten Sie mit den Werten in der _config.yml-Datei Ihres Designs, bis Sie sie nach Ihrem Geschmack anpassen.
Beachten Sie, wenn Sie solche Änderungen nach dem ersten Start Ihrer neuen Site mit jekyll serve vornehmen, den Prozess mit CTRL + C stoppen und neu starten müssen, um zu sehen, wie die nachfolgenden Änderungen wirksam werden.
Richten Sie Ihre Homepage ein (falls erforderlich).
In einigen Themen können Sie aus mehreren Layouts Ihre Startseite auswählen und die Steuerelemente festlegen, die sich auf ihre Anzeige auswirken. Wenn es der Fall ist, werden Sie wahrscheinlich entscheiden, dass die Parameter in der Hauptdatei des Stammordners index.html geändert werden können.
Wenn mehrere Layouts verfügbar sind, werden Sie wahrscheinlich feststellen, dass Sie einen anderen auswählen können, indem Sie den Wert der Layout-Einstellungen ändern. Sie müssen sich in der Thema-Dokumentation informieren, welche möglichen Werte verwendet werden können.
Überprüfen Sie beim Bearbeiten der Datei, ob weitere Werte geändert werden müssen, um den Inhalt zu erstellen, der auf der Homepage angezeigt wird. Im Thema Writer können Sie beispielsweise einen benutzerdefinierten Header und eine Beschreibung angeben, die nur auf der Startseite angezeigt werden, sowie das enthaltene Bild.
Fügen Sie Ihre eigenen Seiten hinzu.
Wenn Sie Seiten wie "About" oder "Contact" hinzufügen möchten, ist es jetzt an der Zeit. Fügen Sie dem Stammordner der Site für jede Seite, die Sie anpassen möchten, das .md-Dokument (markdown) hinzu.
Hinweis: Einige Themen sind so eingestellt, dass alle Seiten in einem Unterordner (normalerweise "Seiten" genannt) anstelle des Stammordners abgelegt werden. Überprüfen Sie in den Themendokumenten, ob es der Fall ist.
Zum Beispiel habe ich hier die Seite "About the site" (about.md), die Profilseite des Autors "About me" (author-kezz.md) und die Seite "Contacts" (contact.md) hinzugefügt.
Wenn Sie Seitendateien hinzufügen, müssen Sie wissen, ob es spezielle Layoutvorlagen und/oder einführende Artikeloptionen gibt, die Sie verwenden sollten. Um das herauszufinden, können Sie auf Themendokumente verweisen oder einfach die Markup-Dateien aus der Demonstrationsinstallation kopieren und einfügen, die Sie mit dem Thema erstellt haben, und sie erneut bearbeiten.
Zum Beispiel kopierte ich hier eine vorhandene Autorenseite aus der Writer-Demo und konvertierte sie in meine eigene, benannte sie um und editierte dann ihren einleitenden Artikel und Inhalt.
Nachrichten hinzufügen
Jetzt haben Sie alles, was Sie brauchen, um die Struktur der Site anzupassen, es ist Zeit, Nachrichten hinzuzufügen. Ich empfehle, eine Nachricht aus dem Ordner _posts Ihrer Demosite zu kopieren und in die Installation, an der Sie gerade arbeiten, einzufügen. Dann können Sie es mit einem Datum und einem permanenten Link zu einem neuen Artikel umbenennen. Durch die Wiederverwendung der Demo-Nachricht sollten alle notwendigen einleitenden Artikel vorhanden sein und Sie müssen sie nur aktualisieren.
Kategorien, Tags und andere erweiterte Funktionen
Einige Themen bieten Unterstützung für Kategorien und Tags. Es ist jedoch nicht immer der Fall und daher kann die Implementierung von Thema zu Thema unterschiedlich sein. Sehen Sie sich die Dokumente zu Ihrem Thema an, in denen Sie möglicherweise mit Kategorien und Tags auf Ihrer Website arbeiten müssen.
Beispielsweise müssen Sie im Thema Writer für jede Kategorie, die Sie verwenden möchten, die Ordner- und Vorlagendatei im Unterordner auf der Website mit dem Namen "category" manuell konfigurieren.
Es kann auch eine beliebige Anzahl zusätzlicher Funktionen für ein bestimmtes Thema geben. Lesen Sie die Liste der Funktionen und Dokumentationen Ihres Themas, um sicherzustellen, dass Sie alles verwenden, was darin enthalten ist.
Themen auf einer vorhandenen Website wechseln
Wenn Sie bereits eine Jekyll-Site haben und Sie nur ein neues Thema anwenden möchten, mit dem Sie fast den gleichen Prozess wie wir oben gehen wollen. Die Änderungen werden wirksam, nachdem der Demo-Inhalt gelöscht wurde. Anstatt neue Seiten und Nachrichten hinzuzufügen, können Sie einfach den Inhalt Ihrer bestehenden Website kopieren.
Wenn Sie eine vorhandene Jekyll-Site mit bereits vorhandenen Seiten haben, kopieren Sie die interagierenden Markup-Dateien von der alten auf die neue Site und fügen Sie sie dort ein. Gehen Sie auf jeder Seite, und aktualisieren Sie den einleitenden Artikel die neuen Themenlayouts und die erforderlichen Werte zu verwenden.
Kopieren Sie dann alle Ihre Nachrichtendateien aus dem alten _posts-Ordner in den neuen. Es wird ein bisschen langweilig sein, aber Sie werden wahrscheinlich jede Nachricht Datei anzeigen müssen, eine nach der anderen, und Ihren einleitenden Artikeln Einstellungen aktualisieren, die für das neue Thema erforderlich sind, und entfernen Sie alles, was notwendig zum alten Thema war, aber nicht mehr verwendet werden.
Wenn Sie über einen Ordner mit Bildern und anderen Medien verfügen, die auf Seiten und Nachrichten auf Ihrer alten Website verwendet werden, kopieren Sie den gesamten Ordner in die neue Websitestruktur. Ihre Posts und Seiten sollten sich immer noch auf die gleichen Bildstandorte beziehen, damit sie weiterhin in Ihren Inhalten angezeigt werden können.
Fertigstellung
Das sind die Hauptpunkte, wie Sie das Jekyll-Thema anpassen können! Die kleineren Details des Prozesses variieren von Thema zu Thema, aber Sie können immer noch diese grundlegenden Schritte in jedem Fall folgen. Lassen Sie uns schnell überlegen, was diese Phasen sind.
- Schnelle Demonstration eines neuen Themas durch Extrahieren und Starten:
jekyll serve - Legen Sie die fehlende Abhängigkeit fest und verhindern Sie das Starten des Themas.
- Sehen Sie sich den einführenden Teil der Demo-Site an und zeichnen Sie Funktionen auf, die Sie erlernen müssen.
- Sehen Sie sich die Dateistruktur an, insbesondere den Ordner _layouts, um zu sehen, welche benutzerdefinierten Layouts und Werte Sie benötigen.
- Erstellen Sie zweite Theme-Installation und löschen Sie die Demo-Seite, Nachrichten (falls erforderlich), Bilder.
- Geben Sie die Einstellungen in _config.yml entsprechend Ihrer Site ein.
- Passen Sie die Startseite (falls erforderlich) an, indem Sie die einleitenden Artikelwerte in der Datei index.html im Stammordner bearbeiten.
- Erstellen Sie Seiten-Markup-Dateien mit dem erforderlichen einleitenden Artikel (oder kopieren Sie sie und fügen Sie sie von Ihrer Demo-Site / bestehenden Site ein).
- Erstellen Sie Seiten-Markup-Dateien im _posts-Ordner mit dem erforderlichen einführenden Artikel (oder kopieren Sie sie und fügen Sie sie von Ihrer Demo-Site / bestehenden Site ein).
- Nehmen Sie weitere Einstellungen vor, die für das Design erforderlich sind, z. B. das Erstellen einer Vorlagenkategorie.
Ich hoffe, dass diese Lektion Ihnen geholfen hat, die Erstellung einer neuen Jekyll-Site mit einem anpassbaren Thema zu übernehmen oder das Thema einer bestehenden Site auf eine neue zu setzen.
Für eine detaillierte Einführung in das Jekyll Handbuch, lesen Sie diesen Kurs von Guy Routledge:
Danke fürs Lesen und bis bald!
