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は、最初の実行時に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を使用してテストを実行します。