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に渡すことによって実行できます。次に例を示します。

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 は単一ページのギャラリー ジェネレーターであることに注意してください。複雑なものを開発したい場合は、適切な静的サイト ジェネレーターを使用する必要があります。

フォンの仕組み

Von が使用するコンポーネントは 4 つあります。

1. 画像。画像は、Von が作業しているフォルダーにある実際のファイルです。
2. グループ。グループは画像の集合です。コマンド ライン引数または構成プロパティを指定して、イメージをグループ化するためにどのヒューリスティックを使用するかを Von に指示します。
3. スキーマ。スキーマにはギャラリーに関する情報が含まれています。これには、ページ タイトル、ページ説明、すべてのグループの配列、およびその他の任意の情報が含まれます。設定を使用して追加情報を追加できます。
4. テンプレート。テンプレートは、前の手順で作成したスキーマを使用して、ギャラリー用の HTML を生成します。現在、Von はデフォルトのテンプレートとしてmini使用しますが、カスタム テンプレートを定義することもできます。

Von が実行するロジックは、スキーマの生成とテンプレートのコンパイルという 2 つの異なるステップに分けることができます。

フェーズ 1: スキーマの生成

このフェーズでは新しいファイルは作成されません。まず、Von は作業ディレクトリをスキャンしてイメージを探します。すべての画像が検出されると、指定したオプションを使用してグループ化され、並べ替えられます。次に、これらのグループ、画像、オプションを使用して、ギャラリーを説明するスキーマ オブジェクトが生成されます。

この新しいスキーマは独立したデータです。実際、次のステップに進む必要さえありません。von von -sコマンドまたはVon.generateSchema({...})関数を使用してスキーマをエクスポートするだけです。前者は、 vonrc.jsデバッグに役立つ可能性があります。

フェーズ 2: テンプレートのコンパイル

このフェーズでは、Von は生成されたスキーマを取得し、それを使用して選択したテンプレートを構築します。現時点では、組み込みのテンプレートはminiですが、独自のテンプレートを指定できます。

Pug テンプレートのサポートが組み込まれているため、 von -tp ./path/to/template.pugを使用して Von に Pug ファイルを指定するだけです。 Pug を使用する場合は、Pug コードでschemaオブジェクトを使用できます。たとえば、 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 を書き込みます。カスタム テンプレートはこのロジックをオーバーライドできることに注意してください。別のファイルや複数のファイルに書き出すことも、まったく書き込まないこともできます。