README

要求

• PHP >= 7.4
• Laravel 框架 >= 8.
• Nova >= 2.0
• Imagick PHP 扩展或 GD 库（用于 Intervention Image）

注意：以下说明适用于 Laravel >= 8。如果您使用的是旧版本，请参阅旧版本文档。

安装

composer require novius/laravel-nova-visual-composer

接下来，配置 Intervention Image 包

Intervention Image 配置说明

配置

一些可以覆盖的选项可用。

php artisan vendor:publish --provider="Novius\NovaVisualComposer\NovaVisualComposerServiceProvider" --tag="config"

JS 配置

一些选项（如 wysiwyg 配置）可以通过 JS 配置文件进行配置。

您可以使用以下方式来覆盖它

php artisan vendor:publish --provider="Novius\NovaVisualComposer\NovaVisualComposerServiceProvider" --tag="js"

清除临时上传文件

在您的 app/Console/Kernel.php 文件中，您应该注册一个每日任务来清除任何过期的文件

protected function schedule(Schedule $schedule)
{
    $schedule->command('nova-visual-composer:purge-tmp-files')
        ->daily();
}

默认情况下，临时文件在 24 小时后被视为过期。您可以通过配置文件中的 seconds_before_purge_tmp_files 键来覆盖此值。

使用方法

步骤 1

在您的模型表的表上创建一个长文本列。

$table->longText('content')->nullable();

通过向所需的列添加 object 来配置您的模型。

use Illuminate\Database\Eloquent\Model;

class Foo extends Model {
    protected $casts = [
        'content' => 'object',
    ];
}

步骤 2

将字段添加到您的 Nova 资源中。

use App\Nova\Resource;
use Novius\NovaVisualComposer\NovaVisualComposer;

class FooResource extends Resource
{       
    public function fields(Request $request)
    {
        return [
            // ..
            NovaVisualComposer::make('Content')
                                ->stacked(),
            // ..
        ];
    }
}

步骤 3

在 blade 模板中显示。

@foreach($item->content as $row)
    {!! $row->template::renderFront($row->content) !!}
@endforeach

创建新的行模板

步骤 1

您必须发布语言和视图文件。

php artisan vendor:publish --provider="Novius\NovaVisualComposer\NovaVisualComposerServiceProvider" --tag="config"
php artisan vendor:publish --provider="Novius\NovaVisualComposer\NovaVisualComposerServiceProvider" --tag="views"

步骤 2

创建您自己的行模板并将其链接到配置文件。

行模板类

namespace App\Nova\Templates\Rows;

use Novius\NovaVisualComposer\Templates\RowTemplateAbstract;
use Novius\NovaVisualComposer\Traits\HasImageField;
use Novius\NovaVisualComposer\Traits\HasPrunableFiles;

class ImageText extends RowTemplateAbstract
{
    use HasImageField;
    use HasPrunableFiles;

    public static $name = 'image-text';

    protected static function imageFieldsIndexes(): array
    {
        return [0]; // Because image field is the first field that contains "js-visual-field" class of CRUD view
    }
}

将其添加到配置文件

return [

    ...

    'templates' => [
        \Novius\NovaVisualComposer\Templates\Article::class,
        \Novius\NovaVisualComposer\Templates\ImageMultiple::class,
        \Novius\NovaVisualComposer\Templates\ImageSimple::class,
        \Novius\NovaVisualComposer\Templates\Separator::class,
        \Novius\NovaVisualComposer\Templates\Title::class,

        // Custom Template
        \App\Nova\Templates\Rows\ImageText::class,
    ],
];

步骤 3

创建模板视图（CRUD + 前端视图）。

resources/views/vendor/nova-visual-composer/templates/ImageText/crud.blade.php

提示

• 您想要保存的每个 HTML 字段都必须包含 js-visual-field 类。
• 如果您想要 wysiwyg，请将 js-wysiwyg 类添加到 textarea 字段。
• 如果您想要图像上传字段，请将 js-image-uploader 类添加到文件字段。
• 如果您想要多图上传字段，请将 js-image-uploader 类和 multiple 属性添加到文件字段。

<div class="shadow-md mb-4 w-full">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-4">
            {{ $templateDetails['name_trans'] }}
        </div>
        <div class="flex">
            <div class="w-1/3 pr-3">
                <div class="form-group">
                    <input type="file" class="filepond js-visual-field js-image-uploader">
                </div>
            </div>
            <div class="w-2/3">
                <div class="form-group mb-2">
                    <label class="block text-grey-darker text-sm font-bold mb-2">
                        {{ trans('nova-visual-composer::templates.'.$templateName.'.crud_pre_title') }}
                    </label>
                    <input class="js-visual-field w-full form-control form-input form-input-bordered"
                           type="text"/>
                </div>
                <div class="form-group mb-2">
                    <label class="block text-grey-darker text-sm font-bold mb-2">
                        {{ trans('nova-visual-composer::templates.'.$templateName.'.crud_title') }}
                    </label>
                    <input class="js-visual-field w-full form-control form-input form-input-bordered"
                           type="text"/>
                </div>
                <div class="form-group mb-2">
                    <label class="block text-grey-darker text-sm font-bold mb-2">
                        {{ trans('nova-visual-composer::templates.'.$templateName.'.crud_text') }}
                    </label>
                    <textarea name="content"
                              class="js-visual-field js-wysiwyg w-full form-control form-input-bordered py-2 h-20"></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

resources/views/vendor/nova-visual-composer/templates/ImageText/front.blade.php

@php
    if (empty($content) || !is_array($content)) {
            return;
    }

    list(
        $images,
        $preTitle,
        $title,
        $htmlContent,
    ) = $content;

    $image = is_array($images) ? array_shift($images) : null;
@endphp

<div class="block-image-text">
    @if (!empty($image))
        <img src="{{ asset('storage/'.$image) }}"/>
    @endif
    @if (!empty($preTitle))
        <h5 class="pre-title">
            {{ $preTitle }}
        </h5>
    @endif
    @if (!empty($title))
        <h3 class="title">
            {{ $title }}
        </h3>
    @endif
    @if (!empty($htmlContent))
        <div class="content">
            {!! $htmlContent !!}
        </div>
    @endif
</div>

步骤 4

将您的翻译添加到语言文件中。

resources/lang/vendor/nova-visual-composer/fr/templates.php

return [
    ...

    'image-text' => [
        'name' => 'Image / texte',
        'crud_pre_title' => 'Sur-titre',
        'crud_title' => 'Titre',
        'crud_text' => 'Texte',
    ],
];    

代码风格检查

使用

composer run-script lint

贡献

欢迎贡献！在 Github 上留下一个问题，或创建一个 Pull Request。

许可证

此软件包受GNU Affero 通用公共许可证 v3或（根据您的选择）任何后续版本的约束许可。