VvvebJs
vvebJs 2.0.3
Drag & Drop Page Builder JavaScript Library.
Gebaut mit Vanille -JS ohne Abhängigkeiten oder Build -Werkzeuge und Bootstrap 5
Website | Dokumentation | Forum | Twitter
Für ein voll ausgestellter Open -Source -CMS mit VVVVEBJS -Seite Builder überprüfen Sie VVVEB CMS
Verwenden der VVVEB -Landing -Page -Vorlage für Demo -Seite und Bootstrap 5 Abschnitte und Blöcke.
Standardmäßig wird der Editor mit Bootstrap 5- und Widget -Komponenten ausgestattet und kann mit allen Art von Komponenten und Eingängen erweitert werden.
# 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 Klonen Sie das Repository oder laden Sie eine Version herunter, dann öffnen Sie editor.html
Aufgrund der Browser -Iframe -Sicherheit müssen Sie einen Webserver wie Apache/Xampp verwenden und http://localhost/editor.html öffnen
Um das Bild -Upload oder die Funktion "Bild -Speicher speichern" zu verwenden, müssen Sie PHP installieren.
Aus Vvvebjs Ordnerlauf
docker-compose upOder Bild ausführen
docker run -p 8080:80 vvveb/vvvebjsÖffnen Sie http: // localhost: 8080/editor.php oder http: // localhost: 8080/editor.html
Die Seitenfunktion speichern erfordert entweder PHP oder Knoten
Wenn Sie Docker, XAMPP oder ein freigegebenes Hosting -Konto PHP verwenden, sollte PHP ohne Änderung funktionieren.
Das Speichern erfolgt mit Save.php
Für den Knoten gehen Sie zum Ordner VVVEBJS und laufen Sie aus
npm install express
node save.jsÖffnen Sie http: // localhost: 8080/editor.html
Das Speichern erfolgt mit Save.js
Um Änderungen an Vorlagendateien oder -abschnitten vorzunehmen, führen Sie die folgenden Befehle aus demo/landing -Ordner aus
npm i Template HTML -Partials befinden sich im Ordner demo/landing/src .
npm run gulpnpm run gulp watch Die HTML -Dateien der Abschnitte befinden sich im Ordner demo/landing/src/sections in Ordnern mit dem Abschnittsgruppennamen.
npm run gulp sections Blocks HTML -Dateien befinden sich im Ordner demo/landing/src/blocks in Ordnern mit dem Gruppennamen der Blöcke gruppiert ist.
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 >Für Editor HTML und Komponenten/Eingabe -JavaScript -Vorlagen Editor.html
Für CSS -Änderungen bearbeiten scss/editor.scss und scss/_builder.scss
Um SCSS zu CSS zu kompilieren, installieren Sie zuerst Gulp
npm iDann kannst du rennen
npm run gulpOder verwenden Sie Watch, um in der Dateiänderung zu kompilieren.
npm run gulp watchZur Dokumentation überprüfen Sie das Wiki
Wenn Ihnen das Projekt gefällt, können Sie es mit einer PayPal -Spende unterstützen oder über Open Collective Unterstützer/Sponsor werden
Apache 2.0
