README

此仓库仅包含 Voyager 页面块，不是 Voyager 前端包

先决条件

安装

1. 在您的 Laravel/Voyager 项目中需要此包

composer require secondnetwork/voyager-page-blocks

2. 运行安装程序

php artisan voyager-page-blocks:install

3. (可选) 使用示例页面块填充数据库。

php artisan voyager-page-blocks:seed

创建与修改块

页面块通过两步创建和配置

定义块 - 在 /config/page-blocks.php
构建块的 HTML 布局 - 在 /resources/views/vendor/voyager-page-blocks/blocks 创建模板

1. 定义一个块

熟悉 /config/page-blocks.php。在这里，您将定义每个块 - 您将告诉它块应该有哪些字段（管理员管理使用）以及前端应该使用哪个 Blade 模板。

此配置文件中的每个数组都是一个页面块
每个块包含字段
每个字段包含一个唯一的字段键
每个字段基于 Voyager 数据类型

下表解释了每个属性的作用以及它与块本身的相关性

2. 构建 HTML

当您准备好开始构建块的显示结构时，您需要创建（或覆盖我们的默认设置）您的 blade 模板（位于 /resources/views/vendor/voyager-page-blocks/blocks/your_block.blade.php），并使用在您的模块配置文件中定义的访问器获取每个字段的数据（{!! $blockData->image_content !!}）。

示例。将所有内容组合在一起

假设我们想创建一个名为“公司概述”的新块，包含 1 个 WYSIWYG 编辑器。

步骤 1. 定义新块

在 /config/page-blocks.php 中，我们将添加

$blocks['company_overview'] = [
    'name' => 'Company Overview',
    'template' => 'voyager-page-blocks::blocks.company_overview',
    'fields' => [
        'content' => [
            'field' => 'content',
            'display_name' => 'Company Overview Content',
            'type' => 'rich_text_box',
            'required' => 1,
            'placeholder' => '<p>Lorem ipsum dolor sit amet. Nullam in dui mauris.</p>',
        ],
    ],
];

步骤 2. 构建 Controller 和 Blade 视图

PagesController

class PagesController extends Controller
{
    protected $theme = '';

    public function index()
    {
        $page = Page::where('slug', 'startseite');
        $page = $page->firstOrFail();
        $block = DB::table('page_blocks')
            ->where('page_id', '=', $page->id)
            ->where('is_hidden', '=', '0')
            ->orderBy('order', 'asc')
            ->get();
        return view('theme::pages.default', compact('page', 'block', 'posts'));
    }

Blade 视图模板

@if (!empty($block))
@foreach($block as $blockTemp)
    @if (!empty($blockTemp->type))
        @php
        $template = $blockTemp->path;
        $blockData = json_decode($blockTemp->data);
        @endphp
        
        @include('theme::blocks.'.$template)
        
    @else
        <div class="page-block">
            <div class="callout alert">
                <div class="grid-container column text-center">
                    <h2><< !! Warning: Missing Block !! >></h2>
                </div>
            </div>
        </div>
    @endif
@endforeach
@else
<h1>
  {{ $page->title }}
</h1>
<div class="page-content">
  {!! $page->body !!}
</div>
@endif

步骤 3. 将块添加到页面

接下来，进入 Voyager Admin > 页面，点击页面旁边的“内容”。现在您可以从“添加块”部分选择 Company Overview。将块添加到页面，拖放它到适当位置，编辑文本等。

故障排除

输出字段进行清理很重要，null 值会导致错误.

非常重要，您必须遵循示例页面块中设置的命名方案，因为键引用了系统中的其他齿轮以组合块。在 resources/views 目录和配置文件中已经设置了示例块，供您开始使用。

secondnetwork / voyager-page-blocks

维护者

详细信息