panini
v1.7.1
Gulp와 함께 사용하기위한 매우 간단한 플랫 파일 생성기. 일반적인 레이아웃을 사용하여 일련의 HTML 페이지를 컴파일합니다. 이 페이지에는 HTML 부분 , 외부 핸들 바 조절기 또는 JSON 또는 YAML과 같은 외부 데이터가 포함될 수 있습니다.
Panini는 본격적인 정적 사이트 생성기가 아닙니다. 템플릿 언어를 사용하여 공통 요소에서 플랫 파일을 조립하는 매우 구체적인 문제를 해결합니다.
npm install panini --save-devPanini에게 HTML 파일의 스트림을 공급하고 다른 쪽 끝에서 맛있는 평평한 사이트를 얻으십시오.
var gulp = require ( 'gulp' ) ;
var panini = require ( 'panini' ) ;
gulp . task ( 'default' , function ( ) {
gulp . src ( 'pages/**/*.html' )
. pipe ( panini ( {
root : 'pages/' ,
layouts : 'layouts/' ,
partials : 'partials/' ,
helpers : 'helpers/' ,
data : 'data/'
} ) )
. pipe ( gulp . dest ( 'build' ) ) ;
} ) ; Panini는 첫 번째 실행 중에 레이아웃, 부분, 도우미 및 데이터 파일을로드합니다. 이 파일이 변경 될 때마다 panini.refresh() 에게 전화하여 최신 정보를 얻으십시오. gulp.watch() 에 대한 호출 내에서 쉽게이 작업을 수행 할 수 있습니다.
gulp . watch ( [ './src/{layouts,partials,helpers,data}/**/*' ] , [ panini . refresh ] ) ; root 유형 : String
루트 폴더로가는 모든 페이지가 살고 있습니다.이 옵션은 처리를 위해 파일 자체를 가져 오지 않습니다. 이것이 gulp.src() 의 것입니다. 이 설정은 Panini에게 사이트 페이지의 일반적인 근본 원인이 무엇인지 알려줍니다.
layouts 유형 : String
레이아웃이 포함 된 폴더로가는 경로. 레이아웃 파일에는 확장자 .html , .hbs 또는 .handlebars 가있을 수 있습니다. 하나의 레이아웃은 default 으로 명명되어야합니다. 특정 페이지의 기본값 이외의 레이아웃을 사용하려면 해당 페이지의 전면 물질에서 재정의하십시오.
---
layout: post
---
<!-- Uses layouts/post.html as the template --> 모든 레이아웃에는 페이지의 내용이 포함 된 body 이라는 특수 핸들 바가 있습니다.
<!-- Header up here -->
{{ > body}}
<!-- Footer down here -->pageLayouts 유형 : Object
폴더별로 그룹화 된 페이지 레이아웃에 대한 사전 설정 목록. 이를 통해 특정 폴더 내의 모든 페이지를 자동으로 설정하여 동일한 레이아웃을 가질 수 있습니다.
panini ( {
root : 'src/pages/' ,
layouts : 'src/layouts/' ,
pageLayouts : {
// All pages inside src/pages/blog will use the blog.html layout
'blog' : 'blog'
}
} )partials 유형 : String
HTML 부분을 포함하는 폴더로가는 경로. 부분 파일에는 확장자 .html , .hbs 또는 .handlebars 가있을 수 있습니다. 각각은 파일 이름을 사용하여 액세스 할 수있는 핸들 바 부분으로 등록됩니다. (파일의 경로는 중요하지 않습니다. 파일 자체의 이름 만 사용됩니다.)
<!-- Renders partials/header.html -->
{{ > header}}helpers 유형 : String
핸들 바를 포함하는 폴더로가는 경로. 핸들 바 조절기는 module.exports 를 통해 함수를 내보내는 .js 파일입니다. 도우미를 등록하는 데 사용되는 이름은 파일 이름과 동일합니다.
예를 들어,이 기능을 내보내는 markdown.js 라는 파일은 {{markdown}} 이라는 핸들 바 헬퍼를 추가합니다.
var marked = require ( 'marked' ) ;
module . exports = function ( text ) {
return marked ( text ) ;
}data 유형 : String
외부 데이터가 포함 된 폴더로가는 경로는 모든 페이지에 전달됩니다. 데이터는 JSON ( .json ) 또는 YAML ( .yml )으로 형식화 할 수 있습니다. 템플릿 내에서 데이터는 파일과 동일한 이름의 변수 내에 저장됩니다.
예를 들어, 다음과 같은 키/값 쌍이있는 contact.json 이라는 파일.
{
"name" : "John Doe" ,
"email" : "[email protected]" ,
"phone" : "555-1212"
} {{contact.name}} 의 핸들 바 구문을 사용하여 템플릿 내에서 John Doe의 값을 출력하는 데 사용될 수 있습니다.
데이터는 module.exports 가있는 .js 파일 일 수도 있습니다. 내보내기 기능에 의해 반환 된 데이터가 사용됩니다.
파일 상단에 전면 물질 템플릿을 사용하여 데이터를 페이지 자체에 삽입 할 수도 있습니다.
마지막으로, 예약 된 page 변수는 렌더링 할 때 모든 페이지 템플릿에 추가됩니다. 확장없이 렌더링되는 페이지 이름이 포함되어 있습니다.
CLI를 통해 파니니를 사용할 수도 있습니다.
Usage: panini --layouts=[layoutdir] --root=[rootdir] --output=[destdir] [other options] 'pagesglob'
Options:
--layouts (required) path to a folder containing layouts
--root (required) path to the root folder all pages live in
--output (required) path to the folder compiled pages should get sent to
--partials path to root folder for partials
--helpers path to folder for additional helpers
--data path to folder for additional data
the argument pagesglob should be a glob describing what pages you want to apply panini to.
Example: panini --root=src/pages --layouts=src/layouts --partials=src/partials --data=src/data --output=dist 'src/pages/**/*.html'
git clone https://github.com/foundation/panini
cd panini
npm install npm test 사용하여 테스트를 실행하십시오.
