创建组件

 组件是编辑者能够整体编辑、删除、移动的最小的内容单元。将组件看作一个整体，这样当您打开一个典型的Magnolia CMS页面时，您可以凭这个感觉轻易的找到组件。最简单的组件可能是只有一个标题和相应内容组成的整体。

每个组件都可以用在几个页面和几个区域里。在区域里，编辑者可以从一个列表中选择组件。这个列表仅显示该区域可用的组件，这是在availableComponents节点里定义的。

创建组件定义

textBlock组件是一个非常简单的例子，用来绘制编辑者输入的任何文字。

创建组件脚本

组件脚本绘制组件内容。在我们的示例组件中，内容仅为简单的文字。脚本从内容库中读取文字并绘制出来。

1. 在电脑上打开/<CATALINA_HOME>/webapps/<contextPath>/templates, 通常为/apache-tomcat/webapps/magnoliaAuthor/templates。
2. 新建一个components文件夹。
3. 在components文件夹里新建一个textBlock.ftl文本文件。
4. 用文字编辑器打开这个文件，并拷入以下脚本代码。

FreeMarker:

<p>
   ${content.text!}
</p>

JSP:

<p>
   ${content.text}
</p>

这个脚本会从当前内容对象中绘制text属性的值。在本例中，内容对象不是Hello页面节点，而是组件节点。

创建组件对话框

组件对话框使编辑者能够编辑组件内容。您可以在标准模板套件（STK > 对话框定义 > /components）中找到很多有关组件对话框的示例。

为页面添加组件

现在您已经准备好了为页面添加组件所需的一切：定义好的组件，组件脚本，组件对话框，并且在main区域内可用。

为页面添加组件：

1. 重新加载Hello页。
2. 点击main区域的占位符。
3. 点击工具栏上的加号来添加组件。
4. 选择Text Block组件，并点击OK。
5. 在Component text框里输入文字。
6. 保存。

这样组件就成功在页面上绘制了。

组件同样也有工具栏，点击其所在的区域工具栏就可以看到。

由于主区域是list类型，您可以添加多个组件，试着拖动组件工具栏来改变顺序。

组件内容被存放在website内容库。每个组件都有一个内容节点及其包含的属性，您可以在JCR浏览器中看到。

下一步：激活到公共实例