Von

?️? Générateur Node.js pour les galeries (statiques) d'une seule page. Le modèle par défaut est réactif et prend en charge le chargement différé. Disponible en tant que module CommonJS et en tant qu'outil de ligne de commande.

Construire une galerie d'une seule page en utilisant uniquement la commande von :

Exemple d'utilisation

Installez Node.js, qui installera automatiquement NPM. Ensuite, installez Von globalement :

npm install -g von-gallery

Allez maintenant dans n'importe quel dossier de votre ordinateur contenant quelques images, ouvrez une fenêtre de terminal et exécutez simplement :

von -r

Où -r signifie "récursif". Cela créera un fichier index.html avec une galerie de toutes les images de ce dossier. Par défaut, Von regroupe les images en utilisant leur répertoire ou leur préfixe (par exemple prefix-my_image.jpg ), mais vous pouvez ajuster ce comportement.

À propos

Von était censé être très simple à utiliser. La plupart du temps, von commande von suffira. Vous pouvez également spécifier des options supplémentaires - tout cela peut être fait en passant des arguments de ligne de commande à von , par exemple :

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

Vous pouvez également créer un fichier de configuration appelé vonrc.js . La configuration vous permet de faire tout ce que les arguments de ligne de commande peuvent faire, plus un petit plus. À savoir, vous pouvez utiliser la configuration pour définir des groupes et des fonctions de regroupement/tri personnalisées. Une fois que vous avez défini une configuration, exécutez simplement von dans le même répertoire. Consultez cet exemple de configuration pour plus d'informations.

Si vous souhaitez automatiser encore plus le processus, vous pouvez ajouter von-gallery en tant que dépendance à votre projet NPM et l'utiliser comme module CommonJS, par exemple :

 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 ) ;

En fait, l'outil de ligne de commande est simplement un wrapper autour de ce module, les deux offrent donc des fonctionnalités identiques.

N'oubliez pas que Von est un générateur de galerie d'une seule page. Si vous souhaitez développer quelque chose de complexe, vous devez utiliser un générateur de site statique approprié.

Comment fonctionne Von

Il y a 4 composants avec lesquels Von travaille :

1. Images. Les images sont les fichiers réels situés dans le dossier avec lequel Von travaille.
2. Groupes. Les groupes sont une collection d’images. Vous indiquez à Von quelle heuristique utiliser pour regrouper les images en spécifiant soit des arguments de ligne de commande, soit des propriétés de configuration.
3. Schéma. Le schéma contient des informations sur votre galerie. Cela inclut le titre de la page, la description de la page, le tableau de tous les groupes et d'autres informations arbitraires. Vous pouvez y ajouter des informations supplémentaires à l'aide du fichier config.
4. Modèle. Le modèle utilise le schéma créé à l'étape précédente pour produire du HTML pour votre galerie. Actuellement, Von utilise mini comme modèle par défaut, mais vous pouvez également définir des modèles personnalisés.

La logique exécutée par Von peut être séparée en deux étapes distinctes : la génération de schéma et la compilation de modèles.

Phase 1 : Génération de schéma

Aucun nouveau fichier n'est créé au cours de cette phase. Tout d’abord, Von analyse le répertoire de travail à la recherche d’images. Une fois toutes les images découvertes, elles sont regroupées et triées selon les options que vous avez spécifiées. Ensuite, lesdits groupes, images et options sont utilisés pour générer un objet schéma qui décrit votre galerie.

Ce nouveau schéma est une donnée indépendante. En fait, vous n'avez même pas besoin de passer à l'étape suivante : vous pouvez simplement exporter le schéma à l'aide de la commande von -s ou de la fonction Von.generateSchema({...}) . Le premier peut être utile pour déboguer votre vonrc.js .

Phase 2 : Compilation du modèle

Au cours de cette phase, Von prend le schéma généré et l'utilise pour créer le modèle que vous avez choisi. Pour le moment, le seul modèle intégré est mini mais vous pouvez spécifier vos propres modèles.

Il existe une prise en charge intégrée des modèles Pug, vous pouvez donc simplement pointer Von vers un fichier Pug en utilisant von -tp ./path/to/template.pug . Si vous utilisez Pug, l'objet schema sera disponible dans votre code Pug. Par exemple, vous pouvez utiliser schema.title et schema.description pour accéder respectivement au titre et à la description de la galerie.

Si vous souhaitez utiliser un autre moteur de création de modèles, vous pouvez définir un my-template.von.js , où my-template est le nom de votre modèle. Ensuite, vous pouvez dire à Von de l'utiliser en spécifiant les arguments de ligne de commande appropriés :

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

Von initialisera votre modèle et appellera la méthode .compile() vous permettant de gérer le reste de la logique. Voir mini.von.js pour un exemple d'implémentation.

Enfin, les modèles Von intégrés écriront le HTML dans le fichier de sortie que vous avez spécifié. Notez que votre modèle personnalisé peut remplacer cette logique : il peut écrire dans un fichier différent, dans plusieurs fichiers ou ne rien écrire du tout.