VvvebJs
vvebJs 2.0.3
Перетащите библиотеку JavaScript Builder Builder.
Построен с ванилью J
Веб -сайт | Документация | Форум | Twitter
Для получения полной фиксации CMS с открытым исходным кодом с использованием Builder страницы VVVEBJS Проверка VVVEB CMS
Использование шаблона целевой страницы VVVEB для демо -страницы и начальной загрузки 5 разделов и блоков.
По умолчанию редактор поставляется с компонентами Bootstrap 5 и виджетов и может быть расширен с помощью любых компонентов и входов.
# git 2.13+
git clone --recurse-submodules https://github.com/givanz/VvvebJs
# older git versions
git clone --recursive https://github.com/givanz/VvvebJsgit 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, либо узел
Если вы используете Docker, XAMPP или PHP общего хостинга должны работать без каких -либо изменений.
Сохранение выполняется с помощью save.php
Для узла перейти в папку vvvebjs и запустить
npm install express
node save.jsОткройте http: // localhost: 8080/editor.html
Сохранение выполняется с помощью save.js
Чтобы внести изменения в файлы шаблонов или разделов. Запустите следующие команды из demo/landing Polder
npm i Шаблон HTML -частичные расположены в папке demo/landing/src .
npm run gulpnpm run gulp watch Разделители HTML -файлы расположены в папках demo/landing/src/sections сгруппированных в папки с именем группы разделов.
npm run gulp sections Блоки HTML -файлы расположены в папке demo/landing/src/blocks сгруппированных в папки с именем группы блоков.
npm run gulp blocksnpm 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 >Для редактора HTML и компонентов/входных шаблонов JavaScript Editor Editor.html
Для изменений CSS Редактировать scss/editor.scss и scss/_builder.scss
Для компиляции SCSS в CSS впервые установите Gulp
npm iТогда вы можете бежать
npm run gulpИли используйте СМОТРЕТЬ, чтобы компилировать при изменении файла.
npm run gulp watchДля документации проверьте вики
Если вам нравится проект, вы можете поддержать его с помощью пожертвования PayPal или стать поддержкой/спонсором через открытый коллектив
Apache 2.0
