VvvebJs
vvebJs 2.0.3
페이지 빌더 JavaScript 라이브러리를 드래그 앤 드롭합니다.
의존성이없는 바닐라 JS로 제작되거나 도구를 빌드하고 부트 스트랩 5
웹 사이트 | 문서 | 포럼 | 지저귀다
vvvebjs 페이지 빌더 확인 VVVEB CMS를 사용하는 전체 추천 오픈 소스 CMS.
데모 페이지 및 부트 스트랩 5 섹션 및 블록에는 vvveb 랜딩 페이지 템플릿을 사용합니다.
기본적으로 편집기에는 Bootstrap 5 및 Widgets 구성 요소가 제공되며 모든 종류의 구성 요소 및 입력으로 확장 할 수 있습니다.
# 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/vvvebjshttp : // localhost : 8080/editor.php 또는 http : // localhost : 8080/editor.html을 엽니 다
페이지 기능 저장에는 PHP 또는 노드가 필요합니다
Docker, XAMPP 또는 공유 호스팅 계정 PHP를 사용하는 경우 변경없이 작동해야합니다.
저장은 save.php를 사용하여 수행됩니다
노드의 경우 vvvebjs 폴더로 이동하여 실행하십시오
npm install express
node save.jshttp : // localhost : 8080/editor.html을 엽니 다
저장은 save.js를 사용하여 수행됩니다
템플릿 파일 또는 섹션을 변경하려면 demo/landing 폴더에서 다음 명령을 실행합니다.
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 템플릿 편집자 html
CSS의 경우 SCSS/editor.scss 및 scss/_builder.scss를 편집합니다
CSS에 SCS를 컴파일하려면 먼저 Gulp를 설치하십시오
npm i그런 다음 실행할 수 있습니다
npm run gulp또는 시계를 사용하여 파일 변경을 컴파일하십시오.
npm run gulp watch문서화는 위키를 확인하십시오
프로젝트가 마음에 들면 PayPal 기부금으로 지원하거나 Open Collective를 통해 후원자/스폰서가 될 수 있습니다.
아파치 2.0
