README

功能

在 SilverStripe 中构建页面的模块化方法，允许基于模型的页面组件。

自定义基于模型的块
块的数量没有限制
易于选择和编辑块
使用拖放 GridField 功能轻松更改和重新排序块
将复杂的逻辑（如表单）应用于块
跨块版本控制

屏幕截图

块选择

安装

将以下内容添加到您的 composer.json 文件中，并运行 /dev/buid?flush=all

{  
    "require": {  
        "cyber-duck/silverstripe-block-page": "4.0.*"
    }
}

设置

添加扩展和模板循环

添加块功能的第一步是将块页面扩展应用到您的 DataObject 上。这可以是普通 DataObject 或页面。

Page:
  extensions:
    - BlockPageExtension

这将向 CMS 添加一个名为“内容块”的新标签页。第二步是在模板中应用块循环

<% loop ContentBlocks %>
$Template
<% end_loop %>

添加块模型和模板

下一步是创建一个块。一个块由两部分组成；一个 DataObject 和一个 .ss 模板。这两者应该有相同的名称。

EditorBlock.php
EditorBlock.ss

模型文件可以位于您的代码文件夹中的任何位置，应该扩展 ContentBlock。块 DataObject 的基本模板如下所示

use CyberDuck\BlockPage\Model\ContentBlock;
use SilverStripe\Forms\HeaderField;
use SilverStripe\Forms\HTMLEditor\HTMLEditorField;

class EditorBlock extends ContentBlock
{
    private static $title = 'Editor';

    private static $description = 'Simple WYSIWYG editor block';
    
    private static $preview = '/themes/{YourTheme}/img/block/EditorBlock.png';

    private static $db = [
        'Content' => 'HTMLText'
    ];

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        # HEADER - THIS FIELD IS REQUIRED
        $fields->insertBefore(HeaderField::create('BlockHeader', self::$title), 'Title')

        # FIELDS - YOUR FIELDS HERE
        $fields->addFieldToTab('Root.Main', HTMLEditorField::create('Content')); // example field

        return $fields;
    }
}

在上面的示例中，创建了一个名为“Content”的自定义块字段。您可以替换此字段或添加任何其他您想要的字段。用于块选择屏幕的块使用了 3 个配置属性

$title - 块标题
$description - 块描述
$preview - 块的预览图像。您可以将其指向主题中的图像文件夹或类似位置。360w x 150h。

在您的主题文件夹中，在 themes/{YourTheme}/templates/Block/ 创建一个文件夹，并将以下内容的 EditorBlock.ss 模板添加到其中

<div>
    $Content
</div>

添加块 YML 配置

配置块的最后一步是设置块 YML 配置

---
Name: block config
---
CyberDuck\BlockPage\Model\ContentBlock:
  blocks:
    - EditorBlock
  restrict:

访问 /dev/build?flush=all

在 CMS 中添加块

转到 CMS 并访问您的页面/对象编辑屏幕，您将看到一个名为“内容块”的新标签页。在这里，您可以创建新的块、编辑块和重新排序块。

额外配置

限制块

您可以通过传递一个 restrict 选项将某些块选择限制为特定页面类型

CyberDuck\BlockPage\Model\ContentBlock:
  blocks:
    - EditorBlock
    - HomeFeaturedBlock
  restrict:
    HomePage:
      - HomeFeaturedBlock

创建块容器模板

如果您希望将所有块包裹在某个模板中，可以在 /Block/ 文件夹中创建一个 ContentBlock_holder.ss 模板。

<div id="block-$ID">
    $Template
</div>

您的页面中的循环需要稍微改变一下，并调用 $TemplateHolder 而不是 template。

<% loop ContentBlocks %>
$TemplateHolder
<% end_loop %>

cyber-duck / silverstripe-block-page

维护者

详细信息