Entdecken Sie Jekylls Standardinhalt

Jekyll ist ein statischer Site-Generator, der einige der Vorteile eines Content Management Systems (CMS) bietet und gleichzeitig die Leistungs- und Sicherheitsprobleme vermeidet, die durch solche datenbankgesteuerten Sites verursacht werden. Es ist "Blog-fähig" und bietet spezielle Funktionen für den Umgang mit datumsorganisierten Inhalten. Jekyll eignet sich gut für Personen, die offline arbeiten müssen, einen kompakten Editor anstelle von Webformularen für die Pflege von Inhalten bevorzugen und die Versionskontrolle verwenden möchten, um Änderungen an ihrer Website nachzuverfolgen.

Im erster Teil dieser Serie haben wir Jekyll installiert und seine Abhängigkeiten von einem Ubuntu 16.04-Server haben eine Entwicklungssite in unserem Ausgangsverzeichnis erstellt und sichergestellt, dass der Datenverkehr zur Site von der Firewall zugelassen wird.

In diesem Tutorial werden wir den automatisch generierten Inhalt des vorherigen Handbuchs verwenden, um zu untersuchen, wie Jekyll Quelldateien in statischen Inhalt umwandelt, um das Erstellen und Verwalten von Inhalten zu vereinfachen.

Um diesem Tutorial zu folgen, müssen Sie das vorherige Handbuch * https://www.digitalocean.com/community/tutorials/how-to-set-up-a-jekyll-development-site-on-ubuntu-16 ausfüllen -04 [Einrichten einer Jekyll-Entwicklungssite unter Ubuntu 16.04]. * Wir bauen auf der Arbeit auf, die wir in diesem Tutorial ausgeführt haben, und ohne Abschluss stimmen die Beispiele nicht überein.

Wenn Sie Teil 1 abgeschlossen haben, können Sie beginnen.

Beginnen wir unsere Erkundung auf der Homepage, die aus vier verschiedenen Quelldateien besteht. Wir werden jede dieser Dateien einzeln durchgehen und untersuchen, wie sie zusammenarbeiten, um die statische Startseite zu erstellen.

Wenn Sie den Entwicklungs-Webserver nach Abschluss des ersten Lernprogramms beendet haben, starten Sie ihn jetzt erneut:

Besuchen Sie dann Ihre Site in einem Webbrowser. Der Screenshot der folgenden Homepage wurde geändert, um die Konfigurations- und Informationsquellen hervorzuheben.

Bild: http: //assets.digitalocean.com/articles/jekyll-1604/homepage-labeled.png

Ein Großteil der Leistung von Jekyll beruht auf der Möglichkeit, Informationen, die an vielen Stellen auf der statischen Website wiederholt werden, in einer einzigen Quelldatei, "+ _config.yml +", zu speichern

Die Standardeinstellung "+ _config.yml ", die durch Ausführen von " jekyll new +" erstellt wurde, enthält fünf Einstellungen, die auf der Homepage sichtbar sind:

image: http: //assets.digitalocean.com/articles/jekyll-1604/config.png [Screenshot mit Inhalt aus der Datei _confg.yml hervorgehoben]

Diese Informationen werden automatisch auf allen anderen von uns erstellten Seiten und Posts angezeigt. Wenn wir eine dieser Einstellungen aktualisieren müssen, können wir Änderungen an dieser Datei vornehmen, die dann überall aktualisiert werden. Um dies in Aktion zu beobachten, werden wir diese Werte ändern.

Öffnen Sie die Datei in einem neuen Terminal:

Wir werden die Einstellungen auf die folgenden Werte ändern:

Wir lassen die "+ url" und "+ baseurl" während der Entwicklung in Ruhe und nehmen Anpassungen vor, wenn es Zeit ist, unsere Site bereitzustellen.

Um die in der Konfigurationsdatei vorgenommenen Änderungen anzuzeigen, müssen Sie den Webserver mit "+ STRG-C +" anhalten und anschließend neu starten:

Wenn Sie fertig sind, speichern und schließen Sie Ihren Editor. Laden Sie dann die Seite in Ihrem Webbrowser neu. Abhängig von den lokalen Cache-Einstellungen Ihres Webbrowsers müssen Sie möglicherweise Umschalt + Neu laden, um die Änderungen anzuzeigen, die in den beiden unten hervorgehobenen Bereichen angezeigt werden sollen:

image: http: //assets.digitalocean.com/articles/jekyll-1604/config-changes.png [Screenshot mit Änderungen in der Datei _confg.yml hervorgehoben]

In der Datei "+ _config.yml +" können viele weitere Anpassungen vorgenommen werden. Im Moment werden wir jedoch mit der nächsten Quelldatei fortfahren und feststellen, wie die von uns vorgenommenen Änderungen auf dem Rest der Website sichtbar sind.

Folgen Sie dem "+ About +" - Link in der oberen rechten Ecke. Die Änderungen, die wir in der Konfigurationsdatei vorgenommen haben, werden hier oberhalb und unterhalb des Hauptinhalts der Seite "Info" angezeigt.

image: http: //assets.digitalocean.com/articles/jekyll-1604/about.png [Screenshot mit dem hervorgehobenen Inhalt von about.md]

Dieser zentrale Inhalt und der Linktext in der Kopfzeile werden in der Datei "+ about.md +" gespeichert, die vier Arten von Inhalten enthält:

*1. Jekyll Front Matter * + Der Block am oberen Rand der Datei + about.md +, der mit drei Strichen beginnt und endet, ist Jekylls Front Matter. Es muss das erste sein, was in der Datei enthalten ist, und wenn es vorhanden ist, signalisiert es Jekyll, dass die Datei analysiert werden soll. Es enthält normalerweise eine gültige YAML zwischen den Zeilen, um vordefinierte Variablen zu nutzen, kann aber auch leer sein. Ein leerer Front Matter-Block ist manchmal nützlich für eine CSS-Datei oder einen anderen Ort, an dem Sie keine Werte festlegen müssen, aber auf Variablen zugreifen möchten.

Auf der Seite "Info" werden drei Werte für die Titelseite festgelegt:

*2. Sichtbarer Text * + Der Seiteninhalt beginnt nach dem Titel. Der Text hier erscheint auf der Seite, z. B. „Dies ist das Basis-Jekyll 3. Thema."

*3. Markdown * + Markdown ist Teil des Inhalts der Hauptseite und steuert das Format des Inhalts. Es wird in HTML für die statische Site analysiert. Markdown wird häufig von Inhaltserstellern gegenüber HTML bevorzugt, da es einfacher zu lesen und zu schreiben ist.

*4. Liquid-Template-Direktiven * + Jekyll verwendet Liquid als Template-Engine, um dynamische Elemente einzubeziehen. Die Liquid-Direktiven werden zwischen geschweiften Klammern wie "+ {% include icon-github.html username =" jekyll "%} +" angezeigt.

Nehmen Sie auf dieser Seite einige Änderungen vor, um festzustellen, wie die Site betroffen ist.

In diesem Tutorial haben wir den Inhalt der Boilerplate untersucht, den Jekyll beim Erstellen einer neuen Site bereitstellt, und einige Änderungen vorgenommen, um zu veranschaulichen, wie die Quelldateien auf den Webseiten zusammenkommen. Dies erleichtert die Wartung einer Site, indem Werte an einem einzigen Ort festgelegt werden, an dem sie durch eine einzige Bearbeitung aktualisiert werden können, anstatt dass jede Datei geändert werden muss. Außerdem können Beiträge dynamisch auf der Startseite eingefügt werden, sodass Sie sich nicht darum kümmern müssen, eine andere Seite manuell zu aktualisieren, um einen neuen Beitrag zu erstellen.

In Teil 3 untersuchen wir die Dateistruktur der statischen Site und wie sich diese Struktur widerspiegelt die URLs unserer Seiten und Beiträge standardmäßig und wie Sie das Standardverhalten überschreiben.