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'));

对于前端

访问您的应用网址/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)。