自定义 Layout Template

lyn1984

Liferay Portal 5.2.3 为我们提供了 10 种不同的页面布局，我们可以通过Layout Template选择不同的Layout ，或者 Add Content 中的 Template 参数来指定不同的页面布局，但是，但我们利用 CMS 来定制文章内容的时候，仅有的几种页面布局并不能满足我们的需求，所以我们需要开发能够满足特定需求的页面布局。
--------------------------------------
我们将开发一个指定了7个区域来分别装配portlet实现独特的页面风格。
一、编写模板文件
    我们将该页面风格名称定义为1_2_3_2 Columns，在Liferay/html/layouttpl/custom目录下新建1_2_3_2_columns.tpl文件，内容如下：
view plaincopy to clipboardprint?
<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 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>
解释：
文件中
前三行定义的 和
最后三行 是 固定的模板格式，
从第四行开始 就是 我们需要定制的页面风格的 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 ：
view plaincopy to clipboardprint?
<?xml version="1.0"?>  
<!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 5.2.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_5_2_0.dtd">  
<layout-templates>  
     <custom>   
         <layout-template id="1_2_3_2_columns" name="1-2-3-2 Columns">  
             <template-path>/layouttpl/custom/custom/1_2_3_2_columns.tpl</template-path>  
             <thumbnail-path>/layouttpl/custom/1_2_3_2_columns.png</thumbnail-path>  
     </custom>   
</layout-templates>   
<?xml version="1.0"?>
<!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 5.2.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_5_2_0.dtd">
<layout-templates>
     <custom>
         <layout-template id="1_2_3_2_columns" name="1-2-3-2 Columns">
             <template-path>/layouttpl/custom/custom/1_2_3_2_columns.tpl</template-path>
             <thumbnail-path>/layouttpl/custom/1_2_3_2_columns.png</thumbnail-path>
     </custom>
</layout-templates>  
参数 id 定义该 template 的 ID 号， name 定义该 template 在 Add Content 中显示的名称， template-path 定义该 template 的路径名。
三、定制页面
    定制好页面风格后，需要重新启动TOMCAT，登陆系统，进入GUEST频道，点击Layout Template，在Template中将会显示我们自定义的页面布局名称。当然，要看到缩略图，你必须要添加图片进去。（详情在上一篇博文）

lyn1984

遨豪一直专注于Liferay门户本地化服务,致力于为中国用户提供最佳的Liferay门户解决方案，其主要服务包括：
1. Liferay门户二次开发服务（基于客户需求）
2. Liferay门户技术支持服务 （现场+远程）
3. Liferay门户定制培训服务 （现场+远程）
4. Liferay门户企业版服务  （专业技术支持）
--------------------------------------------------------------------------------------------------
遨豪(大连)科技有限公司
Liferay 中国合作伙伴
-------------------------------------
市场部: Mr.Luo
-------------------------------------
电话:411-8405-2127
传真:411-8489-8263
MSN: liferayjw@hotmail.com
QQ:  1209462980
-------------------------------------
地址：大连高新技术产业园区
-------------------------------------