Von

?️? Node.js-Generator für (statische) Einzelseitengalerien. Die Standardvorlage reagiert und unterstützt Lazy Loading. Verfügbar als CommonJS-Modul und als Befehlszeilentool.

Erstellen Sie eine einseitige Galerie nur mit dem Befehl von :

Beispielverwendung

Installieren Sie Node.js, wodurch NPM automatisch installiert wird. Dann installieren Sie Von global:

npm install -g von-gallery

Gehen Sie nun in einen beliebigen Ordner auf Ihrem Computer mit einigen Bildern, öffnen Sie ein Terminalfenster und führen Sie einfach Folgendes aus:

von -r

Wobei -r für „rekursiv“ steht. Dadurch wird eine index.html Datei mit einer Galerie aller Bilder in diesem Ordner erstellt. Standardmäßig gruppiert Von Bilder entweder anhand ihres Verzeichnisses oder ihres Präfixes (z. B. prefix-my_image.jpg ), Sie können dieses Verhalten jedoch anpassen.

Um

Von sollte sehr einfach zu bedienen sein. In den meisten Fällen reicht der Befehl „ von aus. Sie können auch einige zusätzliche Optionen angeben – dies kann alles durch die Übergabe von Befehlszeilenargumenten an von erfolgen, zum Beispiel:

von -o ./build/output.html -tp ./custom-template.pug --recursive

Alternativ können Sie eine Konfigurationsdatei namens vonrc.js erstellen. Mit der Konfiguration können Sie alles tun, was Befehlszeilenargumente können, plus ein kleines Extra. Sie können nämlich die Konfiguration verwenden, um Gruppen und benutzerdefinierte Gruppierungs-/Sortierfunktionen zu definieren. Sobald Sie eine Konfiguration definiert haben, führen Sie einfach von im selben Verzeichnis aus. Weitere Informationen finden Sie in dieser Beispielkonfiguration.

Wenn Sie den Prozess noch weiter automatisieren möchten, können Sie von-gallery als Abhängigkeit zu Ihrem NPM-Projekt hinzufügen und es als CommonJS-Modul verwenden, zum Beispiel:

 const Von = require ( 'von-gallery' ) ;

// Specify options for Von
let options = {
    directory : './path/to/images/' ,
    output : './build/my-gallery.html' ,
    template : 'mini' ,
    groupOrder : 'desc' ,
} ;

// Only generate a schema, without actually creating any new files:
let schema = Von . generateSchema ( options ) ;
console . log ( schema ) ;

// Build a single page gallery and store in the specified `output` file:
Von . run ( options ) ;

Tatsächlich ist das Befehlszeilentool lediglich ein Wrapper um dieses Modul, sodass beide identische Funktionen bieten.

Denken Sie daran, dass Von ein Einzelseiten-Galeriegenerator ist. Wenn Sie etwas Komplexes entwickeln möchten, sollten Sie einen geeigneten statischen Site-Generator verwenden.

Wie Von funktioniert

Es gibt 4 Komponenten, mit denen Von arbeitet:

1. Bilder. Bilder sind die eigentlichen Dateien, die sich in dem Ordner befinden, mit dem Von arbeitet.
2. Gruppen. Gruppen sind Sammlungen von Bildern. Sie teilen Von mit, welche Heuristik zum Gruppieren von Bildern verwendet werden soll, indem Sie entweder Befehlszeilenargumente oder Konfigurationseigenschaften angeben.
3. Schema. Schema enthält Informationen zu Ihrer Galerie. Dazu gehören der Seitentitel, die Seitenbeschreibung, die Anordnung aller Gruppen und andere beliebige Informationen. Sie können mithilfe der Konfiguration zusätzliche Informationen hinzufügen.
4. Vorlage. Die Vorlage verwendet das im vorherigen Schritt erstellte Schema, um HTML für Ihre Galerie zu erstellen. Derzeit verwendet Von mini als Standardvorlage, Sie können jedoch auch benutzerdefinierte Vorlagen definieren.

Die von Von ausgeführte Logik kann in zwei unterschiedliche Schritte unterteilt werden: Schemagenerierung und Vorlagenkompilierung.

Phase 1: Schemagenerierung

In dieser Phase werden keine neuen Dateien erstellt. Zunächst durchsucht Von das Arbeitsverzeichnis nach Bildern. Sobald alle Bilder erkannt wurden, werden sie anhand der von Ihnen angegebenen Optionen gruppiert und sortiert. Anschließend werden diese Gruppen, Bilder und Optionen verwendet, um ein Schemaobjekt zu generieren, das Ihre Galerie beschreibt.

Dieses neue Schema ist ein unabhängiges Datenelement. Tatsächlich müssen Sie nicht einmal mit dem nächsten Schritt fortfahren – Sie können das Schema einfach mit dem Befehl von -s oder der Funktion Von.generateSchema({...}) exportieren. Ersteres kann zum Debuggen Ihrer vonrc.js nützlich sein.

Phase 2: Vorlagenkompilierung

In dieser Phase verwendet Von das generierte Schema und erstellt daraus die von Ihnen ausgewählte Vorlage. Im Moment ist die einzige integrierte Vorlage mini , aber Sie können Ihre eigenen Vorlagen angeben.

Es gibt eine integrierte Unterstützung für Pug-Vorlagen, sodass Sie Von einfach mit von -tp ./path/to/template.pug auf eine Pug-Datei verweisen können. Wenn Sie Pug verwenden, ist das schema in Ihrem Pug-Code verfügbar. Sie können beispielsweise schema.title und schema.description verwenden, um auf den Titel bzw. die Beschreibung der Galerie zuzugreifen.

Wenn Sie eine andere Template-Engine verwenden möchten, können Sie eine my-template.von.js definieren, wobei my-template der Name Ihrer Vorlage ist. Anschließend können Sie Von anweisen, es zu verwenden, indem Sie die entsprechenden Befehlszeilenargumente angeben:

von -tp ./path/to/my-template.von.js

Von initialisiert Ihre Vorlage und ruft die Methode .compile() auf, damit Sie den Rest der Logik erledigen können. Siehe mini.von.js für eine Beispielimplementierung.

Schließlich schreiben integrierte Von-Vorlagen HTML in die von Ihnen angegebene Ausgabedatei. Beachten Sie, dass Ihre benutzerdefinierte Vorlage diese Logik außer Kraft setzen kann: Sie kann in eine andere Datei, in mehrere Dateien schreiben oder überhaupt nichts schreiben.