Page History

...

组件定义

组件是页面上最小的内容块。STK包括用于所有使用案例的组件，和从简单的文本组件到复杂的聚合要点等可用组件。单个组件在组件是页面上最小的内容块。STK包括用于所有使用案例的组件，可用组件（从简单的文本组件到复杂的聚合要点组件），以及更多。单个组件在组件页上讨论。

组件定义在STK > 模板定义 /components里配置。定义以文件夹的形式排列，文件夹名表示组件类型。里配置，以文件夹的形式排列，文件夹名表示组件类型。

组件定义与页面定义相似，都使用同样的模板定义对象。页面和组件使用相同路径语法引用它们的对话框。此外，页面和组件使用相同的绘制工具绘制。组件定义与页面定义相似，使用相同的模板定义对象。页面和组件使用相同路径语法引用它们的对话框。此外，页面和组件还使用相同的绘制工具绘制。

在很多时候，都不需要从头开始创建一个新组件，您可以拷贝或扩展现有的，并按您的需要调整。多数情况下，您不需要从头开始创建一个新组件；您可以拷贝或扩展现有的，并按您的需要调整。

通常创建新组件包括以下几步：

1. 创建一个对话框。
2. 创建一个组件定义。
3. 创建一个组件脚本。
4. 使组件对组件脚本可用。

组件可用于编辑者通过编辑者可以在STK > 对话框定义里配置的相关组件对话框输入内容。对话框定义通过对话框属性映射到组件定义里。输入内容，来使用组件。对话框定义通过dialog属性映射到组件定义里。

大多数组件在大多数组件在区域定义里分配给页面模板，区域定义可以是模板原型或具体页面模板定义的区域定义里被分配给页面模板。定义的。

组件模板属性

所有的STK组件定义都有以下属性：

• description：指向组件描述的消息包关键字。
• dialog：到对话框定义的路径，有着：到对话框定义的路径，结构为<module name>:<path to definition>结构。大多数STK对话框都在。大多数STK对话框都在STK > 对话框定义下配置。
• 118nBasename：国际化关键字，：国际化关键字，即info.magnolia.module.templatingkit.messages，指向包含STK翻译的消息包。
• renderType：值为stk时分配的STKRenderer是一个STK专用的绘制器，为所有的STK模板（页面和组件）所使用。
• templateScript：指向绘制组件的脚本的路径。组件脚本在STK > 模板 /templating-kit/components下。
• title：在组件工具栏里绘制的组件标题。
• deletable决定组件是否能被删除。如果设置为false，那么删除组件动作在动作栏里不可用。在动作栏里不可用。 4.5.9+
• moveable决定组件是否能被移动。如果设置为false，那么移动图标在组件工具栏里不绘制，并且移动组件动作在动作栏里不可用。 4.5.9+
• writable决定组件是否能被编辑。如果设置为false，那么编辑图标在组件工具栏里不绘制，并且编辑组件动作在动作栏里不可用。 4.5.9+

参考资料 > 组件里有可用的组件模板属性以及它们的用法的完整列表。里有可用的组件模板属性的完整列表及用法。

以上的配置样例中，以上配置样例中，deletable，、moveable和writable 属性的使用使得组件可编辑，同时禁止移动和删除。以下为编辑者在页面编辑器里看到的。属性的配置使组件可编辑，但不可移动或删除。以下为编辑者在页面编辑器里看到的。

模型类

很多组件使用它们自己的模型类，为组件提供业务逻辑，并且在一些实例中使定制属性对脚本可用。例如，以下的很多组件使用它们自己的模型类（model class），提供组件的业务逻辑，并且有时使脚本可以使用定制的属性。例如，以下的stkTeaser组件使用了InternalTeaserModel，允许链接到要点组件的内部内容。，允许要点组件链接到内部内容。

internalPage.ftl脚本绘制模型使能的目标内容的属性。以下为这个脚本的片段，该脚本在脚本绘制模型里配置的目标内容的属性。该脚本在STK > 模板 /templating-kit/components/teasers/interalPage.ftlftl，以下为这个脚本的片段。

[#-- Assigns: Get and check Teaser Target --]
[#assign target = model.target!]
[#assign hasTarget = target?has_content]

[#-- Assigns: Macro assigning Values --]
[#macro assignValues]
    [#-- Assigns: Get Content --]
    [#assign title = content.teaserTitle!target.title!target.@name]
    [#assign kicker = target.kicker!]
    [#assign text = content.teaserAbstract!target.abstract!]
    [#assign teaserLink = model.teaserLink!]

...