Laravel Nova Flexible Content 扩展包深度解析与使用指南

陶真蔷Scott

于 2025-06-16 09:09:41 发布

阅读量336

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00895/article/details/148683356

Laravel Nova Flexible Content 扩展包深度解析与使用指南

nfb PIC12f675 programming using MPLAB X and XC8 compiler 项目地址: https://gitcode.com/gh_mirrors/nf/nfb

什么是 Laravel Nova Flexible Content

Laravel Nova Flexible Content 是一个功能强大的 Laravel Nova 扩展包，它为开发者提供了灵活可重复的字段组管理功能。这个扩展包允许您在 Nova 后台创建复杂的、可重复使用的字段组合，非常适合构建内容管理系统中的模块化内容区块。

核心功能特点

完全兼容所有 Nova 字段类型：不同于其他类似解决方案，这个包不限制您在字段组中使用哪些字段类型
支持多种布局类型：可以创建不同类型的布局，每个布局包含不同的字段组合
直观的拖拽排序：用户可以通过拖拽轻松调整字段组的顺序
高度可定制：从按钮标签到布局限制，几乎所有元素都可以自定义

安装与基础使用

安装步骤

通过 Composer 安装包：

composer require whitecube/nova-flexible-content

基本配置示例

在 Nova 资源文件中使用 Flexible 字段：

use Whitecube\NovaFlexibleContent\Flexible;

public function fields(Request $request)
{
    return [
        Flexible::make('内容区块', 'content')
            ->addLayout('文本区块', 'wysiwyg', [
                Text::make('标题', 'title'),
                Markdown::make('内容', 'content')
            ])
            ->addLayout('视频区块', 'video', [
                Text::make('标题', 'title'),
                Image::make('视频缩略图', 'thumbnail'),
                Text::make('视频ID(YouTube)', 'video'),
                Text::make('视频说明', 'caption')
            ])
    ];
}

高级配置选项

界面自定义

修改按钮文字：

Flexible::make('内容区块')
    ->button('添加新内容区块');

全宽度显示：

Flexible::make('内容区块')
    ->fullWidth();

布局数量限制：

Flexible::make('内容区块')
    ->limit(5);  // 最多添加5个区块

删除确认对话框：

Flexible::make('内容区块')
    ->confirmRemove('确认删除吗？', '删除', '取消');

布局选择菜单定制

// 使用搜索菜单
Flexible::make('内容区块')
    ->menu('flexible-search-menu', [
        'selectLabel' => '按回车选择',
        'label' => 'title',
        'openDirection' => 'bottom'
    ]);

数据存储与检索

模型中使用 FlexibleCast

use Whitecube\NovaFlexibleContent\Value\FlexibleCast;

class Post extends Model
{
    protected $casts = [
        'content' => FlexibleCast::class
    ];
}

自定义 Cast 类

创建自定义 Cast 类来映射布局：

php artisan flexible:cast MyFlexibleCast

然后在模型中指定自定义 Cast：

protected $casts = [
    'content' => \App\Casts\MyFlexibleCast::class
];

使用 HasFlexible Trait

use Whitecube\NovaFlexibleContent\Concerns\HasFlexible;

class Post extends Model
{
    use HasFlexible;

    public function getContentAttribute()
    {
        return $this->flexible('content', [
            'wysiwyg' => \App\Nova\Flexible\Layouts\WysiwygLayout::class,
            'video' => \App\Nova\Flexible\Layouts\VideoLayout::class
        ]);
    }
}

自定义布局类

当布局变得复杂时，可以创建专门的布局类：

php artisan flexible:layout WysiwygLayout wysiwyg

生成的布局类示例：

namespace App\Nova\Flexible\Layouts;

use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Markdown;
use Whitecube\NovaFlexibleContent\Layouts\Layout;

class WysiwygLayout extends Layout
{
    protected $name = 'wysiwyg';
    protected $title = '文本区块';
    protected $limit = 3;  // 限制此类型最多添加3个

    public function fields()
    {
        return [
            Text::make('标题', 'title'),
            Markdown::make('内容', 'content')
        ];
    }
}

预设类使用

创建预设类来复用完整的 Flexible 字段配置：

php artisan flexible:preset PageContentPreset

使用示例：

namespace App\Nova\Flexible\Presets;

use Whitecube\NovaFlexibleContent\Flexible;
use Whitecube\NovaFlexibleContent\Layouts\Preset;

class PageContentPreset extends Preset
{
    public function handle(Flexible $field)
    {
        $field->button('添加内容区块')
            ->addLayout(\App\Nova\Flexible\Layouts\WysiwygLayout::class)
            ->addLayout(\App\Nova\Flexible\Layouts\VideoLayout::class);
    }
}

在资源中使用：

Flexible::make('内容')
    ->preset(\App\Nova\Flexible\Presets\PageContentPreset::class);

自定义解析器

当默认的 JSON 存储方式不满足需求时，可以创建自定义解析器：

php artisan flexible:resolver BlocksResolver

实现示例：

namespace App\Nova\Flexible\Resolvers;

use Whitecube\NovaFlexibleContent\Value\ResolverInterface;

class BlocksResolver implements ResolverInterface
{
    public function get($resource, $attribute, $layouts)
    {
        return $resource->blocks()
            ->orderBy('order')
            ->get()
            ->map(function($block) use ($layouts) {
                $layout = $layouts->find($block->type);
                return $layout->duplicateAndHydrate($block->id, $block->data);
            });
    }

    public function set($model, $attribute, $groups)
    {
        $model::saved(function($model) use ($groups) {
            $model->blocks()->delete();
            $groups->each(function($group, $index) use ($model) {
                $model->blocks()->create([
                    'type' => $group->name(),
                    'data' => $group->getAttributes(),
                    'order' => $index
                ]);
            });
        });
    }
}

与 Advanced Nova Media Library 集成

集成媒体库字段需要额外配置：

模型需实现 Spatie\MediaLibrary\HasMedia 接口
自定义布局类需使用 HasMediaLibrary trait

示例：

use Spatie\MediaLibrary\HasMedia;
use Whitecube\NovaFlexibleContent\Layouts\Layout;
use Whitecube\NovaFlexibleContent\Concerns\HasMediaLibrary;

class GalleryLayout extends Layout implements HasMedia
{
    use HasMediaLibrary;

    public function fields()
    {
        return [
            \Ebess\AdvancedNovaMediaLibrary\Fields\Images::make('图片集', 'gallery')
        ];
    }
}