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