README

Statamic 的简单组件加载器与渲染器

安装

通过运行 composer require bdbch/statamic-components 安装此插件。这将把插件安装到你的 Statamic 项目中。之后，请确保在 Statamic 控制面板中启用插件。

使用方法

步骤 1

你需要设置组件，例如作为字段集，使其可用于不同类型的内容。

步骤 2

创建一个以你想要的任何名称命名的复制器字段。这是我们示例中的复制器字段

fields:
  -
    handle: page_components
    field:
      collapse: true
      sets:
        // your replicator sets will be added here
      display: Components
      type: replicator
      icon: replicator
      listable: hidden

步骤 3

在你的复制器中创建包含字段的集合。集合名称将用于文件夹结构，请记住这一点。

在这个例子中，我将创建一个包含 wysiwyg 块和图像上传的组件。这可能是我们经过这一步后的 yaml 文件

fields:
  -
    handle: page_components
    field:
      collapse: true
      sets:
        textblock_with_image:
          display: 'Textblock with Image'
          fields:
            -
              handle: content
              field:
                always_show_set_button: false
                buttons:
                  - h2
                  - h3
                  - bold
                  - italic
                  - unorderedlist
                  - orderedlist
                  - removeformat
                  - quote
                  - anchor
                  - image
                  - table
                save_html: false
                toolbar_mode: fixed
                link_noopener: false
                link_noreferrer: false
                target_blank: false
                reading_time: false
                fullscreen: true
                allow_source: true
                enable_input_rules: true
                enable_paste_rules: true
                display: Content
                type: bard
                icon: bard
                listable: hidden
                validate:
                  - required
            -
              handle: image
              field:
                mode: list
                container: assets
                restrict: false
                allow_uploads: true
                max_files: 1
                display: Image
                type: assets
                icon: assets
                listable: hidden
                validate:
                  - required
                  - image
      display: Components
      type: replicator
      icon: replicator
      listable: hidden

步骤 4

现在我们需要创建 Antlers 模板。当前此功能仅支持 Antlers，如果你需要不同的渲染解决方案，请创建一个问题或提交你的 pullrequest。

要创建模板，在你的 /resources/views 目录中创建一个 components 文件夹。在 /resources/views/components 中，你现在需要创建一个与集合名称相同的文件夹，例如，对于此示例 textblock_with_image。最终路径将是 /resources/views/textblock_with_image。在此目录中，创建一个 index.antlers.html。此模板现在将在使用此集合类型时加载。

在此模板中，你的集合中的所有字段都将可用。

步骤 5

现在你可以通过使用 {{ page_components | components }} 在任何你想的地方渲染你的组件。这将使用指定的 Antlers 模板渲染复制器字段 page_components。

计划

通过 Blade 渲染
允许嵌套组件目录以支持嵌套组件

bdbch / statamic-components

维护者

详细信息