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

来定制文章内容的时候，仅有的几种页面布局并不能满足我们的需求，所以我们需要开发能够满足特定需求的页面布局。
    我们将开发一个具有下图风格的页面布局，该布局中我们指定了 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 >

    文件中前三行定义的

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

<o:p>   </o:p>

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 中将会显示我们自定义的页面布局名称 <st1:chsdate w:st="on" isrocdate="False" islunardate="False" day="3" month="2" year="2001"> 1-2-3 </st1:chsdate> -2 Columns ，选择该 Template ，然后在页面中添加 Journal Content ，按照我们自定义的布局将 portlet 拖拉到合适的位置，再为每个 Journal Content 指定 Article ，最后就完成了各种风格页面的定制过程。使用这个的方法，我们可以定制各种满足不同需求的页面。

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