README

为 Symfony Sonata Admin Bundle 提供的 Bootstrap 页面布局，基于 gridstack.js

预览

在 Sonata Admin 中的简单编辑器

Bootstrap 网格作为结果

安装

使用 Composer

composer require it-blaster/page-layout-bundle

将安装/更新脚本添加到 composer.json

installGridStackJs 只在包目录中调用系统 bower install

{
    "scripts": {
        "post-install-cmd": [
             "Etfostra\\PageLayoutBundle\\Composer\\ScriptHandler::installGridStackJs",
            ...
        ],
        "post-update-cmd": [
             "Etfostra\\PageLayoutBundle\\Composer\\ScriptHandler::installGridStackJs",
            ...
        ]
    }
}

在 AppKernel.php 中注册该包

...
new Etfostra\PageLayoutBundle\EtfostraPageLayoutBundle(),
...

编辑 config.yml

将 EtfostraPageLayoutBundle 添加到 assetic.bundles

assetic:
    ...
    bundles:
        ...
        - EtfostraPageLayoutBundle

配置

所有配置都是可选的，默认值在下面的 config.yml 中提供

etfostra_page_layout:
    grid_settings: # https://github.com/troolee/gridstack.js#options
        always_show_resize_handle: false
        animate: true
        auto: true
        cell_height: 80
        draggable:
            handle: '.grid-stack-item-content'
            scroll: true
            appendTo: 'body'
        handle: '.grid-stack-item-content'
        handle_class: ''
        height: 0
        float: false # http://troolee.github.io/gridstack.js/demo/float.html
        item_class: 'grid-stack-item'
        min_width: 768
        placeholder_class: 'grid-stack-placeholder'
        placeholder_text: ''
        resizable:
            autoHide: true
            handles: 'se'
        static_grid: false
        vertical_margin: 10
        width: 12
        item_min_width: 4
    properties: # data for generating additional widget properties (options in select)
        media_size_prefix:
            xs: XS — Extra small devices
            sm: SM — Small devices Tablets
            md: MD — Medium devices Desktops
            lg: LG — Large devices Desktops
    templates:
        front_layout: EtfostraPageLayoutBundle:Frontend:page_layout.html.twig

使用

在 Sonata Admin 类中插入 page_layout 字段

class YourAdmin extends Admin
{
    ...
    protected function configureFormFields(FormMapper $formMapper)
    {
        ...
        $formMapper
            ->add('your_text_field', 'page_layout', array(
                'required' => false,
                'choices'  => array(
                    // Key and value can be any string, it's up to you.
                    // This keys will be available later in WidgetRenderer::setWidgets
                    'CurrentPage:'          => 'Current page content',
                    'Widget:feedbackform'   => 'Feedback form',
                    'Widget:leftmenu'       => 'Left menu',
                ),
            ))
        ...
    }

从现在起，您可以在 Sonata Admin 中编辑和保存（到 your_text_field）网格数据。

前端布局生成

为了生成布局，我们必须在控制器中调用和配置 etfostra_page_layout.services.page_layout 服务

$layout = $this->get('etfostra_page_layout.services.page_layout')
    ->setLayoutData( $your_text_field )
    ->setWidgetRenderer( $renderer )
    ->render();

但现在我们有两个未定义的变量！没关系，如何定义它

$your_text_field = $yourObject->getYourTextField(); // It's simple, this is data from your your_text_field, that we edit in Sonata Admin
$renderer = $this->get('widget_renderer'); // This is more complex, we must implement our service widget_renderer 

在 services.yml 中定义这个新的服务，参数是可选的，取决于实现

services:
    ...
    widget_renderer:
        class: Your\AppBundle\Service\WidgetRenderer
        arguments:
            - @templating

是时候创建我们的新渲染器服务了，命名为 WidgetRenderer

namespace Your\AppBundle\Service;

use Etfostra\PageLayoutBundle\Services\WidgetRenderInterface;
use Symfony\Component\Templating\EngineInterface;

class WidgetRenderer implements WidgetRenderInterface
{
    protected $widgets;
    protected $templating;
    
    public function __construct(EngineInterface $templating)
    {
        $this->templating = $templating;
    }
    
    /**
     * At this we must fill $this->widgets array with html rendered widgets
     */
    public function setWidgets(array $widgets) // $widgets example: array('CurrentPage:', 'Widget:feedbackform', 'Widget:leftmenu') 
    {
        foreach ($widgets as $widget_id) {
            $this->widgets[$widget_id] = $this->templating->render('YourAppBundle:Widget:widget.html.twig', array(
                'widget_id' => $widget_id,
            ));
        }
    }
    
    public function getWidget($widget_id)
    {
        if (isset($this->widgets[$widget_id])) {
            return $this->widgets[$widget_id];
        }

        return null;
    }
}

这是一个非常简化的示例，您可以根据您的小工具系统创建更复杂的实现。