README

Laravel 5 布局管理器

需要配合 form-builder 扩展使用。

{
    // ...
    'menu' => \Distilleries\Expendable\Config\MenuConfig::menu([
        'left'  => [
                [
                    'icon'    => 'blackboard',
                    'action'  => '\Distilleries\LayoutManager\Http\Controllers\Admin\TemplateController@getIndex',
                    'libelle' => 'menu.templates',
                    'submenu' => [
                        [
                            'icon'    => 'th-list',
                            'libelle' => 'menu.list',
                            'action'  => '\Distilleries\LayoutManager\Http\Controllers\Admin\TemplateController@getIndex',
                        ],
                        [
                            'icon'    => 'pencil',
                            'libelle' => 'menu.add',
                            'action'  => '\Distilleries\LayoutManager\Http\Controllers\Admin\TemplateController@getEdit',
                        ],
                    ]
                ],
        ]
}

在 config/form-builder.php 中添加模板字段类型

    [
        // ...
        'template'           => 'layout-manager::form.template',
        'custom_fields' => [
            // ...
            'template'         => 'Distilleries\LayoutManager\FormBuilder\Fields\Template',
        ],
    ]

导出配置

php artisan vendor:publish --provider="Distilleries\LayoutManager\LayoutManagerServiceProvider"

导出视图

php artisan vendor:publish --provider="Distilleries\FormBuilder\FormBuilderServiceProvider"  --tag="views"

##基本用法

###1. 配置

要在您的模型中启用布局管理器，首先需要更新模型。它应该实现 TemplatableContract 并使用 TemplatableTrait

class Project extends Distilleries\Expendable\Models\BaseModel implements TemplatableContract
{
    use TemplatableTrait;

    // ...
}

现在您可以在表单中使用 templatable

class ProjectForm extends Distilleries\FormBuilder\FormValidator
{
    // ...
    public function buildForm()
    {
    // ...
        $this->add('templatable', 'form', [
             'label' => trans('layout-manager::form.templatable'),
             'icon'  => 'link',
             'class' => FormBuilder::create('Distilleries\LayoutManager\Forms\TemplatableForm', [
                 'model' => $this->model,
             ]),
        ]);
    }
    // ...
}

用户现在可以基于您自己的模板创建/排序/编辑/删除内容。

###2. 创建模板

您可以在后台办公室的相关表单中创建自己的模板。以下是组成独特模板的每个字段的说明

##模板样式

当使用 LayoutManager 时，重用您的前端样式是一种良好的做法。这将允许您的贡献者像在前端一样编辑内容。为此，在前端的 sass 文件夹中创建一个 文件夹。为每个模板创建一个唯一的 .sass 文件，并在每个前端和后端的 application.scss 中导入此文件。此模板需要独立且在 "独立"（即与容器无关）的情况下工作。

这样，您的样式将在后台办公室以及您的前端上显示。

##选项

###1. 分类

当根据您自己的模板向模型添加内容时，您可能需要对其进行分类。例如，您可能需要在选项卡中显示您的内容。每个选项卡都可以在 LayoutManager 中定义为分类。

为此，您可以在模型表单类中传递一个分类数组

class ProjectForm extends Distilleries\FormBuilder\FormValidator
{
    // ...
    public function buildForm()
    {
    // ...
        $this->add('templatable', 'form', [
             'label' => trans('layout-manager::form.templatable'),
             'icon'  => 'link',
             'class' => FormBuilder::create('Distilleries\LayoutManager\Forms\TemplatableForm', [
                 'model' => $this->model,
                 'categories' => [
                     'summary' => 'Summary of the project',
                     'authors' => 'Authors and credits',
                 ]
             ]),
        ]);
    }
    // ...
}

categories 键是存储在数据库中以匹配分类的唯一字符串，而 categories 的值是在后台办公室中显示给贡献者的文本。

###2. 过滤模板

默认情况下，显示贡献者可以添加的所有模板的下拉列表。您可以通过在模型表单类中传递您自己选择的模板数组来预先过滤此列表，以仅允许预定义的模板。

class ProjectForm extends Distilleries\FormBuilder\FormValidator
{
    // ...
    public function buildForm()
    {
    // ...
        $this->add('templatable', 'form', [
             'label' => trans('layout-manager::form.templatable'),
             'icon'  => 'link',
             'class' => FormBuilder::create('Distilleries\LayoutManager\Forms\TemplatableForm', [
                 'model' => $this->model,
                 'templates' => Template::whereIn('css_class', ['bo-banner-image', 'bo-underlined-header'])->get()
             ]),
        ]);
    }
    // ...
}

上面的示例将允许贡献者仅添加具有 CSS 类 bo-banner-image 和 bo-underlined-header 的模板。

###3. 自定义标签

您的前端可能使用自定义 HTML 标签（使用 VueJS 或 AngularJS）。LayoutManager 可以解析这些自定义标签并要求贡献者填写一些数据。例如，您可以有您自己的 video-player HTML 标签，该标签可能需要一个 YouTube ID，如下所示

<video-player youtube-id="XXXXXX"></video-player>

您可以配置LayoutManager以解析这些标签，并要求贡献者自行填写youtube-id属性。您只需要在模型表单中列出所有自定义标签及其需要贡献者输入的相关属性。

class ProjectForm extends Distilleries\FormBuilder\FormValidator
{
    // ...
    public function buildForm()
    {
    // ...
        $this->add('templatable', 'form', [
             'label' => trans('layout-manager::form.templatable'),
             'icon'  => 'link',
             'class' => FormBuilder::create('Distilleries\LayoutManager\Forms\TemplatableForm', [
                 'model' => $this->model,
                 'custom-tags' => [
                     'video-player' => [
                         'youtube_id',
                     ],
                 ]
             ]),
        ]);
    }
    // ...
}

这样，每个视频播放器的属性在后台管理中都可以点击，会弹出一个模态框，提示用户填写youtube_id。属性标签的翻译使用trans(forms.template.youtube_id)。

###4. 禁用添加和排序

如果您希望贡献者编辑预定义数量的模板，并且不想让他们能够添加、复制或重新排序模板，可以使用disableAdd选项。它可以设置为true，或者为一个只禁用列表中类别（键）的数组。

class ProjectForm extends Distilleries\FormBuilder\FormValidator
{
    // ...
    public function buildForm()
    {
    // ...
        $this->add('templatable', 'form', [
             'label' => trans('layout-manager::form.templatable'),
             'icon'  => 'link',
             'class' => FormBuilder::create('Distilleries\LayoutManager\Forms\TemplatableForm', [
                 'model' => $this->model,
                 'disableAdd' => ['summary'],
                 'categories' => [
                     'summary' => 'Summary of the project',
                     'authors' => 'Authors and credits',
                 ]
             ]),
        ]);
    }
    // ...
}

此配置将仅禁用'摘要'类别下模板的添加/复制/排序功能。

###5. 特殊类

图片

如果您定义了一个具有CSS类template-image的<div>（或您想要的任何标签），LayoutManager会识别它并将其渲染为可点击的容器。MoxiManager将在点击时打开，允许贡献者选择一个将显示在标签的background-url样式的图片。

##故障排除

@TODO：处理错误，并在模板错误发生时防止模型表单提交。

distilleries / layout-manager

维护者

详细信息

README

Laravel 5 布局管理器

目录

图片