Laravel Nova 灵活内容与重复字段教程

Laravel Nova 灵活内容与重复字段教程

nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova 项目地址: https://gitcode.com/gh_mirrors/no/nova-flexible-content

1. 项目介绍

nova-flexible-content 是一个为 Laravel Nova 开发的开源项目，旨在提供灵活的内容和重复字段功能。该项目允许用户轻松管理可重复和可排序的字段组，适用于需要动态内容管理的场景。与现有的解决方案不同，nova-flexible-content 没有对字段类型的限制，用户可以使用所有 Laravel Nova 字段类型以及社区提供的字段。

2. 项目快速启动

安装

首先，通过 Composer 安装 nova-flexible-content：

composer require whitecube/nova-flexible-content

使用

在 Laravel Nova 资源中使用 Flexible 字段。以下是一个简单的示例：

use Whitecube\NovaFlexibleContent\Flexible;
use Laravel\Nova\Fields\Text;
use Laravel\Nova\Fields\Markdown;
use Laravel\Nova\Fields\Image;

public function fields(Request $request)
{
    return [
        Flexible::make('Content')
            ->addLayout('简单内容部分', 'wysiwyg', [
                Text::make('标题'),
                Markdown::make('内容')
            ])
            ->addLayout('视频部分', 'video', [
                Text::make('标题'),
                Image::make('视频缩略图', 'thumbnail'),
                Text::make('视频ID (YouTube)', 'video'),
                Text::make('视频字幕', 'caption')
            ])
    ];
}

自定义按钮标签

你可以自定义“添加布局”按钮的文本：

Flexible::make('Content')
    ->button('添加一些惊人的内容')

在视图中使用灵活内容

如果你使用的是 Laravel 7 及以上版本，可以使用自定义的 FlexibleCast 类来解析 JSON 字符串：

namespace App;

use Illuminate\Database\Eloquent\Model;
use Whitecube\NovaFlexibleContent\Value\FlexibleCast;

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

3. 应用案例和最佳实践

应用案例

• 动态内容管理：适用于需要动态添加和排序内容块的场景，如博客文章、产品描述等。
• 多语言支持：通过灵活的字段组，可以轻松管理多语言内容。

最佳实践

• 布局复用：将常用的布局提取到单独的类中，以便在多个 Flexible 字段中复用。
• 自定义解析器：根据项目需求，创建自定义的解析器类，以实现更复杂的数据存储和检索逻辑。

4. 典型生态项目

• nova-page：一个 Nova 工具，允许编辑静态页面，如“关于”页面。nova-flexible-content 可以与 nova-page 无缝集成，提供更灵活的页面内容管理。
• nova-translations-loader：用于管理多语言内容的 Nova 扩展，结合 nova-flexible-content 可以实现强大的多语言支持。

通过以上步骤，你可以快速上手并充分利用 nova-flexible-content 提供的灵活内容管理功能。

nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova 项目地址: https://gitcode.com/gh_mirrors/no/nova-flexible-content