Von

?️? Generador Node.js para galerías (estáticas) de una sola página. La plantilla predeterminada responde y admite carga diferida. Disponible como módulo CommonJS y como herramienta de línea de comandos.

Construyendo una galería de una sola página usando solo el comando von :

Uso de ejemplo

Instale Node.js, que instalará NPM automáticamente. Luego, instala Von globalmente:

npm install -g von-gallery

Ahora vaya a cualquier carpeta de su computadora con algunas imágenes, abra una ventana de terminal y simplemente ejecute:

von -r

Donde -r significa "recursivo". Esto creará un archivo index.html con una galería de todas las imágenes en esa carpeta. De forma predeterminada, Von agrupa imágenes usando su directorio o prefijo (por ejemplo, prefix-my_image.jpg ), pero puedes ajustar este comportamiento.

Acerca de

Von estaba destinado a ser muy sencillo de usar. La mayoría de las veces, el comando von será todo lo que necesitará. También puede especificar algunas opciones adicionales; todo esto se puede hacer pasando argumentos de línea de comando a von , por ejemplo:

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

Alternativamente, puede crear un archivo de configuración llamado vonrc.js . La configuración le permite hacer cualquier cosa que los argumentos de la línea de comando puedan hacer, además de un poco más. Es decir, puede utilizar la configuración para definir grupos y funciones personalizadas de agrupación/clasificación. Una vez que haya definido una configuración, simplemente ejecute von en el mismo directorio. Consulte esta configuración de ejemplo para obtener más información.

Si desea automatizar aún más el proceso, puede agregar von-gallery como una dependencia a su proyecto NPM y usarlo como un módulo CommonJS, por ejemplo:

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

De hecho, la herramienta de línea de comandos es simplemente un contenedor de este módulo, por lo que ambos ofrecen una funcionalidad idéntica.

Recuerde que Von es un generador de galerías de una sola página; si desea desarrollar algo complejo, debe utilizar un generador de sitios estáticos adecuado.

Cómo funciona Von

Hay 4 componentes con los que Von trabaja:

1. Imágenes. Las imágenes son los archivos reales ubicados en la carpeta con la que está trabajando Von.
2. Grupos. Los grupos son una colección de imágenes. Le indica a Von qué heurística usar para agrupar imágenes especificando argumentos de línea de comando o propiedades de configuración.
3. Esquema. El esquema contiene información sobre su galería. Esto incluye el título de la página, la descripción de la página, la matriz de todos los grupos y otra información arbitraria. Puede agregarle información adicional usando la configuración.
4. Plantilla. La plantilla utiliza el esquema creado en el paso anterior para producir HTML para su galería. Actualmente, Von usa mini como plantilla predeterminada, pero también puede definir plantillas personalizadas.

La lógica que ejecuta Von se puede separar en dos pasos distintos: generación de esquema y compilación de plantilla.

Fase 1: generación de esquemas

No se crean nuevos archivos durante esta fase. Primero, Von escanea el directorio de trabajo en busca de imágenes. Una vez que se han descubierto todas las imágenes, se agrupan y ordenan utilizando las opciones que especificó. Luego, dichos grupos, imágenes y opciones se utilizan para generar un objeto de esquema que describe su galería.

Este nuevo esquema es un dato independiente. De hecho, ni siquiera tiene que continuar con el siguiente paso: simplemente puede exportar el esquema usando el comando von -s o la función Von.generateSchema({...}) . El primero podría resultar útil para depurar su vonrc.js .

Fase 2: compilación de plantillas

Durante esta fase, Von toma el esquema generado y lo utiliza para crear la plantilla que eligió. Por el momento, la única plantilla integrada es mini , pero puedes especificar tus propias plantillas.

Hay soporte integrado para plantillas de Pug, por lo que simplemente puede señalar a Von un archivo de Pug usando von -tp ./path/to/template.pug . Si usa Pug, el objeto schema estará disponible en su código Pug. Por ejemplo, puede utilizar schema.title y schema.description para acceder al título y la descripción de la galería respectivamente.

Si desea utilizar algún otro motor de plantillas, puede definir my-template.von.js , donde my-template es el nombre de su plantilla. Luego, puedes decirle a Von que lo use especificando los argumentos de línea de comando apropiados:

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

Von inicializará su plantilla y llamará al método .compile() permitiéndole manejar el resto de la lógica. Consulte mini.von.js para ver un ejemplo de implementación.

Finalmente, las plantillas integradas de Von escribirán HTML en el archivo de salida que hayas especificado. Tenga en cuenta que su plantilla personalizada puede anular esta lógica: puede escribir en un archivo diferente, en varios archivos o no escribir nada en absoluto.