tinystatic
JS helper functions; Dynamic URLs
Ein kleiner statischer Website-Generator, der flexibel und einfach zu verwenden ist. Es ist flexibel, da weder eine Website-Struktur noch blogspezifische Konzepte erforderlich sind. Die Verwendung ist einfach, da wir mit einer Standard-HTML-Site beginnen und Tinystatic nach und nach einführen können.
Das Konzept von tinystatic ist einfach: Erstellen Sie aus jeder Datei in einem Eingabeverzeichnis eine Datei in einem Ausgabeverzeichnis, die wir dann als öffentliches Verzeichnis unseres Webservers verwenden können. Wie tinystatic eine Ausgabedatei generiert, hängt von der Erweiterung der Eingabedatei ab: Markdown wird in HTML konvertiert, während CSS, JS und Bilder einfach kopiert werden. Für Markdown- und HTML-Dateien können Sie Metadaten am Anfang einer Datei angeben. Durch die Angabe einer Vorlage in diesen Dateimetadaten und die Bereitstellung von Vorlagen in separaten Verzeichnissen können Sie die HTML-Vorlagen-Engine von Go nutzen. Hier ein Beispiel einer typischen Blog-Website und eine Kurzanleitung finden Sie unten.
Laden Sie die tinystatic-Binärdatei für Ihr Betriebssystem herunter:
Fügen Sie optional die Binärdatei zu Ihrem Shell-Pfad hinzu, indem Sie die Binärdatei entweder in ein vorhandenes Verzeichnis wie /usr/bin einfügen oder das übergeordnete Verzeichnis der Binärdatei zu Ihrer Pfadvariablen hinzufügen.
Wenn Sie tinystatic zu Ihrem Pfad hinzugefügt haben, sollten Sie aufrufen können
tinystatic -helpAndernfalls müssen Sie beim Aufruf den Pfad zur tinystatic-Binärdatei angeben
/path/to/tinystatic -helpWenn Sie die vorgefertigten Binärdateien nicht verwenden möchten, müssen Sie den Golang-Compiler installieren, um tinystatic zu kompilieren. Anschließend können Sie tinystatic durch Ausführen installieren
go install -u github.com/julvo/tinystatic Oder indem Sie das Repository klonen und go install oder go build im Stammverzeichnis dieses Repositorys ausführen.
Dies ist ein 10-minütiges Tutorial, in dem wir einen kleinen Blog erstellen, beginnend mit einer einzelnen HTML-Seite und die Funktionen von tinystatic nacheinander vorstellen.
Zuerst erstellen wir einen Ordner namens routes . In diesem Ordner erstellen wir eine einzelne HTML-Datei index.html mit folgendem Inhalt:
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
< h1 > Welcome to our blog </ h1 >
</ body >
</ html > Jetzt können wir tinystatic zum ersten Mal ausführen. Standardmäßig erwartet tinystatic, dass es in dem Verzeichnis aufgerufen wird, das das routes enthält. Sie können dies jedoch mithilfe des Parameters -routes ändern. Nachdem Sie den Befehl ausgeführt haben, sollte neben dem routes eine output angezeigt werden. Unsere Dateistruktur sieht nun so aus:
my-blog/
routes/
index.html
output/
index.html
Wir können jetzt einen Webserver im Ausgabeverzeichnis ausführen, z. B. mithilfe des in Python integrierten Servers, um unsere Website unter http://localhost:8000 zu öffnen:
cd output
python3 -m http.server
Bisher hat tinystatic lediglich die index.html von routes in output kopiert – nicht besonders nützlich, aber warten Sie mal ...
Fügen wir eine zweite HTML-Datei zu routes hinzu, z. B. about.html :
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
< h1 > About us </ h1 >
</ body >
</ html > Nachdem wir tinystatic erneut ausgeführt haben und unser Webserver noch läuft, können wir nun zu http://localhost:8000/about navigieren. Beachten Sie, dass es in dieser Route keine .html mehr gibt, da tinystatic einen Ordner mit einer einzelnen index.html about erstellt hat, etwa so:
output/
index.html
about/
index.html
Was uns an unseren aktuellen Seiten nicht gefällt, ist die Duplizierung der gesamten grundlegenden HTML-Struktur. Wäre es nicht besser, eine gemeinsame Vorlage für index.html und about.html zu verwenden? Dazu erstellen wir neben unserem routes einen Ordner namens templates und platzieren darin eine HTML-Datei default.html :
my-blog/
routes/
index.html
about.html
templates/
default.html
Der Inhalt von default.html sollte sein:
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
{{template "body" .}}
</ body >
</ html > Außerdem ändern wir den Inhalt von routes/index.html in
---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}} und den Inhalt von routes/about.html an
---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}} Wenn Sie tinystatic erneut ausführen, ist die Ausgabe identisch mit der vorherigen Ausgabe, wir haben jedoch das HTML-Gerüst an einer einzigen Stelle konsolidiert.
Wie gerade gesehen, können wir eine Vorlage angeben, in die unser Inhalt gerendert werden soll, indem wir in den Metadaten oben in einer Datei einen Vorlagennamen angeben. Wir können auch andere Vorlagen einbinden (siehe unten) und die Vorlagenpipelines von Go verwenden. Beim Rendern haben wir Zugriff auf die oben in der Datei definierten Metadaten, eine Struktur Route mit den Feldern Route.Href , Route.FilePath und Route.Meta , die wiederum eine Karte der oben in der Datei definierten Metadaten ist. Darüber hinaus können wir auf Routes zugreifen, einen Ausschnitt (denken Sie an ein Array für Go-Neulinge) aller Routen, über die wir weiter unten mehr erfahren werden.
Lassen Sie uns diese Metadaten zusammen mit den Vorlagenprimitiven von Go verwenden, um den Seitentitel abhängig von der aktuellen Seite zu ändern. Dazu ändern wir die Metadaten in routes/about.html in
---
template: default.html
title: About
---
und ändern Sie schließlich templates/default.html in
<!doctype html >
< html >
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
< body >
{{template "body" .}}
</ body >
</ html >Nach der Neugenerierung der Website sollte der Browser nun unterschiedliche Seitentitel für unseren Index und unsere About-Seite anzeigen.
Lassen Sie uns nun ein paar Blogbeiträge in unserem Routenordner erstellen, z
routes/
index.html
about.html
posts/
first_post.md
second_post.md
Platzieren Sie etwas Markdown in diesen .md Dateien mit einem Abschnitt mit Metadaten oben, in dem die Vorlage als default.html angegeben wird, ähnlich wie wir die Metadaten in routes/index.html und routes/about.html angegeben haben. Für first_post.md könnte dies so aussehen:
---
template : default.html
title : First Post
---
# Here could be some fine content
Wenn wir tinystatic erneut ausführen, um die Ausgabe neu zu generieren, können wir jetzt http://localhost:8000/posts/first_post und http://localhost:8000/posts/second_post aufrufen. Der Markdown wurde für uns in HTML konvertiert und in einer Vorlage namens body platziert, sodass er im Platzhalter {{template "body" .}} in templates/default.html gerendert wird. Beachten Sie den Unterschied zu .html Dateien, bei denen wir {{define "body"}} ... {{end}} manuell aufrufen müssen.
Als nächstes erstellen wir eine Liste unserer Beiträge, indem wir das oben genannte Routes Slice verwenden. Wir ändern den Inhalt von routes/index.html zu:
---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
< a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul > Nach der Neugenerierung sollten wir eine Liste unserer Beiträge auf der Indexseite sehen. Das Routes -Slice stellt eine Liste aller Routen bereit, die wir mithilfe vordefinierter Hilfsfunktionen filtern können, z
.Routes | filterFilePath "**/posts/*.md" um alle Dateien mit der Endung .md in jedem Ordner namens „posts“ anzuzeigen.Routes | sortAsc "title" um Routen basierend auf dem title zu sortieren.Routes | limit 10 um nur die ersten 10 Routen zu erhalten.Routes | offset 3 um die ersten drei Routen zu überspringen.Routes | filter "title" "*Post" um basierend auf dem title zu filtern, der dem Muster *Post entspricht.Routes | filterFileName "*.md" um alle Dateien zu erhalten, die auf *.md enden.Routes | filterHref "/*" um alle Routen der obersten Ebene abzurufen.Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10 um einige der oben genannten zu kombinieren Als nächstes möchten wir für Beiträge ein anderes Layout verwenden als für die anderen Seiten. Die Beiträge sollten vor dem Text ein Bild haben, wobei wir die Bild-URL in den Beitrags-Metadaten definieren wollen. Daher fügen wir eine zweite Vorlage namens templates/post.html mit folgendem Inhalt hinzu:
<!doctype html >
< html >
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
< body >
< img src = {{.image}} />
{{template "body" .}}
</ body >
</ html >Wir ändern die Post-Metadaten in
---
template: post.html
title: First Post
image: https://some-image.url
---
Durch die Neugenerierung der Ausgabe sollten wir ein schönes Bild über unserem Beitrag erhalten. Allerdings hatten wir auch wieder doppelten HTML-Code in unseren Vorlagen. Um dies zu verbessern, erstellen wir neben routes und templates einen weiteren Ordner mit dem Namen partials . Innerhalb von Partials erstellen wir eine Datei namens head.html mit
{{define "head"}}
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}} und wir ersetzen <head>...</head> in unseren Vorlagen durch {{template "head" .}} , etwa so
<!doctype html >
< html >
{{template "head" .}}
< body >
{{template "body" .}}
</ body >
</ html > Jetzt haben wir die Codereplikation zwischen verschiedenen Vorlagen auf ein Minimum reduziert. Wir können dieses partials -Verzeichnis verwenden, um alle Arten wiederkehrender Komponenten zu speichern, z. B. Navigationsleisten oder Fußzeilen.
Beachten Sie, dass wir das Projekt nicht wirklich anhand der Ordnernamen strukturieren müssen, die wir in diesem Tutorial verwendet haben. Bei diesen Ordnernamen handelt es sich lediglich um die Standardeinstellungen, sie können jedoch mithilfe der entsprechenden Befehlszeilenargumente geändert werden (weitere Informationen finden Sie unter tinystatic -help ).
Ein vollständiges Beispiel für einen Blog finden Sie hier.
