來定制文章內(nèi)容的時(shí)候，僅有的幾種頁面布局并不能滿足我們的需求，所以我們需要開發(fā)能夠滿足特定需求的頁面布局。
    我們將開發(fā)一個(gè)具有下圖風(fēng)格的頁面布局，該布局中我們指定了7個(gè)區(qū)域來分別裝配portlet實(shí)現(xiàn)獨(dú)特的頁面風(fēng)格。

一、編寫模板文件
    我們將該頁面風(fēng)格名稱定義為1_2_3_2 Columns，在Liferay/html/layouttpl/custom目錄下新建1_2_3_2_columns.tpl文件，內(nèi)容如下：

<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> 是固定的模板格式，從第四行開始就是我們需要定制的頁面風(fēng)格的 HTML 格式，我們需要將輸出 portlet 區(qū)域的 HTML 語句用 $processor.processColumn("column-1") 來替換，“ column-1 ”是該區(qū)域的名稱，并且每個(gè)區(qū)域的名字不能重復(fù)，這樣系統(tǒng)在生成模板的時(shí)候會(huì)自動(dòng)生成不同的區(qū)域來存放我們指定的 portlet 。

二、編寫屬性文件

    我們需要在 liferay-layout-templates.xml 文件中配置我們自定義的頁面布局文件 1_2_3_2_columns.tpl ，為了和系統(tǒng)自帶的布局文件區(qū)分開，我們創(chuàng)建擴(kuò)展文件 liferay-layout-templates-ext.xml ，在該文件中指定我們的頁面布局文件，當(dāng)然也可以在 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./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 >

參數(shù) id 定義該 template 的 ID 號(hào)， name 定義該 template 在 Add Content 中顯示的名稱， template-path 定義該 template 的路徑名。

三、定制頁面
    定制好頁面風(fēng)格后，需要重新啟動(dòng)TOMCAT，登陸系統(tǒng)，進(jìn)入GUEST頻道，點(diǎn)擊Add Content ，在Template中將會(huì)顯示我們自定義的頁面布局名稱1-2-3-2 Columns，選擇該Template，然后在頁面中添加Journal Content，按照我們自定義的布局將portlet拖拉到合適的位置，再為每個(gè)Journal Content指定Article，最后就完成了各種風(fēng)格頁面的定制過程。使用這個(gè)的方法，我們可以定制各種滿足不同需求的頁面