本教程有以下几个步骤：

页面是通过叫区域的小元素组合在一起的。区域是可以控制的构件，在生成的HTML里绘制为div元素。区域使对页面布局和在区域里摆放的内容进行精准的控制成为可能。

区域有三种类型，定义了编辑者可以在此区域内添加多少组件。

  • single区域只能包含一个组件
  • list区域可以包含多个组件
  • noComponent不能包含任何编辑者添加的组件。系统会自动为其创建组件。

您可以命名您的区域，但有一些惯例可供参考。main区域通常被用来存放主要内容。例如，在一个新闻页，实际的新闻故事就会出现在main区域。其他页面组件，例如页眉，页脚，以及导航，就会放在它们自己的区域里。


创建区域定义

区域可以在网站定义里设置为在整个网站内通用，也可以在每个页面模板的模板定义里定义。

节点名

值

 
modules

 

 
templating

 

 
templates

 

 
pages

 

 
helloWorld

 

 
areas

 

 
main

 

 
templateScript

/templates/areas/mainArea.ftl

 
type

list

属性：

  • main: 区域名称
    • type: 将值设为list。这样就会创建一个列表类型的区域，您可以添加多个组件。
    • templateScript: 将值设为/templates/areas/mainArea.ftl。 这是指向区域脚本的路径，待会将会编写这个脚本。

使组件在区域内可用

每个区域可以定义自身区域内什么样的组件可用。为此，您可以创建一个组件列表，包含编辑者可以在区域里添加的组件。可用性是非常重要的控制机制，使您能够比较细致的控制页面一致性。通过控制编辑者能够添加的组件类型和位置，保证了该页面的信息结构不会失去章法。

系统自动生成组件选择对话框。当编辑者选择一个组件时，这个组件自身的对话框就会出现。

在本例中，我们使一个文字块组件在这个区域可见。待会将会配置这个组件。

节点名

值

 
modules

 

 
templating

 

 
templates

 

 
pages

 

 
helloWorld

 

 
areas

 

 
main

 

 
availableComponents

 

 
textBlock

 

 
id

templating:components/textBlock

 
templateScript

/templates/areas/mainArea.ftl

 
type

list

id属性跟上文的dialog属性工作原理相同，用来寻找组件定义的位置。冒号前的部分是组件定义所存放的模块文件夹名，后半部分是相对路径。

<module name>:<relative path to component>

在这里，组件将会在模板工具模块中定义，所以前半部分是templating。相对路径由components文件夹开始，之后是指向组件内容节点的路径。由于textBlock组件定义将会直接存在components文件夹里，这个路径就是components/textBlock。

templating:components/textBlock

在页面脚本中绘制区域

在页面脚本里绘制main区域：

  1. 编辑页面脚本。
  2. 在body元素中添加cms.area标签符。
  3. 填入区域名，区域名应该在name参数中绘制。这里的区域就是main。

FreeMarker:

<html>
   <head>
      [@cms.init /]
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>${content.title!}</title>
   </head>
   <body>
      <h1>${content.title!}</h1>
      <p>${content.text!}</p>
      [@cms.area name="main" /]
   </body>
</html>

JSP:

<%@ taglib prefix="cms" uri="http://magnolia-cms.com/taglib/templating-components/cms" %>
<html>
    <head>
        <cms:init/>
        <title>${content.title}!</title>
    </head>
    <body>
        <h1>${content.title}</h1>
        <p>${content.text}</p>
        <cms:area name="main" />
    </body>
</html>

这就指明让脚本绘制main区域。目前还没有东西可以绘制，所以我们需要一个区域脚本。

创建区域脚本

和页面一样，区域也有自己的脚本。区域脚本的主要目的就是在区域内生成组件。

  1. 在电脑上打开/<CATALINA_HOME>/webapps/<contextPath>/templates, 通常即/apache-tomcat/webapps/magnoliaAuthor/templates。
  2. 新建一个areas文件夹。
  3. 在areas里，创建一个文本文件mainArea.ftl，并将以下脚本代码粘贴进去。

FreeMarker:

<div id="main">
[#list components as component ]
   [@cms.component content=component /]
[/#list]
</div>

JSP:

<%@ taglib prefix="cms" uri="http://magnolia-cms.com/taglib/templating-components/cms" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div id="main">
    <c:forEach items="${components}" var="component">
        <cms:component content="${component}" />
    </c:forEach>
</div>

该脚本包含两个新的标签：

  • list是一个FreeMarker指针，对一个集合求值。在这里，区域里是组件的一个集合。在list里定义的任何操作都将会为集合的每项执行。
  • cms.component绘制内容。content参数决定内容是什么，在这里为该区域内的一个组件。

如果您只是想在区域里绘制组件，那就根本不需要区域脚本！单独的区域定义就足够了。然而，如果您想要绘制定制的HTML，如本例中的div元素，就需要编写区域脚本了。

保存区域脚本并刷新Hello页。现在该页就有一个main区域了。区域工具栏显示该区域的名字。区域同样也有结束标记，位于底部，是一个绿色的横条，帮助您看到这个区域的尺寸。中间是为组件准备的灰色占位符。由于我们还没有定义组件，文字块组件还不能添加到这个区域。让我们接下来就定义组件吧。

下一步：创建组件

  • No labels