تنزيل VvvebJs - تنزيل رمز المصدر VvvebJs

VvvebJs

موارد أخرى

vvebJs 2.0.3

تنزيل

vvvebjs

اسحب مكتبة JavaScript Builder Page Builder.
بنيت مع الفانيليا JS مع عدم وجود تبعيات أو أدوات بناء و Bootstrap 5

الموقع | الوثائق | المنتدى | تغريد

عرض مباشر

للحصول على CMS مفتوح المصدر بالكامل باستخدام VVVEBJS PAGE BUILDER CHECK VVVEB CMS

باستخدام قالب صفحة VVVEB المقصودة للصفحة التجريبية وأقسام Bootstrap 5 وكتل.

سمات

المكونات والكتل/المقتطفات السحب والإفلات وفي الصفحة إدراج.
التراجع عن العمليات/إعادة.
واجهة واحدة أو اثنين من اللوحات.
مدير الملفات والتسلسل الهرمي للمكون.
أضف صفحة جديدة مع خيارات القالب والمجلد.
محرر الكود المباشر مع تمييز بناء الجملة المكون الإضافي Codemirror.
تحميل الصورة مع مثال البرنامج النصي PHP.
قم بتنزيل الصفحة أو تصدير HTML أو حفظ الصفحة على الخادم مع مثال على البرنامج النصي PHP.
مكونات/أقسام/كتل قائمة البحث.
Bootstrap 5 مكونات.
معرض الوسائط مع بحث الصور المتكاملة CC0 ودعم تحميل الخادم.
الصور والفيديو وعناصر iFrame تغيير حجم المقابض.
عناصر الخبز للاختيار عناصر الوالدين أسهل.
قائمة بخطوط Google الكاملة لاستخدام اختيار الخط.
YouTube ، خرائط Google ، Charts.js إلخ.
Plugin CKEDITOR اختياري لاستبدال محرر النص المضمّن.
zip تنزيل البرنامج المساعد لتنزيل الصفحة وجميع الأصول كملف zip.
مكون رمز SVG مجمع مع مئات من الرموز الحرة.
تحريك على دعم التمرير لعناصر الصفحة.
موضوع الطباعة العالمية ومحرر البليت الملون.

بشكل افتراضي ، يأتي المحرر مع مكونات Bootstrap 5 ومكونات واجهة المستخدم ويمكن تمديدها مع أي نوع من المكونات والمدخلات.

ثَبَّتَ

استنساخ المستودع

 # git 2.13+ 
git clone --recurse-submodules https://github.com/givanz/VvvebJs

# older git versions 
git clone --recursive https://github.com/givanz/VvvebJs

سحب التغييرات

git pull --recurse-submodules

الاستخدام

استنساخ المستودع أو قم بتنزيل إصدار ثم افتح editor.html

بسبب أمان IFRAME للمتصفح ، تحتاج إلى استخدام خادم ويب مثل Apache/XAMPP وفتح http://localhost/editor.html

لاستخدام ميزة تحميل الصورة أو صفحة حفظ ، تحتاج إلى تثبيت PHP.

عامل ميناء

التنمية المحلية

من مجلد VVVEBJS

docker-compose up

صورة

أو تشغيل الصورة

docker run -p 8080:80 vvveb/vvvebjs

افتح http: // localhost: 8080/editor.php أو http: // localhost: 8080/editor.html

حفظ الصفحة

حفظ وظيفة الصفحة تحتاج إما php أو العقدة

PHP

إذا كنت تستخدم Docker أو XAMPP أو حساب استضافة مشترك يجب أن تعمل PHP دون أي تغيير.

يتم التوفير باستخدام Save.php

العقدة

للعقدة انتقل إلى مجلد VVVEBJS وركض

npm install express
node save.js

افتح http: // localhost: 8080/editor.html

يتم التوفير باستخدام Save.js

قالب الهبوط

لإجراء تغييرات على ملفات القالب أو الأقسام ، قم بتشغيل الأوامر التالية من المجلد demo/landing

تثبيت Gulp

npm i

إنشاء ملفات HTML

توجد قوالب html partials في مجلد demo/landing/src .

npm run gulp

راقب التغييرات للتطوير

npm run gulp watch

إنشاء قائمة أقسام لباني الصفحة

توجد ملفات HTML في مجلد demo/landing/src/sections مجمعة في المجلدات مع اسم مجموعة القسم.

npm run gulp sections

إنشاء قائمة الكتل

توجد ملفات HTML في مجلد demo/landing/src/blocks مجمعة في مجلدات مع اسم مجموعة الكتل.

npm run gulp blocks

إنشاء لقطات شاشة للأقسام

npm run gulp screenshots

الاستخدام

تهيئة مثال

<!-- bootstrap-->
< script src = "js/popper.min.js" > </ script >
< script src = "js/bootstrap.min.js" > < / script >

<!-- builder code-->
< script src = "libs/builder/builder.js" > </ script >	
<!-- undo manager-->
< script src = "libs/builder/undo.js" > </ script >	
<!-- inputs-->
< script src = "libs/builder/inputs.js" > </ script >	
<!-- components-->
< script src = "libs/builder/components-bootstrap5.js" > </ script >	
< script src = "libs/builder/components-widgets.js" > </ script >	

< script >
let pages = [
 {
	name : "narrow-jumbotron" , 
	title : "Jumbotron" , 
	url : "demo/narrow-jumbotron/index.html" , 
	file : "demo/narrow-jumbotron/index.html"
  } ,
  { name : "landing-page" , title : "Landing page" , url : "demo/landing/index.html" , file : "demo/landing/index.html" } ,
];
	

let firstPage = Object.keys(pages)[0];
Vvveb.Builder.init(pages[firstPage]["url"], function() {
	//load code after page is loaded here
} );

Vvveb.Gui.init();
Vvveb.FileManager.init();
Vvveb.SectionList.init();
Vvveb.Breadcrumb.init();

Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
Vvveb.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();

< script >