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は、最初の実行時に1回レイアウト、部分的、ヘルパー、およびデータファイルをロードすることに注意してください。これらのファイルが変更されるたびに、 panini.refresh()
に電話して最新の状態にします。 gulp.watch()
への呼び出し内でこれを簡単に実行できます。
gulp . watch ( [ './src/{layouts,partials,helpers,data}/**/*' ] , [ panini . refresh ] ) ;
root
タイプ: String
ルートフォルダーへのパスすべてのページが住んでいます。このオプションはgulp.src()
処理のためにファイル自体を引き込みません。この設定は、パニーニに、サイトのページの一般的なルートが何であるかを示しています。
layouts
タイプ: String
レイアウトを含むフォルダーへのパス。レイアウトファイルには、extension .html
、 .hbs
、または.handlebars
を持つことができます。 1つのレイアウトには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を介して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
を使用してテストを実行します。