README

一个简单且完整的 Laravel Nova 灵活字段，非常适合重复和灵活字段组。

快速开始

以下是一个非常简化的指南，以帮助您尽快开始。
请参阅完整文档： https://whitecube.github.io/nova-flexible-content

安装

composer require whitecube/nova-flexible-content

使用

灵活字段允许轻松管理可重复和可排序的字段组。与 Laravel Nova 存在的少数解决方案相比，此解决方案在这些组内允许使用的字段没有约束。这意味着您可以使用所有 Laravel Nova 字段类型，还可以使用任何社区制作的字段。

添加布局

布局代表可以在灵活字段内部重复的一组字段。您可以添加任意数量的不同布局。如果只定义了一个布局，则字段将表现得像简单的重复字段，通过添加更多布局，您将获得灵活内容。这两个概念都与 Wordpress ACF 插件的堂兄 类似。

您可以使用以下方法在您的灵活字段中添加布局

 addLayout(string $title, string $name, array $fields)

使用 $name 参数将选择的布局存储在字段的值中。请明智地选择它，您可能将其用于在应用程序中识别布局。

use Whitecube\NovaFlexibleContent\Flexible;

/**
 * Get the fields displayed by the resource.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function fields(Request $request)
{
    return [
        // ...

        Flexible::make('Content')
            ->addLayout('Simple content section', 'wysiwyg', [
                Text::make('Title'),
                Markdown::make('Content')
            ])
            ->addLayout('Video section', 'video', [
                Text::make('Title'),
                Image::make('Video Thumbnail', 'thumbnail'),
                Text::make('Video ID (YouTube)', 'video'),
                Text::make('Video Caption', 'caption')
            ])
    ];
}

自定义按钮标签

您可以通过以下方式更改默认的“添加布局”按钮文本

Flexible::make('Content')
    ->button('Add something amazing!');

在视图中使用灵活值

该字段将其值存储为单个 JSON 字符串，这意味着在您的应用程序中使用之前需要解析此字符串。当然，您可以在模型中将属性强制转换为集合，但最终您将得到复杂的 stdClass 对象，这使得与布局的属性交互变得更加困难。

通过在您的模型上实现 HasFlexible 特性，您可以调用 flexible($attribute) 方法，该方法将自动将属性值转换为完全解析的 Whitecube\NovaFlexibleContent\Layouts\Collection。请随时在您的 blade 视图中直接调用此 flexible() 调用，或将它提取到属性的自定义器方法中，如下所示

namespace App;

use Illuminate\Database\Eloquent\Model;
use Whitecube\NovaFlexibleContent\Concerns\HasFlexible;

class MyModel extends Model
{
    use HasFlexible;

    public function getFlexibleContentAttribute()
    {
        return $this->flexible('flexible-content');
    }
}

默认情况下，HasFlexible 特性将收集基本的 Layout 实例。如果您想将布局映射到 自定义 Layout 实例，也可以指定映射规则，如下所示

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

每个 Layout（或扩展基本 Layout 的自定义布局）都已经实现了 HasFlexible 特性，这意味着您可以直接使用 $layout->flexible('my-sub-layout') 方法解析嵌套灵活内容值。

布局集合

HasFlexible 特性返回的集合扩展了原始的 Illuminate\Support\Collection。这些自定义布局集合公开了一个 find(string $name) 方法，该方法返回第一个具有给定布局 $name 的布局。

布局实例

布局是一种 虚拟模型。它们使用 Laravel 的 HasAttributes 特性，这意味着您可以定义布局属性的访问器和修改器。此外，还可以通过以下方法访问 Layout 的属性：

name()

返回布局的名称。

title()

返回布局的标题（如 Nova 所示）。

key()

返回布局的唯一键（布局的唯一标识符）。

深入探讨

当使用可伸缩内容字段时，您很快会遇到一些基本描述不足以解决的问题。这就是我们以可扩展的方式开发这个包的原因，这使得您能够轻松地向字段及其输出添加自定义行为和/或功能。

自定义布局类

有时，addLayout 定义可能相当长，或者您可能希望它们与其他 Flexible 字段共享。答案是提取您的布局到它自己的类中。有关更多信息，请参阅文档。

预定义预设类

除了可重用的布局类之外，您还可以为您的可伸缩字段创建 Preset 类。这允许您在任何需要的地方重复使用整个可伸缩字段。这还使得使您的可伸缩字段更具动态性变得更容易，例如，如果您想有条件地添加布局。最重要的是，如果您的可伸缩字段有许多 addLayout 定义，它们还有助于清理您的 Nova 资源类。有关更多信息，请参阅文档。

自定义解析器类

默认情况下，该字段利用模型表上的 JSON 列。在某些情况下，您可能真的想使用此字段，但由于某些原因，JSON 属性并不是一个好的选择。例如，您可能希望将值存储在另一个表中（这意味着您将使用可伸缩内容字段而不是传统的 BelongsToMany 或 HasMany 字段）。不用担心，我们已经为您准备好了！

通过创建自己的解析器类来告诉字段如何存储和检索其内容，该类基本上只包含两个简单的方法：get 和 set。有关更多信息，请参阅文档。

与 nova-page 一起使用

也许你听说过我们其他的包之一，nova-page，这是一个允许你编辑静态页面，如“关于”页面（或类似页面）而不必为它单独声明模型的Nova工具。通常情况下，灵活内容字段非常有用。别担心，这两个包可以很好地一起工作！首先，创建一个nova页面模板，并在模板的字段中添加一个灵活内容。

如文档中所述，你可以使用{{ Page::get('attribute') }}在你的blade视图中访问nova-page的静态内容。当你这样请求灵活内容时，它返回一个描述灵活内容的原始JSON字符串，这当然不是很实用。相反，你可以在你的页面模板上简单地实现Whitecube\NovaFlexibleContent\Concerns\HasFlexible特质，这将暴露Page::flexible('attribute')门面方法，并处理灵活内容的转换。

namespace App\Nova\Templates;

// ...
use App\Nova\Templates\Concerns\HasFlexible;

class Home extends Template
{
    use HasFlexible;

    // ...
}

贡献

请随意提出更改建议，要求新功能或自己修复错误。我们相信还有很多可以改进的地方，我们非常乐意合并有用的pull请求。

谢谢！

用❤️为开源制作

在Whitecube，我们使用大量的开源软件作为我们日常工作的组成部分。所以，当我们有机会回馈的时候，我们非常兴奋！

我们希望你会喜欢我们的小小贡献，并且如果你在项目中发现它很有用，我们非常愿意听到你的反馈。关注我们的Twitter以获取更多更新！