README

关于

一个用于集成到 Symfony/Doctrine/Twig 项目的页面构建工具。

注意：此包非常实验性，可能会在没有警告的情况下进行重要更改。

基本原理

一个页面是一组包含区域（可以想象 Bootstrap 网格中的行和 div，它们覆盖列）的行。

每个区域可以包含一个或多个块。块是 小部件 的实例。小部件是一组可配置的元素。

提供了一些小部件（按钮、图像、水平线、文本），但您需要根据您应用程序的目的（自定义视频、文章等）实现自己的小部件。

安装

使用 composer 需要此包

composer require spyrit/page-builder-bundle

存储

理想情况下，我们希望此包无存储限制。

目前，它仅与 Doctrine 一起使用，因此您需要设置数据库，并创建以下实体：Block、Page、Zone。

您可以根据需要命名这些实体。您可以创建特定的实体或重用项目中的实体。您可以使它们使用 BlockTrait、PageTrait 和 ZoneTrait，但不是必需的。但是，您的实体必须扩展 BlockInterface、PageInterface、ZoneInterface。

<?php

namespace App\Entity;

use App\Repository\BlocRepository;
use Doctrine\ORM\Mapping as ORM;
use Spyrit\Bundle\SpyritPageBuilderBundle\Model\BlockInterface;
use Spyrit\Bundle\SpyritPageBuilderBundle\Model\BlockTrait;

/**
 * @ORM\Entity(repositoryClass=BlockRepository::class)
 */
class Block implements BlockInterface
{
    use BlockTrait;

    /**
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     */
    private $id;

    public function getId(): ?int
    {
        return $this->id;
    }
}

您必须在您的类中实现 getConfiguration、setConfiguration 和 getWidget 方法以匹配您的存储。

如果您添加了自定义小部件，您还需要实现 setWidget。

<?php

namespace App\Entity;

use App\Repository\PageRepository;
use Doctrine\ORM\Mapping as ORM;
use Spyrit\Bundle\SpyritPageBuilderBundle\Model\PageInterface;
use Spyrit\Bundle\SpyritPageBuilderBundle\Model\PageTrait;

/**
 * @ORM\Entity(repositoryClass=PageRepository::class)
 */
class Page implements PageInterface
{
    use PageTrait;

    /**
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     */
    private $id;

    public function getId(): ?int
    {
        return $this->id;
    }
}

<?php

namespace App\Entity;

use App\Repository\ZoneRepository;
use Doctrine\ORM\Mapping as ORM;
use Spyrit\Bundle\SpyritPageBuilderBundle\Model\ZoneInterface;
use Spyrit\Bundle\SpyritPageBuilderBundle\Model\ZoneTrait;

/**
 * @ORM\Entity(repositoryClass=ZoneRepository::class)
 */
class Zone implements ZoneInterface
{
    use ZoneTrait;

    /**
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     */
    private $id;

    public function getId(): ?int
    {
        return $this->id;
    }
}

如何使用

添加小部件

创建一个继承自 BaseWidget 的类。
为您的组件创建 Twig 模板（如果需要，一个编辑模板和一个前端模板）
创建您的组件表单

渲染（只读）

要显示构建的页面（例如在公开路由上），您需要从 RenderManager 服务中调用 renderPage 方法。

use Spyrit\Bundle\SpyritPageBuilderBundle\Manager\RenderManager;

public function show(Page $page, RenderManager $renderManager): Response
{
    return $this->render('render.html.twig', [
        'html' => $renderManager->renderPage($page),
    ]);
}

其中 render.html.twig 可以模仿 @SpyritPageBuilder/render/base.html.twig。

渲染（编辑器）

要渲染页面构建器（例如在私有路由上，为管理员），您需要从 RenderManager 服务中调用 renderPage 方法，并将第二个参数作为 true。

use Spyrit\Bundle\SpyritPageBuilderBundle\Manager\RenderManager;
use Spyrit\Bundle\SpyritPageBuilderBundle\Widget\Widget;

public function edit(Page $page, RenderManager $renderManager): Response
    return $this->render('editor.html.twig', [
        'html' => $renderManager->renderPage($page, true),
        'widgets' => Widget::CHOICES, // or plug here your custom list of Widgets
    ]);
}

其中 editor.html.twig 可以模仿 @SpyritPageBuilder/editor/editor.html.twig。

编辑器样式

鼓励您编写自己的 CSS，但您也可以使用提供的 page-builder.scss。要使用它，将其添加到您的 webpack.config.js

.addStyleEntry('css/page-builder', './vendor/spyrit/page-builder-bundle/src/Resources/public/css/page-builder.scss')

然后在您的编辑器页面上

{% extends 'your_base_layout.html.twig' %}

{% block stylesheets %}
    {{ encore_entry_link_tags('css/page-builder') }}
{% endblock %}

{% block body %}
    <div class="page-editor">
        {% include '@SpyritPageBuilder/editor/editor.html.twig' %}
    </div>
{% endblock %}

{% block javascripts %}
    {{ include('@SpyritPageBuilder/editor/editor_js.html.twig') }}
{% endblock %}

spyrit / page-builder-bundle

维护者

详细信息