vadim-goncharik/nova-flexible-content

Laravel Nova的灵活内容 & 重复字段。

dev-master 2023-03-03 12:22 UTC

This package is auto-updated.

Last update: 2024-09-27 14:39:31 UTC


README

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

Laravel Nova Flexible Content in action

快速开始

以下是一个非常简化的指南,帮助您尽快开始。请参阅完整文档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')
            ])
    ];
}

Example of Flexible layouts

自定义按钮标签

您可以像这样更改默认的“添加布局”按钮文本

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

Add something amazing

在视图中使用灵活值

如果您正在使用Laravel 6及以下版本,或者不想使用类型转换,请在您的模型上使用具有HasFlexible特质的访问器使用一个具有HasFlexible特质的访问器

Laravel 7引入了自定义类型转换,灵活内容字段是它们的完美用例。该字段将值存储为单个JSON字符串,这意味着在您的应用程序中使用之前需要解析该字符串。这可以通过使用此包中的FlexibleCast类来完成

namespace App;

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

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

默认情况下,FlexibleCast类将收集基本的Layout实例。如果您想将布局映射到自定义布局实例,这也是可能的。首先,通过运行php artisan flexible:cast MyFlexibleCast创建一个自定义灵活类型转换。这将创建位于App\Casts目录中的文件。

然后轻松地将您的自定义布局类映射到适当的键

namespace App\Casts;

class MyFlexibleCast extends FlexibleCast
{
    protected $layouts = [
        'wysiwyg' => \App\Nova\Flexible\Layouts\WysiwygLayout::class,
        'video' => \App\Nova\Flexible\Layouts\VideoLayout::class,
    ]
}

如果您需要更多控制,您可以通过重写getLayoutMappings方法来代替。

布局集合

由FlexibleCast类型转换和HasFlexible特质返回的集合扩展了原始的Illuminate\Support\Collection。这些自定义布局集合公开了一个find(string $name)方法,它返回第一个具有给定布局名称的布局。

布局实例

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

name()

返回布局的名称。

title()

返回布局的标题(如Nova中所示)。

key()

返回布局的唯一键(布局的唯一标识符)。

进一步了解

当使用灵活内容字段时,您很快就会遇到一些基本描述不够用的情况。这就是我们以可扩展的方式开发包的原因,使得您能够轻松地向字段及其输出添加自定义行为和能力。

自定义布局类

有时,addLayout定义可能相当长,或者您可能希望它们与其他Flexible字段共享。解决这个问题的方法是将您的布局提取到自己的类中。有关更多信息,请参阅文档

预定义预设类

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

自定义解析器类

默认情况下,该字段利用了模型表上的JSON列。在某些情况下,您可能真的想使用这个字段,但由于某种原因,JSON属性根本不是办法。例如,您可能想将值存储在另一个表中(这意味着您将使用灵活内容字段而不是传统的BelongsToMany或HasMany字段)。别担心,我们已经为您准备好了!

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

与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 Whitecube\NovaFlexibleContent\Concerns\HasFlexible;

class Home extends Template
{
    use HasFlexible;

    // ...
}

💖 赞助

如果您在生产应用程序中依赖此软件包,请考虑赞助我们!这是帮助我们继续做我们热爱的事情:制作优秀的开源软件的最佳方式。

贡献

请随意提出更改建议,要求添加新功能或自行修复错误。我们确信还有很多改进的空间,我们非常乐意合并有价值的拉取请求。

谢谢!

单元测试

在添加新功能或修复错误时,请添加相应的单元测试。当前测试集有限,但添加的每个单元测试都将提高软件包的质量。

通过调用composer test运行PHPUnit。

用❤️为开源打造

在Whitecube,我们每天的工作中都大量使用开源软件。因此,当我们有机会回馈的时候,我们非常激动!

我们希望您能喜欢我们从我们这里的小小贡献,如果您在项目中发现它很有用,我们非常愿意收到您的反馈。关注我们的Twitter获取更多更新!