README

在页面上自由定位元素并编辑其内容。

截图

安装

1) 终端

$ composer require open-admin-ext/page-designer

$ php artisan admin:import page-designer

$ php artisan vendor:publish --tag=page-designer

$ php artisan migrate

2) 添加路由

在 App/Admin/routes.php 中添加管理路由

$router->resource('page-designer', PageDesignerController::class);
$router->resource('page-designer-images', PageDesignerImagesController::class);
$router->resource('page-designer-videos', PageDesignerVideoController::class);
$router->resource('page-designer-texts', PageDesignerTextController::class);
$router->resource('page-designer-inline-galleries', PageDesignerInlineGalleryController::class);
$router->resource('page-designer-embeds', PageDesignerEmbedController::class);

在 routes/web.php 中添加前端路由

use App\Http\Controllers\PageDesignerController;

Route::get('/page/{id}', [PageDesignerController::class, 'index'])->name('page-designer');

3) 检查

App\Controllers\PageDesignerController.php

现在在表单部分中可以看到。

$form->pagedesigner('data', __('pageDesign'));

对于前端

访问你的应用URL/page/{id} 看看它看起来如何，你可以通过更改 resources/views/page_designer.blade.php 来改变外观

选项

// set snap
$form->pagedesigner('data', __('pageDesign'))->snap(30);

向 PageDesigner 添加新元素

PageDesigner 会自动扫描 Admin/Controllers 目录，查看是否存在具有 PageDesignItem 特质的控制器。

你可以像平常一样生成 AdminController（提示：使用辅助插件），然后你可以添加以下代码。

假设你想要在创建控制器后添加一个引用项到 PageDesigner。将其更改为以下样子

use OpenAdmin\Admin\PageDesigner\Traits\PageDesignItem;

class PageDesignerQuoteController extends AdminController
{
    use PageDesignItem;

    public function __construct()
    {
        $this->initPageDesignItem();
    }

    public static function pageDesign()
    {
        return [
            'parent_field'=> 'page_id',
            'type'        => 'quote',
            'title'       => 'quote',
            'icon'        => 'icon-quote-right',
            'model'       => "\App\Models\PageDesignerQuote",
        ];
    }

    // this part renders the content part of the item
    // the rendering on the frond-end is seperate, but offcourse you can let them share styles
    public static function pageDesignScripts()
    {
        return <<<'JS'
            // use the type as writen above + 'SetContent'
            window.quoteSetContent = function(data,current_content){
                current_content.innerHTML = '<h2>Quote: '+data.quote+'</h2>';
            };
        JS;
    }

    ...

许可证

许可协议为 MIT许可证 (MIT)。