⁉️؟ مولد Node.js للمعارض (الثابتة) ذات الصفحة الواحدة. القالب الافتراضي سريع الاستجابة ويدعم التحميل البطيء. متوفر كوحدة CommonJS وكأداة لسطر الأوامر.
إنشاء معرض صفحة واحدة باستخدام الأمر von
فقط:
قم بتثبيت Node.js، الذي سيقوم تلقائيًا بتثبيت NPM. ثم قم بتثبيت Von عالميًا:
npm install -g von-gallery
انتقل الآن إلى أي مجلد على جهاز الكمبيوتر الخاص بك مع بعض الصور، وافتح نافذة طرفية، وقم ببساطة بتشغيل:
von -r
حيث -r
تعني "العودي". سيؤدي هذا إلى إنشاء ملف index.html
يحتوي على معرض لجميع الصور الموجودة في هذا المجلد. افتراضيًا، يقوم Von بتجميع الصور إما باستخدام الدليل أو البادئة الخاصة بها (على سبيل المثال، prefix-my_image.jpg
)، ولكن يمكنك ضبط هذا السلوك.
كان من المفترض أن يكون Von سهل الاستخدام للغاية. في أغلب الأحيان، سيكون الأمر 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 مكونات يعمل معها Von:
mini
كقالب افتراضي، ولكن يمكنك أيضًا تحديد قوالب مخصصة.يمكن فصل المنطق الذي ينفذه Von إلى خطوتين متميزتين: إنشاء المخطط وتجميع القالب.
يتم إنشاء أية ملفات جديدة خلال هذه المرحلة. أولاً، يقوم Von بمسح دليل العمل بحثًا عن الصور. بمجرد اكتشاف كافة الصور، يتم تجميعها وفرزها باستخدام الخيارات التي حددتها. بعد ذلك، يتم استخدام المجموعات والصور والخيارات المذكورة لإنشاء كائن مخطط يصف معرض الصور الخاص بك.
هذا المخطط الجديد عبارة عن جزء مستقل من البيانات. في الواقع، ليس عليك حتى الانتقال إلى الخطوة التالية - يمكنك ببساطة تصدير المخطط باستخدام الأمر von -s
أو الدالة Von.generateSchema({...})
. قد يكون الخيار الأول مفيدًا لتصحيح أخطاء vonrc.js
الخاص بك.
خلال هذه المرحلة، يأخذ 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 باستخدامه عن طريق تحديد وسيطات سطر الأوامر المناسبة:
von -tp ./path/to/my-template.von.js
سيقوم Von بتهيئة القالب الخاص بك واستدعاء التابع .compile()
مما يتيح لك التعامل مع بقية المنطق. راجع mini.von.js على سبيل المثال التنفيذ.
أخيرًا، ستقوم قوالب Von المضمنة بكتابة HTML إلى ملف الإخراج الذي حددته. لاحظ أن القالب المخصص الخاص بك يمكنه تجاوز هذا المنطق: يمكنه الكتابة في ملف مختلف، أو في ملفات متعددة، أو عدم كتابة أي شيء على الإطلاق.