??? 我們將開發一個具有下圖風格的頁面布局，該布局中我們指定了 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
，最后就完成了各種風格頁面的定制過程。使用這個的方法，我們可以定制各種滿足不同需求的頁面。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
