Von

?? ตัวสร้าง Node.js สำหรับแกลเลอรีหน้าเดียว (คงที่) เทมเพลตเริ่มต้นตอบสนองและรองรับการโหลดแบบ Lazy Loading มีให้เป็นโมดูล CommonJS และเป็นเครื่องมือบรรทัดคำสั่ง

การสร้างแกลเลอรีหน้าเดียวโดยใช้คำสั่ง von :

ตัวอย่างการใช้งาน

ติดตั้ง Node.js ซึ่งจะติดตั้ง NPM โดยอัตโนมัติ จากนั้นติดตั้ง Von ทั่วโลก:

npm install -g von-gallery

ตอนนี้ไปที่โฟลเดอร์ใดก็ได้บนคอมพิวเตอร์ของคุณพร้อมรูปภาพ เปิดหน้าต่างเทอร์มินัลแล้วเรียกใช้:

von -r

โดยที่ -r ย่อมาจาก "เรียกซ้ำ" ซึ่งจะสร้างไฟล์ index.html พร้อมแกลเลอรีรูปภาพทั้งหมดในโฟลเดอร์นั้น ตามค่าเริ่มต้น Von จัดกลุ่มรูปภาพโดยใช้ไดเร็กทอรีหรือคำนำหน้า (เช่น prefix-my_image.jpg ) แต่คุณสามารถปรับลักษณะการทำงานนี้ได้

เกี่ยวกับ

วอนตั้งใจให้ใช้งานง่ายมาก โดยส่วนใหญ่แล้ว คำสั่ง von จะเป็นสิ่งที่คุณต้องการ คุณยังสามารถระบุตัวเลือกพิเศษบางอย่างได้ - ทั้งหมดนี้สามารถทำได้โดยส่งอาร์กิวเมนต์บรรทัดคำสั่งไปที่ von ตัวอย่างเช่น:

von -o ./build/output.html -tp ./custom-template.pug --recursive

หรือคุณสามารถสร้างไฟล์ปรับแต่งชื่อ vonrc.js ได้ การกำหนดค่าช่วยให้คุณทำทุกอย่างที่อาร์กิวเมนต์บรรทัดคำสั่งสามารถทำได้ บวกเพิ่มอีกเล็กน้อย กล่าวคือ คุณสามารถใช้การกำหนดค่าเพื่อกำหนดกลุ่มและฟังก์ชันการจัดกลุ่ม/การเรียงลำดับแบบกำหนดเองได้ เมื่อคุณกำหนดคอนฟิกแล้ว ให้รัน von ในไดเร็กทอรีเดียวกัน ลองดูการกำหนดค่าตัวอย่างนี้สำหรับข้อมูลเพิ่มเติม

หากคุณต้องการทำให้กระบวนการเป็นแบบอัตโนมัติยิ่งขึ้น คุณสามารถเพิ่ม von-gallery เป็นการพึ่งพาให้กับโปรเจ็กต์ NPM ของคุณและใช้เป็นโมดูล CommonJS เช่น:

 const Von = require ( 'von-gallery' ) ;

// Specify options for Von
let options = {
    directory : './path/to/images/' ,
    output : './build/my-gallery.html' ,
    template : 'mini' ,
    groupOrder : 'desc' ,
} ;

// Only generate a schema, without actually creating any new files:
let schema = Von . generateSchema ( options ) ;
console . log ( schema ) ;

// Build a single page gallery and store in the specified `output` file:
Von . run ( options ) ;

ในความเป็นจริง เครื่องมือบรรทัดคำสั่งเป็นเพียงตัวล้อมรอบโมดูลนี้ ดังนั้นทั้งสองจึงมีฟังก์ชันการทำงานที่เหมือนกัน

โปรดจำไว้ว่า Von เป็นเครื่องมือสร้างแกลเลอรีหน้าเดียว - หากคุณต้องการพัฒนาสิ่งที่ซับซ้อน คุณควรใช้เครื่องมือสร้างไซต์แบบคงที่ที่เหมาะสม

วิธีการทำงานของวอน

มี 4 องค์ประกอบที่วอนทำงานร่วมกับ:

1. รูปภาพ รูปภาพคือไฟล์จริงที่อยู่ในโฟลเดอร์ที่ Von ทำงานด้วย
2. กลุ่ม. กลุ่มคือการรวบรวมภาพ คุณบอก Von ว่าจะใช้การวิเคราะห์พฤติกรรมแบบใดในการจัดกลุ่มรูปภาพโดยการระบุอาร์กิวเมนต์บรรทัดคำสั่งหรือคุณสมบัติการกำหนดค่า
3. สคีมา สคีมาประกอบด้วยข้อมูลเกี่ยวกับแกลเลอรีของคุณ ซึ่งรวมถึงชื่อหน้า คำอธิบายหน้า อาร์เรย์ของกลุ่มทั้งหมด และข้อมูลอื่น ๆ ที่กำหนดเอง คุณสามารถผนวกข้อมูลเพิ่มเติมได้โดยใช้การกำหนดค่า
4. แม่แบบ เทมเพลตใช้สคีมาที่สร้างขึ้นในขั้นตอนก่อนหน้าเพื่อสร้าง HTML สำหรับแกลเลอรีของคุณ ปัจจุบัน Von ใช้ mini เป็นเทมเพลตเริ่มต้น แต่คุณยังสามารถกำหนดเทมเพลตแบบกำหนดเองได้

ตรรกะ Von ดำเนินการสามารถแยกออกเป็นสองขั้นตอนที่แตกต่างกัน: การสร้างสคีมาและการคอมไพล์เทมเพลต

ระยะที่ 1: การสร้างสคีมา

ไม่มีการสร้างไฟล์ใหม่ในระหว่างขั้นตอนนี้ ขั้นแรก Von จะสแกนไดเร็กทอรีการทำงานเพื่อหารูปภาพ เมื่อค้นพบรูปภาพทั้งหมดแล้ว รูปภาพเหล่านั้นจะถูกจัดกลุ่มและจัดเรียงโดยใช้ตัวเลือกที่คุณระบุ จากนั้น กลุ่ม รูปภาพ และตัวเลือกดังกล่าวจะถูกนำมาใช้เพื่อสร้างออบเจ็กต์สคีมาที่อธิบายแกลเลอรีของคุณ

สคีมาใหม่นี้เป็นข้อมูลอิสระ ที่จริงแล้ว คุณไม่จำเป็นต้องดำเนินการขั้นตอนถัดไปด้วยซ้ำ คุณสามารถส่งออกสคีมาโดยใช้คำสั่ง von -s หรือฟังก์ชัน Von.generateSchema({...}) ได้ แบบแรกอาจมีประโยชน์สำหรับการดีบัก vonrc.js ของคุณ

ขั้นตอนที่ 2: การรวบรวมเทมเพลต

ในระหว่างขั้นตอนนี้ Von จะใช้สคีมาที่สร้างขึ้นและใช้เพื่อสร้างเทมเพลตที่คุณเลือก ในขณะนี้ เทมเพลตในตัวมีเพียงเทมเพลต mini แต่คุณสามารถระบุเทมเพลตของคุณเองได้

มีการรองรับเทมเพลต Pug ในตัว ดังนั้นคุณจึงสามารถชี้ Von ไปที่ไฟล์ Pug โดยใช้ von -tp ./path/to/template.pug หากคุณใช้ Pug ออบเจ็กต์ schema จะพร้อมใช้งานในโค้ด Pug ของคุณ ตัวอย่างเช่น คุณสามารถใช้ schema.title และ schema.description เพื่อเข้าถึงชื่อและคำอธิบายของแกลเลอรีตามลำดับ

หากคุณต้องการใช้กลไกการสร้างเทมเพลตอื่น คุณสามารถกำหนด my-template.von.js โดยที่ my-template คือชื่อของเทมเพลตของคุณ จากนั้น คุณสามารถบอกให้วอนใช้งานได้โดยระบุอาร์กิวเมนต์บรรทัดคำสั่งที่เหมาะสม:

von -tp ./path/to/my-template.von.js

Von จะเริ่มต้นเทมเพลตของคุณและเรียกใช้เมธอด .compile() เพื่อให้คุณจัดการตรรกะที่เหลือได้ ดูตัวอย่างการใช้งาน mini.von.js

สุดท้าย เทมเพลต Von ในตัวจะเขียน HTML ลงในไฟล์เอาต์พุตที่คุณระบุ โปรดทราบว่าเทมเพลตแบบกำหนดเองของคุณสามารถแทนที่ตรรกะนี้ได้ โดยสามารถเขียนลงในไฟล์อื่น ลงในหลายไฟล์ หรือไม่เขียนอะไรเลยก็ได้