README

这是一个WinterCMS插件，允许您为Winter的静态页面创建自定义页面构建器。它已在WinterCMS 1.1.3上进行了测试。

安装 - Composer

composer require mercator/wn-pagebuilder-skeleton-plugin
php artisan winter:up

配置

页面构建器定义

此插件将允许您定义用户可以在后端配置的单独元素。在前端，这些元素将根据用户定义的模板进行渲染。

可用的元素定义在一个单独的YAML文件中，位于components/partials/_pagebuilder.yaml。作为一个起点，YAML可能看起来如下所示

richtext:
  name: Rich Text
  description: Rich Text Field
  icon: icon-paragraph
  fields:
    label:
      label: Rich Text
      type: section
      comment: Rich text field.
      span: left
    header:
      label: Haeder text
      type: text
      span: full
      placeholder: 'The H1 header'
    text:
      label: Text
      type: richeditor
      size: giant
      placeholder: 'Content including tables, images, ...'

markdown:
  name: Markdown Text
  description: Markdown text field
  icon: icon-paragraph
  fields:
    label:
      label: Markdown Text
      type: section
      comment: Markdown text field.
      span: left
    text:
      label: Text
      type: markdown
      placeholder: 'Content formatted in Markdown language including tables, images, ...'

这将提供两个元素，richtext和markdown。您可以根据需要扩展/替换YAML。

页面构建器元素渲染

对于在上述YAML中定义的每个元素，在components/partials中创建一个部分来渲染它。例如，对于richtext，创建一个richtext.htm，它可能看起来如下所示

<H1>{{ element.header }}</H1>
{{ element.text | raw }}

您可以按照上述方法引用YAML中定义的各个属性，例如，“element.header”包含H1。

页面构建器交互

还有一个文件需要关注：components/pagebuilder/default.htm

{% for i in pagebuilder %}
   {% set thisPartial = ("@" ~ i._group) %}
   {% partial thisPartial element=i %}					  
{% endfor %}

此文件渲染已定义的单独页面构建器元素 - 通常是一个接一个。
您需要根据所使用的前端库对其进行修改，例如，添加CSS等。

布局文件

创建一个布局文件，以下是最简单的示例。它将基本上调用您刚才看到的代码。

description = "Page Builder"
[viewBag]
[PageBuilder]
==
{% component 'PageBuilder' %}

使用方法

创建一个新的静态页面。在辅助选项卡中，您现在应该看到“页面构建器”标签页，其中底部有一个按钮，上面写着“添加页面构建器组件”。只需按一下即可 - 其余应该很清楚。

还有一件事... 网站全局设置

如果您的插件需要网站/插件级别的设置，这些可以在后端定义。您只需将相应的字段定义添加到models/settings/pagebuilder.yaml中。

下一步

这只是一个简单示例，说明它是如何工作的。此插件不是生产就绪的，下一个版本将覆盖您定义的YAML和组件。建议不要自动更新。下一个版本将提供一个更用户友好的版本。

mercator / wn-pagebuilder-skeleton-plugin

维护者

详情