sunshineup/slices

为 DataObject 子类提供带有自定义模板的 Slice 扩展

安装: 20

依赖者: 0

建议者: 0

安全: 0

星星: 0

关注者: 2

分支: 3

类型:silverstripe-vendormodule

1.0.0 2023-07-25 01:36 UTC

README

在 "slices" 中实现内容管理;将内容组件分开,每个组件都有自己的模板、字段和视觉设置,用户可以在 CMS 中创建和排列。

  • CMS 中的 Slice 预览
  • 通过 YAML 配置 Slice CMS

用法

最好在基于 slice 类的基础 slice 上使用大量的通用字段,因为这样可以允许模板共享字段并在 YAML 中配置,而无需为每个 slice 创建一个类。 silverstripe-adaptivecontent 对于此用途效果良好(并且曾经与该模块集成)。

# Use the generic fields in silverstripe-adaptivecontent
Slice:
  extensions:
    - 'AdaptiveContent'
    - "AdaptiveContentRelated('Page')"

模板

每个 slice 类型/模板都有自己的模板文件,文件名为 [BaseSliceClass]_[TemplateName]。这些可以放在 themes/[theme]/templates/Slices 中,以将其与其他模板分开。

将 Slices 添加到页面

此模块包含一个扩展,可轻松设置页面上的 Slices

Page:
  extensions:
    - PageSlicesExtension

在模板中,可以使用以下方法渲染所有切片

<% if $Slices %>
    <% loop $Slices %>
        $forTemplate
    <% end_loop %>
<% end_if %>

继承 Slice

继承 Slice 是一个正常的使用场景,但是请注意,在继承它时,您需要覆盖您 "基础" slice 子类(您从页面指向的一个)中的 getBaseSliceClass 方法,以便切片可以正确保存

class ContentSlice extends Slice
{
    protected function getBaseSliceClass()
    {
        return __CLASS__;
    }
}

class VideoSlice extends ContentSlice
{
    // Subclasses of your 'base' subclass don't need anything special
}

这是由于该模块需要一个 "默认" 类,以便在模板配置中没有设置 className 键时回退。

自定义 CMS 字段

YourBaseSlice::getCMSFields 中添加和修改字段是预期的使用场景。请注意,如果例如用自定义内容替换字段,则配置在 slices YAML 配置中的内容将被覆盖。在这种情况下,您可以在 getCMSFields 函数的末尾重新应用 slices 配置,如下所示

// Re-apply slices config
$config = $this->getCurrentTemplateConfig();
$this->configureFieldsFromConfig($fields, $config);

自定义 CMS 中的 slice 预览

Slice preview in CMS

当编辑和浏览时,slice 预览将在 iframe 中渲染 CMS。默认情况下,预览在基本 HTML 页面包装器内渲染:silverstripe-slices/templates/SliceWrapper.ss。您可以在自己的主题中覆盖此包装器以自定义 slice 预览的交付方式。

示例配置

Slice:

  # Define stylesheets to be used when previewing slices in the CMS
  previewStylesheets:
    - /themes/base/css/styles.css

  # Automatically configure the upload folder for these file fields on Slice
  # Files and images will be uploaded to assets/Uploads/Slices/[TemplateName]
  uploadFolderFields:
    - LeadImage
    - SecondaryImage
    - LeadFile

  # The default slice template can be specified, or defaults to the first defined
  # This is just what is selected by default when a new slice is created
  defaultTemplate: TwoColumnImage

  templates:
    Quote:
      fields:
        Title: Quotee
        Content:
          # Set the CMS "title" of the field
          label: Quote

          # Change the form component used for this field
          fieldClass: TextareaField

          # Cast the field to something when rendering it in the template
          casting: Text

          # Value to use for the field's "right title"
          help: ~20 - 30 words

          # Value to use when previewing what the slice will look like
          exampleValue: Dolor exercitation sint ad minim et deserunt nisi aliquip cillum laboris ipsum esse nulla commodo cupidatat ipsum proident exercitation veniam

      # Options exposed in the CMS for configuring the slice template
      # The key is accessible in templates, and the value is used as the CMS title
      visualOptions:
        no-icon: No icon
        bold-quote: Bold quoted text


    TwoColumnImage:
      # Name to show for the template in the CMS
      name: Two column with image

      # Class to change to when using this template
      # This allows complex slices to have extra fields and code
      className: TwoColumnImageSlice

      # Fields that only need a label configured can be defined using a shortcut:
      # (The order fields are defined here also controls the order they show in the CMS)
      fields:
        Title: ~
        Content: Text column
        LeadImage:
          name: Image
          # Images can be specified as file names in example content
          exampleValue: themes/base/images/examples/random-guy.jpg

      visualOptions:
        image-right: Image in right column
        title-centered: Center title above columns

兼容性

此模块至少需要 SilverStripe 3.1 和 PHP 5.3。