Von

?️? Gerador Node.js para galerias de página única (estáticas). O modelo padrão é responsivo e suporta carregamento lento. Disponível como módulo CommonJS e como ferramenta de linha de comando.

Construindo uma galeria de página única usando apenas o comando von :

Exemplo de uso

Instale o Node.js, que instalará automaticamente o NPM. Em seguida, instale o Von globalmente:

npm install -g von-gallery

Agora vá para qualquer pasta do seu computador com algumas imagens, abra uma janela de terminal e simplesmente execute:

von -r

Onde -r significa "recursivo". Isso criará um arquivo index.html com uma galeria de todas as imagens dessa pasta. Por padrão, Von agrupa imagens usando seu diretório ou prefixo (por exemplo, prefix-my_image.jpg ), mas você pode ajustar esse comportamento.

Sobre

Von foi criado para ser muito simples de usar. Na maioria das vezes, o comando von será tudo que você precisa. Você também pode especificar algumas opções extras - tudo isso pode ser feito passando argumentos de linha de comando para von , por exemplo:

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

Alternativamente, você pode criar um arquivo de configuração chamado vonrc.js . A configuração permite que você faça qualquer coisa que os argumentos da linha de comando possam fazer, além de um pouco mais. Ou seja, você pode usar a configuração para definir grupos e funções personalizadas de agrupamento/classificação. Depois de definir uma configuração, basta executar von no mesmo diretório. Confira este exemplo de configuração para mais informações.

Se quiser automatizar ainda mais o processo, você pode adicionar von-gallery como uma dependência ao seu projeto NPM e usá-lo como um módulo CommonJS, por exemplo:

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

Na verdade, a ferramenta de linha de comando é simplesmente um wrapper em torno deste módulo, portanto ambos oferecem funcionalidade idêntica.

Lembre-se de que Von é um gerador de galeria de página única - se você deseja desenvolver algo complexo, você deve usar um gerador de sites estáticos adequado.

Como funciona o Von

Existem 4 componentes com os quais Von trabalha:

1. Imagens. As imagens são os arquivos reais localizados na pasta com a qual Von está trabalhando.
2. Grupos. Grupos são coleções de imagens. Você informa a Von quais heurísticas usar para agrupar imagens especificando argumentos de linha de comando ou propriedades de configuração.
3. Esquema. O esquema contém informações sobre sua galeria. Isso inclui o título da página, a descrição da página, a matriz de todos os grupos e outras informações arbitrárias. Você pode anexar informações extras a ele usando o arquivo config.
4. Modelo. O modelo usa o esquema criado na etapa anterior para produzir HTML para sua galeria. Atualmente Von usa mini como modelo padrão, mas você também pode definir modelos personalizados.

A lógica que Von executa pode ser separada em duas etapas distintas: geração de esquema e compilação de modelo.

Fase 1: Geração de esquema

Nenhum novo arquivo é criado durante esta fase. Primeiro, Von verifica o diretório de trabalho em busca de imagens. Depois que todas as imagens forem descobertas, elas serão agrupadas e classificadas usando as opções que você especificou. Em seguida, esses grupos, imagens e opções são usados ​​para gerar um objeto de esquema que descreve sua galeria.

Este novo esquema é um dado independente. Na verdade, você nem precisa prosseguir para a próxima etapa - você pode simplesmente exportar o esquema usando o comando von -s ou a função Von.generateSchema({...}) . O primeiro pode ser útil para depurar seu vonrc.js .

Fase 2: Compilação de modelos

Durante esta fase, Von pega o esquema gerado e o utiliza para construir o modelo que você escolheu. No momento, o único modelo integrado é mini , mas você pode especificar seus próprios modelos.

Há um suporte integrado para modelos Pug, então você pode simplesmente apontar Von para um arquivo Pug usando von -tp ./path/to/template.pug . Se você usar o Pug, o objeto schema estará disponível no seu código Pug. Por exemplo, você pode usar schema.title e schema.description para acessar o título e a descrição da galeria, respectivamente.

Se quiser usar algum outro mecanismo de modelagem, você pode definir my-template.von.js , onde my-template é o nome do seu modelo. Então, você pode dizer ao Von para usá-lo especificando os argumentos de linha de comando apropriados:

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

Von inicializará seu modelo e chamará o método .compile() permitindo que você lide com o resto da lógica. Veja mini.von.js para exemplo de implementação.

Finalmente, os modelos Von integrados gravarão HTML no arquivo de saída que você especificou. Observe que seu modelo personalizado pode substituir essa lógica: ele pode gravar em um arquivo diferente, em vários arquivos ou não gravar nada.