panini

Panini

Ein super einfacher Flachdateigenerator zur Verwendung mit Gulp. Es erstellt eine Reihe von HTML -Seiten mit einem gemeinsamen Layout . Diese Seiten können auch HTML -Partials , externe Lenkerhelfer oder externe Daten als JSON oder YAML enthalten.

Panini ist kein vollwertiger statischer Site-Generator-und löst das sehr spezifische Problem, flache Dateien aus allgemeinen Elementen zusammenzustellen, wobei eine Vorlagensprache verwendet wird.

Installation

npm install panini --save-dev

Verwendung

Füttern Sie Panini einen Strom von HTML -Dateien und erhalten Sie eine köstliche abgeflachte Site am anderen Ende.

 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' ) ) ;
} ) ;

Beachten Sie, dass Panini nach dem ersten Ausführen Layouts, Teils, Helfer und Datendateien lädt. Wenn sich diese Dateien ändern, rufen Sie panini.refresh() an, um es auf dem neuesten Stand zu bringen. Sie können dies einfach in einem Anruf von gulp.watch() tun:

 gulp . watch ( [ './src/{layouts,partials,helpers,data}/**/*' ] , [ panini . refresh ] ) ; 

Optionen

root

Typ: String

Pfad zum Root -Ordner Alle Seiten leben in dieser Option nicht in die Dateien selbst für die Verarbeitung. Dafür gilt gulp.src() . Diese Einstellung zeigt Panini an, was die gemeinsame Wurzel der Seiten Ihrer Website ist.

layouts

Typ: String

Pfad zu einem Ordner mit Layouts. Layoutdateien können die Erweiterung .html , .hbs oder .handlebars haben. Ein Layout muss default genannt werden. Um ein anderes Layout als die Standardeinstellung auf einer bestimmten Seite zu verwenden, überschreiben Sie es in der Frontmunde auf dieser Seite.

---
layout: post
---

<!-- Uses layouts/post.html as the template -->

Alle Layouts verfügen über einen speziellen Lenker, der als body bezeichnet wird und den Inhalt der Seite enthält.

 <!-- Header up here -->
{{ > body}}
<!-- Footer down here -->

pageLayouts

Typ: Object

Eine Liste von Voreinstellungen für Seitenlayouts, gruppiert nach Ordner. Auf diese Weise können Sie alle Seiten automatisch in einem bestimmten Ordner so einstellen, dass das gleiche Layout auftritt.

 panini ( {
  root : 'src/pages/' ,
  layouts : 'src/layouts/' ,
  pageLayouts : {
    // All pages inside src/pages/blog will use the blog.html layout
    'blog' : 'blog'
  }
} )

partials

Typ: String

Pfad zu einem Ordner, der HTML -Partials enthält. Teildateien können die Erweiterung .html , .hbs oder .handlebars haben. Jedes wird als Lenker -Teil registriert, auf das mit dem Namen der Datei zugegriffen werden kann. (Der Pfad zur Datei spielt keine Rolle - nur der Name der Datei selbst wird verwendet.)

 <!-- Renders partials/header.html -->
{{ > header}}

helpers

Typ: String

Pfad zu einem Ordner mit Lenkerhelfern. Lenkerhelfer sind .js -Dateien, die eine Funktion über module.exports exportieren. Der zum Registrieren des Helfer verwendete Name entspricht dem Namen der Datei.

Beispielsweise würde eine Datei namens markdown.js , die diese Funktion exportiert, einen Lenkerhelfer namens {{markdown}} hinzufügen.

 var marked = require ( 'marked' ) ;

module . exports = function ( text ) {
  return marked ( text ) ;
}

data

Typ: String

Pfad zu einem Ordner mit externen Daten, die an jeder Seite übergeben werden. Daten können als JSON ( .json ) oder YAML ( .yml ) formatiert werden. In einer Vorlage werden die Daten in einer Variablen mit demselben Namen wie in der Datei gespeichert.

Beispielsweise eine Datei namens contact.json mit Schlüssel-/Wertpaaren wie folgt:

 {
    "name" : "John Doe" ,
    "email" : "[email protected]" ,
    "phone" : "555-1212"
}

Könnte verwendet werden, um den Wert von John Doe in einer Vorlage mit der Lenkersyntax von {{contact.name}} auszugeben.

Daten können auch eine .js -Datei mit einem module.exports sein. Die von der Exportfunktion zurückgegebenen Daten werden verwendet.

Daten können auch in die Seite selbst mit einer Vorlage vorne oben in der Datei eingefügt werden.

Zuletzt wird die reservierte page zu jeder Seitenvorlage hinzugefügt, während sie rendert. Es enthält den Namen der Seite, die ohne die Erweiterung gerendert wird.

Cli

Sie können Panini auch über die CLI verwenden.

 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'

Lokale Entwicklung

git clone https://github.com/foundation/panini
cd panini
npm install

Verwenden Sie npm test , um Tests auszuführen.