README

Craft CMS 的页面构建器体验！无需触摸任何模板即可构建复杂页面。Keystone 允许您将内容组织成组件，这些组件可以在 Craft 控制面板中无限嵌套和样式化。

默认组件

Keystone 随带一些默认组件以帮助您开始，但它实际上应该根据站点进行扩展，以提供所有需要的组件。开箱即用的基础组件包括：

• 资产
• 标题
• 链接
• 部分
• 文本

通过组合这些组件，您可以创建一个类似于上述截图的页面。请注意，文本是如何嵌套在标题中的，因为，就像 HTML 一样，组件可以接受任何数量的子组件以创建生动丰富的体验。

创建您自己的组件

创建组件就像在您的站点模板目录中添加一个 .tiwg 文件一样简单。假设您想构建一个 card 组件。您会在 templates/components 目录中创建一个名为 card.twig 的文件。Keystone 会自动识别该目录中的任何组件。

card.twig 文件可能包含如下内容：

<div {{ attributes }}>
    <div>{% slot "media" %}{% endslot %}</div>
    <div>{{ props.heading }}</div>
    <div>{% slot %}{% endslot %}</div>
</div>

这将创建一个新的“Card”组件，它具有一个 heading 字段和两个插槽。标题字段可以在 Craft 的普通纯文本字段中进行更新，而两个插槽可以放置任何嵌套的组件。

它也可以包含更复杂的内容，例如：

{# The default name would be `Card` based on the filename of `card.twig` #}
{% export name = "My Great Card" %}

{# The default icon would be a puzzle piece, but you can override that with any SVG here #}
{% export icon %}<svg...>{% endexport %}

{# Any `prop` that is accessed below will automatically become a plain text field #}
{# If you want to override that you can export propTypes for any field you want to #}
{# provide more information for. #}
{% export propTypes = {
    heading: field('plaintext')
} %}

{# The `attributes` array will come out of the Keystone "Design" tab. You can provide #}
{# defaults for the user via `attributes.merge()`. #}
<div {{ attributes.merge({class: 'border-2 border-gray-500 rounded-lg p-2 space-y-2'}) }}>

    {# Slots can be restricted to only allow specific component types so you can tell #}
    {# an area like that that it should only display assets #}
    <div>{% slot "media" allow ["keystone/asset"] %}{% endslot %}</div>
    
    {# Any field accessed on `props` will be available to edit in the Craft CP #}
    <div class="text-2xl font-bold">{{ props.heading }}</div>
    
    {# The default `slot` #}
    <div>{% slot %}{% endslot %}</div>
</div>

设计

Keystone 设计器默认配置为与 Tailwind CSS 一起工作。在 UI 中设置的任何设计属性，如 4rem 的填充，将被转换为 Tailwind 类 p-[4rem]。