zunächst wollte ich diesen Artikel eine Routing -Komponente in Jekyll hacken, wenn ich auf Github -Seiten mit Markdown, Flüssigkeit und Yaml gehostet wurde. Offensichtlich ist das ein bisschen lang, also musste ich es verkürzen. Wie auch immer, der Punkt ändert sich nicht: Jekyll fehlt eine Art Router, und ich denke, ich habe eine nicht so totenfische -Lösung gefunden, um eine nachzuahmen.
Aber das erste Dinge zuerst: Ich komme aus einem Symfony -Hintergrund, also meine ich eine Komponente, die URLs auf Namen ordnet - a.k.a.Routen - so können Sie sicher eine URL ändern Ohne Ihre Codebasis kriechen zu müssen, um alle Links auf den Weg zum veralteten Speicherort zu aktualisieren. Warum sollten wir so etwas brauchen?
Ich arbeite derzeit hart an den Dokumenten für Sassdoc v2 (noch nicht veröffentlicht, als dieses Schreiben). Wir haben ziemlich viel Inhalt; Über 20 Seiten über 4 verschiedene Abschnitte aufgeteilt, die viele Code -Beispiele und Kreuzreferenzen enthalten.Deshalb brauchen wir eine Routing -Komponente. Dann beziehen wir uns eher auf URLs mit Namen als auf ihrem Weg, sodass wir einen Pfad ändern und gleichzeitig den Namen vollkommen gültig halten können.
Was müssen wir diese Arbeit machen? Wenn Sie Jekyll ausführen, aber nicht auf den abgesicherten Modus beschränkt sind (was bei Verwendung von Github -Seiten zum Hosting leider der Fall ist), können Sie sicherlich ein Ruby -Plugin finden/bauen. Dies wäre die beste Lösung, da dies normalerweise etwas ist, das von einer serverseitigen Sprache behandelt wird.
Wenn Sie Ihre Website nun auf Github -Seiten hosten, ist dies häufiger der Fall als nicht bei Jekyll, und können Sie keine Plugins verwenden, noch können Sie den Kern von Jekyll mit benutzerdefiniertem Ruby -Code erweitern. Flüssigkeit und Markdown.
Die Hauptidee besteht darin, eine Datei zu haben, die alle unsere Routen enthält, die den tatsächlichen URLs zugeordnet sind. Zum Glück ermöglicht es uns mit Jekyll, benutzerdefinierte globale Variablen über YAML/JSON/CSV -Dateien zu definieren, die im _data -Ordner gespeichert sind und später über Site.Data.
Um ein wenig syntaktischer Zucker hinauf hinzuzufügen, erstellen wir Markdown -Link -Referenzen, die eine freundlichere Syntax ermöglichen - aber gehen wir nicht zu schnell.
Der Punkt des Routers besteht darin, Routen (a.k.a. Namen ) aufzuteilen, die auf URLs (eins zu eins) zugeordnet sind. Es ist möglich, YAML/JSON/CSV -Dateien im Ordner _data eines Jekyll -Projekts zu erstellen. Lassen Sie uns also mit einer YAML -Datei mit dem Namen Routes.yml:
entscheidenhome: "/" about: "/about-us/" faq: "/frequently-asked-questions/" repository: "https://github.com/user/repository"
Sie haben vielleicht festgestellt, dass wir natürlich nicht auf interne Links beschränkt sind. Wir können Routen für externe URLs vollständig definieren, um sie immer wieder einzugeben, wenn sie regelmäßig auftauchen. In der gleichen Weise hielten wir für unser Beispiel auf 4 Routen an, aber der Router könnte Hunderte von Routen enthalten.
Da sich die Datei in _data befindet, können wir auf ihren Inhalt so ziemlich überall mit Site.data zugreifen.
---
layout: default
title: "About us"
---
<span><!-- Content about us -->
</span>
Go to our [GitHub repository]({{ site.data.routes.repository }}).
Or read the section dedicated to [Frequently Asked Questions]({{ site.data.routes.faq }}).Wie Sie sehen, beziehen wir uns nicht mehr auf URLs, sondern auf Routen. Dies ist keine Magie, sondern sagt Jekyll nur, auf globale Variablen zuzugreifen, die am angegebenen Pfad gespeichert sind (z. B. Site.data.Routes.faq).
Wenn das Repository nun nicht mehr auf GitHub oder die URL der Seite "Über uns" gehostet wird, ist die URL jetzt /über /keine Sorge! Durch die Aktualisierung des Routers lassen wir es funktionieren, ohne auf unsere Seiten zurückzukehren, um unsere Links zu aktualisieren.
Zu diesem Zeitpunkt haben wir einen funktionalen Router, mit dem wir jede URL ändern können, ohne unsere Website zu kriechen, um defekte Links zu beheben. Sie können also sagen, dass es schon ziemlich cool ist. Es ist jedoch nicht sehr bequem, Site einzugeben.Data.routes.faq. Wir könnten es sicherlich ein bisschen eleganter machen!
Ja und nein. Zunächst dachte ich daran, eine kleine Route () -Funktion zu erstellen, um einen Schlüsselnamen zu akzeptieren und den Wert zurückzugeben. Das Problem ist, dass wir Jekyll im abgesicherten Modus ausführen, sodass wir es nicht mit Ruby -Code erweitern können. Kein Glück.
Dann dachte ich an eine Markdown -Funktion, die ich noch nie verwendet habe: Link Referenzen. So wird ein Link in Markdown dargestellt:
home: "/" about: "/about-us/" faq: "/frequently-asked-questions/" repository: "https://github.com/user/repository"
Sie können auch den Link auf eine Referenz einstellen - was übrigens völlig unsichtbar ist, überall auf der Seite definiert, wie SO:
---
layout: default
title: "About us"
---
<span><!-- Content about us -->
</span>
Go to our [GitHub repository]({{ site.data.routes.repository }}).
Or read the section dedicated to [Frequently Asked Questions]({{ site.data.routes.faq }}).Hinweis: Klammern werden durch die Verwendung einer Referenz anstelle einer URL durch Klammern ersetzt.
Sie können es Ihnen ermöglichen, alle Ihre Links an derselben Stelle (zum Beispiel unten) und nicht über das gesamte Dokument zu definieren. Ich muss sagen, ich habe diese Funktion nicht viel verwendet, aber in diesem Fall ist es nützlich.
Die Idee besteht darin, die Verknüpfungsreferenzen aus unserem Router autogenerieren, damit wir unsere Routen als Referenz in jeder Datei verwenden können. Es stellt sich heraus, dass dies in Flüssigkeit überraschend einfach ist:
[I am a link](http://link.url/)
Wenn dies für Schleife überall auf der Seite hinzugefügt wird, weist dies Jekyll an, dies als Liquid Code zu verarbeiten, der dann als Markdown -Referenzen verarbeitet wird. Zum Beispiel könnten wir zum Beispiel zu unserem vorherigen Beispiel zurückkehren:
[I am a link][id_reference] [id_reference]: http://link.url
Jetzt reden wir, oder? Das einzige Problem besteht darin, diese Schleife in eine beliebige Seite aufzunehmen. Zuerst dachte ich daran, es im Layout hinzuzufügen, sodass es mit dem entsprechenden Layout automatisch zu einer beliebigen Seite hinzugefügt wird. Das Problem ist, dass Layouts nicht als Markdown in Jekyll verarbeitet werden, sodass die Referenzen am Ende des DOM tatsächlich sichtbar sind. Schlimmer noch, sie sind auf unseren Seiten nicht nutzbar, da sie nicht als Markdown bearbeitet wurden ... schade.
Wir können jedoch immer noch etwas tun, um es etwas besser zu machen. Wir können diese Schleife in einen flüssigen Teil einfügen und das Teil auf jeder Seite einbeziehen, anstatt die Schleife zu kopieren. Sagen Sie, wir erstellen eine Routen.
# _includes/route.html
{% for route in site.data.routes %}
[{{ route[0] }}]: {{ route[1] }}
{% endfor %}
---
layout: default
title: "About us"
---
<span><!-- Content about us -->
</span>
Go to our [GitHub repository][repository].
Or read the section dedicated to [Frequently Asked Questions][faq].
{% for route in site.data.routes %}
[{{ route[0] }}]: {{ route[1] }}
{% endfor %}Hinweis: Sie können das Teil überall auf der Seite aufnehmen, nicht nur oben. Sie könnten es total als die allerletzte Zeile der Datei ausdrücken.
endgültige Gedanken
Was sind die Vorteile der Verwendung von Jekyll für meine Website? , blog-bewusst, statischer Site-Generator, der sich perfekt für persönliche, Projekt- oder Organisationsstandorte eignet. Es ist unglaublich flexibel und unterstützt benutzerdefinierte URL -Strukturen, Themen, Plugins und mehr. Da es statische Websites erzeugt, ist es im Vergleich zu herkömmlichen CMS-Plattformen unglaublich schnell und sicher. von Drittanbieter-Bereitstellungsplattformen, einschließlich Github-Seiten, Netlify und mehr. Um Ihre Website bereitzustellen, müssen Sie sie lokal erstellen und dann die generierten statischen Dateien auf Ihre ausgewählte Plattform verschieben. Jede Plattform hat ihren eigenen spezifischen Bereitstellungsprozess. Überprüfen Sie daher ihre Dokumentation auf detaillierte Anweisungen. , von persönlichen Blogs bis zu großen Organisations -Websites. Einige Beispiele sind die offizielle Jekyll -Website, Github -Seiten und viele mehr. Auf der offiziellen Jekyll -Website finden Sie einen Schaufenster von Jekyll -Websites. Websites. Es ist sehr kompatibel mit Jekyll und bietet einen einfachen, optimierten Bereitstellungsprozess. Sie können Ihr GitHub -Repository mit Cloudflare -Seiten verbinden und Ihre Website automatisch erstellt und bereitstellen, wenn Sie in Ihr Repository drücken. Die Jekyll -Website ist eine großartige Ressource, um mehr über Jekyll zu erfahren. Es bietet umfassende Dokumentation, Tutorials und ein Schaufenster von Jekyll -Websites. Darüber hinaus stehen viele Community -Ressourcen zur Verfügung, einschließlich Foren, Blogs und Github -Repositories.
Kann ich Jekyll mit anderen Programmiersprachen verwenden? Mit anderen Programmiersprachen mithilfe von Plugins und Integrationen verwendet werden. Zum Beispiel können Sie Jekyll mit JavaScript verwenden, um Ihre Website oder mit CSS -Präprozessoren wie SASS zu dynamischen Funktionen hinzufügen, um Ihren Styling -Prozess zu optimieren. > Jekyll bietet verschiedene Funktionen, mit denen Sie Ihre Website für SEO optimieren können. Dies umfasst benutzerdefinierte URL -Strukturen, Unterstützung für Meta -Tags und die Möglichkeit, eine XML -Sitemap zu erzeugen. Da Jekyll statische Websites erzeugt, ist es außerdem unglaublich schnell, was die Suchmaschinenrangliste Ihrer Website verbessern kann.
Das obige ist der detaillierte Inhalt vonHacken einer Routing -Komponente in Jekyll. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So erstellen Sie Diagramme und Datenanalysediagramme in PPT
Tutorial zur Verwendung von Kindeditor
Der Unterschied zwischen counta und count
Erstellen Sie einen Internetserver
Der Unterschied zwischen vscode und vs
So lösen Sie das Problem des langsamen Downloads von Baidu Netdisk
So lösen Sie das Problem, dass diese Windows-Kopie nicht echt ist
Was bedeutet Uplink-Port?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
