一個超級簡單的平面文件生成器,可與Gulp一起使用。它使用通用佈局來編譯一系列HTML頁面。這些頁面還可以包括HTML部分,外部車把助手或JSON或YAML的外部數據。
Panini不是一個成熟的靜態站點生成器,而是使用模板語言解決了從共同元素中組裝平面文件的非常具體的問題。
npm install panini --save-dev
為panini提供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
通往包含車把助手的文件夾的路徑。車把助手是.js
文件,可以通過module.exports
導出功能。用於註冊助手的名稱與文件的名稱相同。
例如,導出此功能的名為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使用Panini。
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
進行測試。