README

先决条件

必须安装Laravel Backpack

Laravel 7
PHP 7.4
GD或Imagick用于图像处理

安装

运行composer require clevyr/backpack-page-builder

这将安装页面构建器和https://github.com/Laravel-Backpack/PermissionManager包

这将安装Image Intervention http://image.intervention.io/getting_started/introduction

要安装页面构建器，请运行以下命令，这将安装权限管理器和页面构建器

运行php artisan pagebuilder:install

更新config -> backpack -> base.php文件

'guard' => 'backback',

到

'guard' => config('auth.defaults.guard'),

运行composer dump-autoload

种子权限

运行php artisan db:seed --class=PageBuilderSeeder

更新resources -> views -> vendor -> backpack -> base -> inc -> sidebar_content.blade.php文件

@canany(['View User List', 'View Role List', 'View Permission List'])
    <li class="nav-item nav-dropdown">
        <a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-users"></i> Authentication</a>

        <ul class="nav-dropdown-items">
            @can('View User List')
                <li class="nav-item"><a class="nav-link" href="{{ backpack_url('user') }}"><i class="nav-icon la la-user"></i> <span>Users</span></a></li>
            @endcan

            @can('View Role List')
            <li class="nav-item"><a class="nav-link" href="{{ backpack_url('role') }}"><i class="nav-icon la la-id-badge"></i> <span>Roles</span></a></li>
            @endcan

            @can('View Permission List')
                <li class="nav-item"><a class="nav-link" href="{{ backpack_url('permission') }}"><i class="nav-icon la la-key"></i> <span>Permissions</span></a></li>
            @endcan
        </ul>
    </li>
@endcanany

@can('View Page List')
    <li class="nav-item nav-dropdown">
        <a class="nav-link nav-dropdown-toggle" href="#">
            <i class="nav-icon la la-folder"></i>
            Pages
        </a>

        <ul class="nav-dropdown-items">
            <li class="nav-item">
                <a class="nav-link" href="{{ backpack_url('pages') }}">
                    <i class="nav-icon la la-address-book"></i>

                    <span>
                        Manage
                    </span>
                </a>
            </li>
        </ul>
    </li>
@endcan

更新app -> User.php

...
use Backpack\CRUD\app\Models\Traits\CrudTrait;
use Spatie\Permission\Traits\HasRoles;
...

class User extends Model {
    ...
    use CrudTrait;
    use HasRoles;
    ...
}

创建超级管理员

运行php artisan pagebuilder:user

运行时带参数

php artisan pagebuilder:user --name=Name --email=email@example.com --password=password

页面开发

同步页面

导航到pages -> manage

在右下角点击同步图标，这将加载静态页面（不是动态文件夹的每个文件夹）并重新加载页面

您还可以使用以下命令从命令行同步它们

php artisan pagebuilder:sync

编辑静态页面

导航到页面管理页面，并点击主页上的编辑

页面设置

名称：页面名称，仅管理员功能，不会影响页面的任何功能

标题：页面标题，同时生成slug

Slug：页面slug

视图：页面视图

页面内容

页面内容将填充为一系列部分及其可编辑的字段列表。

编辑动态页面

请参阅编辑静态页面，了解有关页面设置和页面内容的详细信息。

页面布局

注意 - 只有在处理动态页面时，您才能使用页面布局选项卡。

部分列表

将显示动态部分的列表，您可以通过点击它们将它们添加到内容部分。

内容部分

内容部分显示可以在页面上编辑的部分。

您必须先保存页面，才能编辑内容。

创建页面

页面位于 resources -> views -> pages，每个文件夹都被视为一个页面，文件夹内的内容决定了可用的视图/部分。

内容

部分 - 存储每个视图的单独部分。
config.php - 存储页面部分的配置。
index.blade.php - 是页面的视图。

注意 - 如果部分目录内没有 .blade 文件和 config.php 中的配置属性，页面部分将不会同步。

生成页面

要生成新页面，请运行以下命令 php artisan pagebuilder:page page，其中 page 为新页面的名称。

这将创建一个以页面名称命名的文件夹，其结构如下

page
- index.blade.php
- config.php
- sections
  - default.blade.php

部分

“sections”文件夹包含与 config.php 中的部分键对应的 .blade 文件。

在部分中使用数据

您可以使用 $sections 变量，它是一个匿名函数，它返回从“部分名称”和“字段标题”获取的字段数据。

<h1>
    {{-- default: section name, title: field name --}}
    {{ $sections('default', 'title') }}

    <br />

    <small>
        {{ $sections('default', 'sub-title') }}
    </small>
</h1>

{!! $sections('default', 'content') !!}

config.php

config.php 存储页面部分的配置。每个部分包含一个 backpack crud 字段列表 https://backpackforlaravel.com/docs/4.1/crud-fields 任何字段，包括自定义字段，都可以在配置中使用。

示例配置

<?php

return [
    'default' => [ // Section name, the blade file for the section's name must be the same as this key
        'is_dynamic' => true, // Defaults to false, if this is set it will be available to be used in dynamic pages
        'title' => [ // Field name
            'type' => 'text', // crud field type
            'name' => 'title', // crud field name
            'label' => 'Title' // crud field label
            // ... Any other crud field properties
        ],
        'sub-title' => [
            'type' => 'text',
            'name' => 'sub-title',
            'label' => 'Sub Title'
        ],
        'content' => [
            'type' => 'wysiwyg',
            'label' => 'Content',
            'name' => 'content',
        ],
    ],
];

index.blade.php

index.blade.php 是页面的视图文件，也是其部分的视图。

示例 index.blade.php

<div>
    @include('pages.homepage.sections.default')
</div>

开发

提交更改

在提交 PR 之前，请将您的更改推送到新分支。

设置本地包开发

在现有 Laravel Backpack 项目的根目录中，将此项目克隆到 ./packages/clevyr/backpack-page-builder
将以下内容添加到您的 composer.json 中

"repositories": [
    {
        "type": "path",
        "url": "./packages/clevyr/backpack-page-builder",
        "options": {
            "symlink": true
        }
    }
],

将 clevyr/backpack-page-builder 添加到您的 composer.json 中，如下所示

"require": {
...
"clevyr/backpack-page-builder": "dev-master",
...
}

运行composer require clevyr/backpack-page-builder

clevyr / backpack-page-builder

维护者

详细信息