panini

بانيني

مولد ملفات مسطحة بسيطة للغاية للاستخدام مع Gulp. يجمع سلسلة من صفحات HTML باستخدام تخطيط مشترك. يمكن أن تتضمن هذه الصفحات أيضًا الجزورات HTML أو مساعدين المقانين الخارجيين أو البيانات الخارجية مثل JSON أو YAML.

Panini ليس مولد موقع ثابت بالكامل-وهو يحل المشكلة المحددة للغاية لتجميع الملفات المسطحة من العناصر الشائعة ، باستخدام لغة templating.

تثبيت

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"
}

يمكن استخدامها لإخراج قيمة John Doe داخل قالب باستخدام بناء جملة المقاود لـ {{contact.name}} .

يمكن أن تكون البيانات أيضًا ملف .js مع module.exports . سيتم استخدام البيانات التي يتم إرجاعها بواسطة وظيفة التصدير.

يمكن أيضًا إدراج البيانات في الصفحة نفسها باستخدام قالب المادة الأمامية في الجزء العلوي من الملف.

أخيرًا ، تتم إضافة متغير page المحجوز إلى كل قالب صفحة أثناء تقديمه. أنه يحتوي على اسم الصفحة التي يتم تقديمها ، دون التمديد.

CLI

يمكنك أيضًا استخدام Panini عبر CLI.

 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 لتشغيل الاختبارات.