Von

?️? Генератор Node.js для (статических) одностраничных галерей. Шаблон по умолчанию адаптивный и поддерживает отложенную загрузку. Доступен как модуль CommonJS и как инструмент командной строки.

Создание одностраничной галереи с помощью только команды von :

Пример использования

Установите Node.js, который автоматически установит NPM. Затем установите Von глобально:

npm install -g von-gallery

Теперь зайдите в любую папку на вашем компьютере с изображениями, откройте окно терминала и просто запустите:

von -r

Где -r означает «рекурсивный». Это создаст файл index.html с галереей всех изображений в этой папке. По умолчанию Von группирует изображения либо по каталогу, либо по префиксу (например, prefix-my_image.jpg ), но вы можете настроить это поведение.

О

Фон должен был быть очень простым в использовании. В большинстве случаев команда von будет всем, что вам нужно. Вы также можете указать некоторые дополнительные параметры — все это можно сделать, передав аргументы командной строки von , например:

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

Альтернативно вы можете создать файл конфигурации с именем vonrc.js . Конфигурация позволяет вам делать все, что могут делать аргументы командной строки, плюс еще кое-что. А именно, вы можете использовать конфигурацию для определения групп и пользовательских функций группировки/сортировки. После того, как вы определили конфигурацию, просто запустите von в том же каталоге. Посмотрите этот пример конфигурации для получения дополнительной информации.

Если вы хотите еще больше автоматизировать процесс, вы можете добавить von-gallery в качестве зависимости к вашему проекту NPM и использовать его как модуль CommonJS, например:

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

Фактически, инструмент командной строки — это просто оболочка этого модуля, поэтому оба они предлагают одинаковую функциональность.

Помните, что Von — это генератор одностраничных галерей. Если вы хотите разработать что-то сложное, вам следует использовать подходящий генератор статических сайтов.

Как работает Вон

Есть 4 компонента, с которыми работает Von:

1. Изображения. Изображения — это фактические файлы, расположенные в папке, с которой работает Вон.
2. Группы. Группы представляют собой коллекции изображений. Вы указываете Von, какую эвристику использовать для группировки изображений, указывая либо аргументы командной строки, либо свойства конфигурации.
3. Схема. Схема содержит информацию о вашей галерее. Сюда входит заголовок страницы, описание страницы, массив всех групп и другая произвольная информация. Вы можете добавить к нему дополнительную информацию, используя файл config.
4. Шаблон. Шаблон использует схему, созданную на предыдущем шаге, для создания HTML-кода для вашей галереи. В настоящее время Von использует mini в качестве шаблона по умолчанию, но вы также можете определить собственные шаблоны.

Логику, которую выполняет Von, можно разделить на два отдельных этапа: генерацию схемы и компиляцию шаблона.

Этап 1: Создание схемы

На этом этапе новые файлы не создаются. Сначала Фон сканирует рабочий каталог на наличие изображений. После обнаружения всех изображений они группируются и сортируются с использованием указанных вами параметров. Затем указанные группы, изображения и параметры используются для создания объекта схемы, описывающего вашу галерею.

Эта новая схема представляет собой независимый фрагмент данных. На самом деле, вам даже не обязательно переходить к следующему шагу — вы можете просто экспортировать схему с помощью команды von -s или функции Von.generateSchema({...}) . Первое может быть полезно для отладки вашего vonrc.js .

Этап 2: Компиляция шаблона

На этом этапе Фон берет сгенерированную схему и использует ее для создания выбранного вами шаблона. На данный момент единственным встроенным шаблоном является mini , но вы можете указать свои собственные шаблоны.

Существует встроенная поддержка шаблонов Pug, поэтому вы можете просто указать Von на файл Pug, используя von -tp ./path/to/template.pug . Если вы используете Pug, объект schema будет доступен в вашем коде Pug. Например, вы можете использовать schema.title и schema.description для доступа к заголовку и описанию галереи соответственно.

Если вы хотите использовать какой-либо другой шаблонизатор, вы можете определить my-template.von.js , где my-template — это имя вашего шаблона. Затем вы можете указать Von использовать его, указав соответствующие аргументы командной строки:

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

Von инициализирует ваш шаблон и вызовет метод .compile() позволяя вам обрабатывать остальную логику. См. пример реализации mini.von.js.

Наконец, встроенные шаблоны Von запишут HTML в указанный вами выходной файл. Обратите внимание, что ваш собственный шаблон может переопределить эту логику: он может записывать в другой файл, в несколько файлов или вообще ничего не записывать.