Von

?️? Generator Node.js untuk galeri satu halaman (statis). Template defaultnya responsif dan mendukung pemuatan lambat. Tersedia sebagai modul CommonJS dan sebagai alat baris perintah.

Membangun galeri satu halaman hanya dengan menggunakan perintah von :

Contoh penggunaan

Instal Node.js, yang secara otomatis akan menginstal NPM. Kemudian, instal Von secara global:

npm install -g von-gallery

Sekarang masuklah ke folder mana pun di komputer Anda dengan beberapa gambar, buka jendela terminal, dan jalankan:

von -r

Dimana -r berarti "rekursif". Ini akan membuat file index.html dengan galeri semua gambar di folder itu. Secara default, Von mengelompokkan gambar menggunakan direktori atau awalannya (misalnya prefix-my_image.jpg ), namun Anda dapat menyesuaikan perilaku ini.

Tentang

Von dimaksudkan agar sangat mudah digunakan. Seringkali, perintah von adalah satu-satunya yang Anda perlukan. Anda juga dapat menentukan beberapa opsi tambahan - ini semua dapat dilakukan dengan meneruskan argumen baris perintah ke von , misalnya:

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

Alternatifnya, Anda dapat membuat file konfigurasi bernama vonrc.js . Konfigurasi ini memungkinkan Anda melakukan apa pun yang dapat dilakukan oleh argumen baris perintah, ditambah sedikit tambahan. Yaitu, Anda dapat menggunakan konfigurasi untuk menentukan grup dan fungsi pengelompokan/penyortiran khusus. Setelah Anda menentukan konfigurasi, jalankan von di direktori yang sama. Lihat contoh konfigurasi ini untuk info lebih lanjut.

Jika Anda ingin mengotomatisasi proses lebih jauh lagi, Anda dapat menambahkan von-gallery sebagai dependensi pada proyek NPM Anda dan menggunakannya sebagai modul CommonJS, misalnya:

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

Faktanya, alat baris perintah hanyalah pembungkus modul ini, sehingga keduanya menawarkan fungsionalitas yang identik.

Ingatlah bahwa Von adalah generator galeri satu halaman - jika Anda ingin mengembangkan sesuatu yang kompleks, Anda harus menggunakan generator situs statis yang tepat.

Bagaimana Von bekerja

Ada 4 komponen yang digunakan Von:

1. Gambar. Gambar adalah file sebenarnya yang terletak di folder tempat Von bekerja.
2. Grup. Grup adalah kumpulan gambar. Anda memberi tahu Von heuristik mana yang digunakan untuk mengelompokkan gambar dengan menentukan argumen baris perintah atau properti konfigurasi.
3. Skema. Skema berisi informasi tentang galeri Anda. Ini termasuk judul halaman, deskripsi halaman, susunan semua grup, dan informasi arbitrer lainnya. Anda dapat menambahkan informasi tambahan ke dalamnya menggunakan konfigurasi.
4. Templat. Templat menggunakan skema yang dibuat pada langkah sebelumnya untuk menghasilkan HTML untuk galeri Anda. Saat ini Von menggunakan mini sebagai template default, tetapi Anda juga dapat menentukan template khusus.

Logika yang dijalankan Von dapat dipisahkan menjadi dua langkah berbeda: pembuatan skema dan kompilasi template.

Fase 1: Pembuatan skema

Tidak ada file baru yang dibuat selama fase ini. Pertama, Von memindai direktori kerja untuk mencari gambar. Setelah semua gambar ditemukan, gambar tersebut dikelompokkan dan diurutkan menggunakan opsi yang Anda tentukan. Kemudian, grup, gambar, dan opsi tersebut digunakan untuk menghasilkan objek skema yang menjelaskan galeri Anda.

Skema baru ini merupakan bagian data yang independen. Bahkan, Anda bahkan tidak perlu melanjutkan ke langkah berikutnya - Anda cukup mengekspor skema menggunakan perintah von -s atau fungsi Von.generateSchema({...}) . Yang pertama mungkin berguna untuk men-debug vonrc.js Anda.

Tahap 2: Kompilasi template

Selama fase ini Von mengambil skema yang dihasilkan dan menggunakannya untuk membuat template yang Anda pilih. Saat ini, satu-satunya template bawaan adalah mini tetapi Anda dapat menentukan template Anda sendiri.

Ada dukungan bawaan untuk templat Pug, jadi Anda cukup mengarahkan Von ke file Pug menggunakan von -tp ./path/to/template.pug . Jika Anda menggunakan Pug, objek schema akan tersedia di kode Pug Anda. Misalnya, Anda dapat menggunakan schema.title dan schema.description untuk masing-masing mengakses judul dan deskripsi galeri.

Jika Anda ingin menggunakan mesin templating lain, Anda dapat menentukan my-template.von.js , dengan my-template adalah nama templat Anda. Kemudian, Anda dapat memberitahu Von untuk menggunakannya dengan menentukan argumen baris perintah yang sesuai:

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

Von akan menginisialisasi template Anda dan memanggil metode .compile() sehingga Anda dapat menangani logika lainnya. Lihat mini.von.js untuk contoh penerapannya.

Terakhir, templat Von bawaan akan menulis HTML ke file keluaran yang Anda tentukan. Perhatikan bahwa templat khusus Anda dapat mengesampingkan logika ini: templat tersebut dapat menulis ke file yang berbeda, ke beberapa file, atau tidak menulis apa pun sama sekali.