Von

?️? (정적) 단일 페이지 갤러리용 Node.js 생성기입니다. 기본 템플릿은 반응형이며 지연 로딩을 지원합니다. CommonJS 모듈 및 명령줄 도구로 사용할 수 있습니다.

von 명령만 사용하여 단일 페이지 갤러리 만들기:

사용 예

NPM을 자동으로 설치하는 Node.js를 설치합니다. 그런 다음 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의 작동 방식

Von은 다음과 같은 4가지 구성 요소를 사용합니다.

1. 이미지. 이미지는 Von이 작업하는 폴더에 있는 실제 파일입니다.
2. 여러 떼. 그룹은 이미지 모음입니다. 명령줄 인수 또는 구성 속성을 지정하여 이미지를 그룹화하는 데 사용할 경험적 방법을 Von에 알립니다.
3. 개요. 스키마에는 갤러리에 대한 정보가 포함되어 있습니다. 여기에는 페이지 제목, 페이지 설명, 모든 그룹 배열 및 기타 임의 정보가 포함됩니다. 구성을 사용하여 추가 정보를 추가할 수 있습니다.
4. 주형. 템플릿은 이전 단계에서 만든 스키마를 사용하여 갤러리용 HTML을 생성합니다. 현재 Von은 mini 기본 템플릿으로 사용하지만 사용자 정의 템플릿을 정의할 수도 있습니다.

Von이 실행하는 논리는 스키마 생성과 템플릿 컴파일이라는 두 가지 단계로 구분할 수 있습니다.

1단계: 스키마 생성

이 단계에서는 새 파일이 생성되지 않습니다. 먼저 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을 작성합니다. 사용자 정의 템플릿은 이 논리를 재정의할 수 있습니다. 즉, 다른 파일이나 여러 파일에 쓸 수도 있고 아무 것도 쓰지 않을 수도 있습니다.