README

此模块提供布局选项的扩展。选项可以附加到页面、元素或每个数据对象。默认情况下，此模块包含文本、背景和宽度的选项。此外，此软件包还包含一个基于Heyday 的调色板字段的选择字段。

• 要求
• 安装
• 配置
• 默认布局选项
• 更新选项
• 报告问题

要求

• Silverstripe CMS >=4.0
• Silverstripe 框架 >=4.0
• 版本化管理 >=1.0
• Silverstripe 调色板字段 ^2.1
• Silverstripe 选择字段 ^1.0

安装

composer require pixelpoems/silverstripe-layout-options

配置

在页面

Page:
  extensions:
    - Pixelpoems\LayoutOptions\Extensions\Text
    - Pixelpoems\LayoutOptions\Extensions\Background
    - Pixelpoems\LayoutOptions\Extensions\Width
    - Pixelpoems\LayoutOptions\Extensions\Image

或元素上添加所需的扩展（如果您使用 Elemental 表单 DNADesign 的话）

DNADesign\Elemental\Models\BaseElement:
  inline_editable: false
  extensions:
    - Pixelpoems\LayoutOptions\Extensions\Text
    - Pixelpoems\LayoutOptions\Extensions\Background
    - Pixelpoems\LayoutOptions\Extensions\Width
    - Pixelpoems\LayoutOptions\Extensions\Image

字段将按照在 yml 配置中添加扩展的顺序显示。

如果某些实体不应显示，则可以将其隐藏，例如。

Page:
  hide_layout_option_heading_tag: true
  hide_layout_option_text_color: true
  hide_layout_option_text_align: true
  hide_layout_option_background_color: true
  hide_layout_option_width: true
  hide_layout_option_image_orientation: true
  hide_layout_option_image_brightness: true
  hide_layout_option_image_shape: true

默认布局选项

文本

背景

宽度

图像

更新选项

对于每个选项集，您可以使用钩子来更新/扩展用户可以选择的选项。

Pixelpoems\LayoutOptions\Services\LayoutService:
  extensions:
    - Namespace\YourLayoutServiceExtension

要配置标题标签的选项，如文字颜色、文字对齐、背景颜色和宽度，您可以添加如下配置变量

Pixelpoems\LayoutOptions\Services\LayoutService:
  heading_tag_options:
    h2:
      Value: 'h2'
      Title: 'H2'
  text_color_options:
    white: '#fff'
    black: '#000'
  align_options:
    left:
      Value: 'left'
      Title: 'Left'
      ShowTitle: true
      Icon: 'align-left'
  layout_width_options:
    small:
      Value: 'small'
      Title: 'Small'
      ShowTitle: true
      Content: 'S'
  background_color_options:
    white: '#fff'
    black: '#000'

在 yml 文件中配置的选项将覆盖默认选项！

否则，您可以使用以下钩子来更新选项或添加新的选项

public function updateHeadingTagOptions(&$options)
{
    // Add an option
    $options['h5'] = [
        'Value' => 'h5',
        'Title' => 'H5',
    ];
}

public function updateTextColorOptions(&$options)
{
    // Add an option
    $options['text-light'] = '#ffcdb2';
}

public function updateAlignOptions(&$options)
{
    // Add an option
    $options['justify'] = [
        'Value' => 'justify',
        'Title' => 'Justify',
        'ShowTitle' => true,
        'Icon' => 'align-justify'
    ];
}

public function updateLayoutWidthOptions(&$options)
{
    // Add options
    $options = array_merge($options, [
        'xs' => [
            'Value' => 'xs',
            'Title' => 'XS',
            'ShowTitle' => true,
        ],
        'xl' => [
            'Value' => 'xl',
            'Title' => 'XL',
            'ShowTitle' => true,
        ]
    ];
}

public function updateBackgroundColorOptions(&$options)
{
    // Overwrite the default Background Colors
    $options = [
        'white' => '#ffffff',
        'bg-1' => '#ffcdb2',
        'bg-2' => '#ffb4a2',
        'bg-3' => '#e5989b',
        'bg-4' => '#b5838d',
        'bg-5' => '#6d6875',
        'black' => '#000000',
    ];
}

持有类

此模块还包括对 DNADesign Elemental 基础元素的扩展。此扩展向元素添加持有类。持有类是布局选项和 el-classname 类的组合。此持有类可以用于在前端样式化元素。持有类被添加到元素的持有 div 中。

如果您想操作或添加自定义布局类到此持有类，可以使用以下钩子

// Extension of DNADesign\Elemental\Models\BaseElement
public function updateHolderClasses(&$classes)
{
    // Add a class
    $classes[] = 'my-custom-class';

    // Add a class based on the layout options
    $element = $this->owner;
    if($element->NewLayoutOption && !$element->config()->get('hide_layout_option_new_layout_option'))) $holderClasses[] = 'abc--' . $element->NewLayoutOption;

}

报告问题

如果您发现任何错误或缺少功能，请创建问题。