一个超级简单的平面文件生成器,可与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
进行测试。