|
Liferay Portal 4.0 為我們提供了幾種不同的頁面布局，我們可以通過 Add Content 中的 Template 參數(shù)來指定不同的頁面布局，但是，但我們利用 CMS 來定制文章內(nèi)容的時候，僅有的幾種頁面布局并不能滿足我們的需求，所以我們需要開發(fā)能夠滿足特定需求的頁面布局。
我們將開發(fā)一個具有下圖風(fēng)格的頁面布局，該布局中我們指定了7個區(qū)域來分別裝配portlet實現(xiàn)獨特的頁面風(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> </div> </td> <td width="26%" valign="top"> $processor.processColumn("column-3") </td> <td class="layout-column-spacer" width="1%"> <div> </div> </td> <td width="26%" valign="top"> $processor.processColumn("column-4") </td> </tr> </table> </td> <td class="layout-column-spacer" width="1%"> <div> </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ū)域的名稱，并且每個區(qū)域的名字不能重復(fù)，這樣系統(tǒng)在生成模板的時候會自動生成不同的區(qū)域來存放我們指定的 portlet 。 我們需要在 liferay-layout-templates.xml 文件中配置我們自定義的頁面布局文件 1_2_3_2_columns.tpl ，為了和系統(tǒng)自帶的布局文件區(qū)分開，我們創(chuàng)建擴展文件 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 號， name 定義該 template 在 Add Content 中顯示的名稱， template-path 定義該 template 的路徑名。
|
|
|
