VvvebJs

vvvebjs

ページビルダーJavaScriptライブラリをドラッグアンドドロップします。
依存関係やビルドツールとブートストラップを伴わないバニラJSで構築

ウェブサイト|ドキュメント|フォーラム|ツイッター

ライブデモ

vvvebjsページビルダーを使用した完全な注目のオープンソースCMSをチェックするvvveb cms

デモページとブートストラップ5セクションとブロックにVVVEBランディングページテンプレートを使用します。

特徴

• コンポーネントとブロック/スニペットドラッグアンドドロップとページインサート。
• 取り消し/やり直し操作。
• 1つまたは2つのパネルインターフェイス。
• ファイルマネージャーおよびコンポーネント階層ナビゲーション。
• テンプレートとフォルダーオプションを備えた新しいページモーダルを追加します。
• CodeMirrorプラグイン構文の強調表示を備えたライブコードエディター。
• 例のphpスクリプトを含む画像アップロードが含まれています。
• ページのphpスクリプトが含まれているサンプルのphpスクリプトを使用して、htmlをダウンロードまたはエクスポートするか、サーバー上にページを保存します。
• コンポーネント/セクション/ブロックリスト検索。
• ブートストラップ5コンポーネント。
• 統合されたCC0画像検索とサーバーのアップロードサポートを備えたメディアギャラリー。
• 画像、ビデオ、およびIFrame要素のサイズ変更ハンドル。
• より容易な親要素の選択のための要素ブレッドクランプ選択。
• 完全なGoogleフォントリストフォント選択のサポート。
• YouTube、Google Maps、charts.jsなどのウィジェット。
• ビルドインテキストエディターを置き換えるオプションのckeditorプラグイン。
• zipダウンロードプラグインをダウンロードして、ページとすべてのアセットをzipファイルとしてダウンロードします。
• 何百もの無料アイコンがバンドルされたSVGアイコンコンポーネント。
• ページ要素のスクロールサポートでアニメーション化します。
• テーマグローバルタイポグラフィとカラーパレットエディター。

デフォルトでは、エディターにはブートストラップ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やOpen http://localhost/editor.htmlなどのWebサーバーを使用する必要があります。

画像のアップロードまたはページ保存機能を使用するには、PHPをインストールする必要があります。

Docker

ローカル開発

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パーティシャルは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 >

エディターのHTMLおよびコンポーネント/入力JavaScriptテンプレート編集editor.html

CSSの変更の場合、edit scss/editor.scssおよびscss/_builder.scssを変更します

SCSS

SCSSをCSSにコンパイルするには、最初にGULPをインストールします

npm i

その後、実行できます

npm run gulp

または、Watchを使用してファイルの変更をコンパイルします。

npm run gulp watch

ドキュメント

ドキュメントについては、wikiを確認してください

サポート

プロジェクトが好きなら、PayPalの寄付でサポートするか、Open Collective経由で支援者/スポンサーになることができます

ライセンス

Apache 2.0