來定制文章內(nèi)容的時候，僅有的幾種頁面布局并不能滿足我們的需求，所以我們需要開發(fā)能夠滿足特定需求的頁面布局。
??? 我們將開發(fā)一個具有下圖風(fēng)格的頁面布局，該布局中我們指定了 7 個區(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 >

??? 文件中前三行定義的

??? 我們需要在 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 文件直接增加定義。

<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 >

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

三、定制頁面
????定制好頁面風(fēng)格后，需要重新啟動 TOMCAT ，登陸系統(tǒng)，進(jìn)入 GUEST 頻道，點(diǎn)擊 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 ，最后就完成了各種風(fēng)格頁面的定制過程。使用這個的方法，我們可以定制各種滿足不同需求的頁面。

Liferay Portal學(xué)習(xí)筆記（三）：自定義頁面布局Template