组件是编辑者能够整体编辑、删除、移动的最小的内容单元。将组件看作一个整体,这样当您打开一个典型的Magnolia CMS页面时,您可以凭这个感觉轻易的找到组件。最简单的组件可能是只有一个标题和相应内容组成的整体。
每个组件都可以用在几个页面和几个区域里。在区域里,编辑者可以从一个列表中选择组件。这个列表仅显示该区域可用的组件,这是在availableComponents
节点里定义的。
创建组件定义
textBlock
组件是一个非常简单的例子,用来绘制编辑者输入的任何文字。
节点名 | 值 |
---|---|
modules | |
templating | |
templates | |
components | |
textBlock | |
dialog | templating:textBlock |
renderType | freemarker |
templateScript | /templates/components/textBlock.ftl |
title | Text Block |
创建组件脚本
组件脚本绘制组件内容。在我们的示例组件中,内容仅为简单的文字。脚本从内容库中读取文字并绘制出来。
- 在电脑上打开
/<CATALINA_HOME>/webapps/<contextPath>/templates
, 通常为/apache-tomcat/webapps/magnoliaAuthor/templates。
- 新建一个
components
文件夹。 - 在
components
文件夹里新建一个textBlock.ftl
文本文件。 - 用文字编辑器打开这个文件,并拷入以下脚本代码。
FreeMarker:
<p> ${content.text!} </p>
JSP:
<p> ${content.text} </p>
这个脚本会从当前内容对象中绘制text
属性的值。在本例中,内容对象不是Hello页面节点,而是组件节点。
创建组件对话框
组件对话框使编辑者能够编辑组件内容。您可以在标准模板套件(STK > 对话框定义 >
/components
)中找到很多有关组件对话框的示例。
节点名 | 值 |
---|---|
modules | |
templating | |
dialogs | |
textBlock | |
actions | |
cancel | |
class | info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition |
label | Cancel |
save | |
class | info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition |
label | Save changes |
form | |
tabs | |
text | |
fields | |
text | |
class | info.magnolia.ui.form.field.definition.TextFieldDefinition |
label | Component text |
rows | 5 |
label | Text block |
为页面添加组件
现在您已经准备好了为页面添加组件所需的一切:定义好的组件,组件脚本,组件对话框,并且在main
区域内可用。
为页面添加组件:
- 重新加载Hello页。
- 点击
main
区域的占位符。 - 点击工具栏上的加号来添加组件。
- 选择Text Block组件,并点击OK。
- 在Component text框里输入文字。
- 保存。
这样组件就成功在页面上绘制了。
组件同样也有工具栏,点击其所在的区域工具栏就可以看到。
由于主区域是list
类型,您可以添加多个组件,试着拖动组件工具栏来改变顺序。
组件内容被存放在website
内容库。每个组件都有一个内容节点及其包含的属性,您可以在JCR浏览器中看到。
下一步:激活到公共实例