README

关于 Laravel Grapes
标准版本与专业版本的差异
安装步骤
用法
翻译
作者
许可证

关于 Laravel Grapes

Laravel Grapes 是一个为 Laravel 框架提供的库，它提供 CMS 拖放式页面构建器，支持所有 Laravel 功能，并帮助用户通过简单的点击更改所有前端和内容。

Laravel Grapes 将很快在 Code Canyon 上提供专业版本！

标准版本与专业版本的差异

安装步骤

composer require msa/laravel-grapes

php artisan vendor:publish --provider="MSA\LaravelGrapes\LaravelGrapesServiceProvider" --tag="*"

php artisan migrate

转到 config/lg.php

    <?php

    return [
        // routes configurations
        'builder_prefix' => 'hello', // prefix for builder

        'middleware' => null, // middleware for builder

        'frontend_prefix' => '', // prefix for frontend

        /* Define additional translation languages. */
        'languages' => [
            'ar',
            'es',
        ],
    ];`

1) builder_prefix

默认情况下，构建器带有路由 route('website.builder')，该路由由 your-domain.com/hello/front-end-builder 组成。
您可以将构建器前缀更改为 hi，这样构建器现在将使用路由前缀 hi 而不是 hello。

2) middleware

将任何中间件分配给构建器，例如 auth:admin。

3) frontend_prefix

前端前缀默认为空，这意味着任何生成的前端页面构建器都将直接与您创建的 slug 一起加载，因此如果您需要为生成的前端设置前缀，请将其更改为您想要的任何前缀。

现在 Laravel Grapes 已经启动。

导航到构建器路由 your-domain.com/builder_prefix/front-end-builder。

用法

控制面板由 3 个面板组成：

1. 选项面板

选项面板包含 11 个按钮：

视图组件
预览
全屏模式
查看代码
创建新页面
编辑代码
组件管理器
页面管理器
清除画布
保存组件
保存更改

视图组件

视图组件按钮显示画布中所有组件的网格线，这有助于单独选择每个组件，例如，请参考下面的截图。

预览

预览按钮可以帮助您显示没有面板的页面，如下面的截图所示。

全屏模式

全屏模式按钮隐藏所有浏览器工具并只显示构建器。

查看代码

查看代码按钮显示页面的 html 和 css 代码，如下面的截图所示。

创建新页面

创建新页面按钮位于顶部栏，当您按下它时，将打开一个包含新页面表单的弹出模态框，因此填写页面名称和 slug，如果需要页面成为主页，请输入 slug / .

提交表单后，将收到一个弹出通知，表示页面已成功创建，因此通过顶部栏上的选择页面输入选择新页面以开始修改页面。

不要忘记从 routes/web.php 中删除默认路由，因为它将与主页冲突，您不需要 web.php 用于前端路由，因为 Laravel Grapes 自带路由文件。

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

// Route::get('/', function () {
//     return view('welcome');
// });

编辑代码

编辑代码按钮将打开一个包含页面代码（包括 html 和 css）的弹出代码编辑器模态框。

您可以在代码编辑器弹窗中编辑HTML和CSS代码，编辑样式时，您将在<style></style>标签内找到页面样式。

注意：在代码编辑器中，HTML和CSS合并在一个页面中，但提交代码后，您可以通过查看代码来查看它们，您将发现样式和HTML各自分开，每个生成的页面都有自己的blade文件和CSS文件。

组件管理器

组件管理器按钮将打开一个弹窗，包含所有已保存的组件，以便在另一页面上重复使用。您可以编辑组件名称或删除它。

页面管理器

页面管理器按钮将打开一个弹窗，包含所有页面，让您编辑页面名称和别名。

清除画布

清除画布按钮将从画布中移除所有组件。

保存组件

Laravel Grapes 允许您保存任何自定义组件以便在其他页面上重复使用。您只需选择组件，然后点击保存组件按钮。

保存更改

保存更改按钮将更新页面内容，如果您检查页面别名，您会发现页面内容已经更改。

2. 页面面板

选项面板包括两个下拉输入框：

选择页面
选择设备

选择页面

选择页面输入框让您选择要修改的页面。

选择设备

选择设备输入框让您在不同屏幕尺寸上修改页面HTML和样式，以下为支持的尺寸：

桌面
超大
大
平板
中
横向手机
小
超小
纵向手机

3. 查看面板

查看面板包括4个按钮：

块管理器
图层管理器
组件设置
样式管理器

块管理器

块管理器内置Bootstrap组件：

布局包含：
- 导航栏
- 区域
- 容器
- 行
- 列
- 列断点
- 媒体对象
组件包含：
- 下拉菜单
- 菜单
- 菜单链接
- 警告
- 链接
- 标签页
- 标签页
- 徽章
- 卡片
- 卡片容器
- 折叠
- 下拉项
- 下拉按钮
字体样式包含：
- 标题
- 段落
- 分隔符
模板包含：
- 5个预设模板
保存包含：
- 所有您的保存的自定义组件

图层管理器

当与网页元素一起工作时，另一个可能有用的实用工具是图层管理器。它提供了结构节点的树状概览，并使您更容易管理。

组件设置

每个组件都自带设置，您可以修改它，例如，如果您从画布中选择链接元素并转到组件设置，您将找到以下内容：

链接href属性
目标属性
切换属性
显示Laravel认证用户电子邮件
Laravel认证用户选项，用于显示元素
Laravel认证守卫选项，用于显示元素。（默认是web）
id属性
title属性

样式管理器

样式管理器由区域组成，这些区域将不同的CSS属性分组在一起。因此，您可以添加一个维度区域用于宽度高度，另一个区域作为字体样式用于字体大小和颜色等。因此，如何组织区域取决于您。

类
- 状态（用于样式化悬停效果、点击等...）
- 添加类
- 移除类
通用
- 浮动选项
- 显示选项
- 定位选项
弹性选项
尺寸选项
字体样式选项
装饰选项
其他
- 过渡
- 透视
- 变换

4. 自定义构建器样式表

转到public/css/laravel-grapes.css并开始自定义Laravel Grapes构建器样式表，按您的意愿进行。

翻译

每个文本组件都有为您的语言定义的翻译输入属性，您可以在 config/lg.php 中找到，以下示例中您可以找到Ar Local和Es Local。

msa / laravel-grapes

维护者

详细信息