หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Panini

เครื่องกำเนิดไฟล์แฟลตที่เรียบง่ายสุด ๆ สำหรับใช้กับอึก มันรวบรวมชุดของ หน้า HTML โดยใช้ เค้าโครง ทั่วไป หน้าเหล่านี้อาจรวมถึง ส่วนของ HTML, ผู้ช่วย แฮนด์ภายนอกภายนอกหรือ ข้อมูล ภายนอกเป็น JSON หรือ YAML

Panini ไม่ใช่ตัวสร้างไซต์แบบคงที่เต็มรูปแบบ-มันแก้ปัญหาที่เฉพาะเจาะจงมากในการประกอบไฟล์แบนจากองค์ประกอบทั่วไปโดยใช้ภาษาเทมเพลต

การติดตั้ง 

npm install panini --save-dev

การใช้งาน

FEED 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

เส้นทางไปยังโฟลเดอร์ที่มีผู้ช่วยแฮนด์บาร์ HandleBars Helpers คือไฟล์ .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 ภายในเทมเพลตโดยใช้ไวยากรณ์ HandleBars ของ {{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 เพื่อเรียกใช้การทดสอบ

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด