Liferay Portal学习笔记（三）：自定义页面布局Template

 Liferay Portal 4.0 为我们提供了几种不同的页面布局，我们可以通过 Add Content 中的 Template参数来指定不同的页面布局，但是，但我们利用 CMS 来定制文章内容的时候，仅有的几种页面布局并不能满足我们的需求，所以我们需要开发能够满足特定需求的页面布局。
    我们将开发一个具有下图风格的页面布局，该布局中我们指定了7个区域来分别装配portlet实现独特的页面风格。

一、编写模板文件
    我们将该页面风格名称定义为1_2_3_2 Columns，在Liferay/html/layouttpl/custom目录下新建1_2_3_2_columns.tpl文件，内容如下：

<div id="layout-content-outer-decoration">
<div id="layout-content-inner-decoration">
    <div id="layout-content-container">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td colspan="3" valign="top">
            $processor.processColumn("column-1")
          </td>
        </tr>
        <tr>
          <td width="79%" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                <td width="26%" valign="top">
                  $processor.processColumn("column-2")
                </td>
<td class="layout-column-spacer" width="1%">
                    <div>&nbsp;</div>
                  </td>
                <td width="26%" valign="top">
                  $processor.processColumn("column-3")
                </td>
                  <td class="layout-column-spacer" width="1%">
                    <div>&nbsp;</div>
                  </td>
                <td width="26%" valign="top">
                  $processor.processColumn("column-4")
                </td>
                </tr>
              </table>
            </td>
          <td class="layout-column-spacer" width="1%">
            <div>&nbsp;</div>
          </td>
          <td width="20%" rowspan="2" valign="top">
            $processor.processColumn("column-5")
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tr>
                <td width="50%" valign="top">
                  $processor.processColumn("column-6")
                </td>
                <td width="50%" valign="top">
                  $processor.processColumn("column-7")
                </td>
              </tr>
            </table>
            </td>
        </tr>
      </table>
    </div>
</div>
</div>

    文件中前三行定义的 <div> 和最后三行 </div> 是固定的模板格式，从第四行开始就是我们需要定制的页面风格的 HTML 格式，我们需要将输出 portlet 区域的 HTML 语句用 $processor.processColumn("column-1") 来替换，“ column-1 ”是该区域的名称，并且每个区域的名字不能重复，这样系统在生成模板的时候会自动生成不同的区域来存放我们指定的 portlet 。

二、编写属性文件

    我们需要在 liferay-layout-templates.xml 文件中配置我们自定义的页面布局文件 1_2_3_2_columns.tpl ，为了和系统自带的布局文件区分开，我们创建扩展文件 liferay-layout-templates-ext.xml ，在该文件中指定我们的页面布局文件，当然也可以在 liferay-layout-templates.xml 文件直接增加定义。

 

liferay-layout-templates-ext.xml ：

 <? xml version = " 1.0 " ?> 
 <! DOCTYPE layout - templates PUBLIC  " -//Liferay//DTD Layout Templates 4.0.0//EN "   " http://www.liferay.com/dtd/liferay-layout-templates_4_0_0.dtd " > 
 
 < layout - templates > 
     < custom > 
         < layout - template id = " 1_2_3_2_columns "  name = " 1-2-3-2 Columns " > 
             < template - path >/ html / layouttpl / custom / 1_2_3_2_columns.tpl </ template - path > 
         </ layout - template > 
     </ custom > 
 </ layout - templates > 

参数 id 定义该 template 的 ID 号， name 定义该 template 在 Add Content 中显示的名称， template-path 定义该 template 的路径名。

三、定制页面
    定制好页面风格后，需要重新启动TOMCAT，登陆系统，进入GUEST频道，点击Add Content ，在Template中将会显示我们自定义的页面布局名称1-2-3-2 Columns，选择该Template，然后在页面中添加Journal Content，按照我们自定义的布局将portlet拖拉到合适的位置，再为每个Journal Content指定Article，最后就完成了各种风格页面的定制过程。使用这个的方法，我们可以定制各种满足不同需求的页面。