??? 我們將開(kāi)發(fā)一個(gè)具有下圖風(fēng)格的頁(yè)面布局，該布局中我們指定了 7 個(gè)區(qū)域來(lái)分別裝配 portlet 實(shí)現(xiàn)獨(dú)特的頁(yè)面風(fēng)格。
一、編寫模板文件
??? 我們將該頁(yè)面風(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 文件中配置我們自定義的頁(yè)面布局文件 1_2_3_2_columns.tpl ，為了和系統(tǒng)自帶的布局文件區(qū)分開(kāi)，我們創(chuàng)建擴(kuò)展文件 liferay-layout-templates-ext.xml ，在該文件中指定我們的頁(yè)面布局文件，當(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 號(hào)， name 定義該 template 在 Add Content 中顯示的名稱， template-path 定義該 template 的路徑名。
三、定制頁(yè)面
????定制好頁(yè)面風(fēng)格后，需要重新啟動(dòng)
TOMCAT
，登陸系統(tǒng)，進(jìn)入
GUEST
頻道，點(diǎn)擊
Add Content
，在
Template
中將會(huì)顯示我們自定義的頁(yè)面布局名稱
<st1:chsdate w:st="on" isrocdate="False" islunardate="False" day="3" month="2" year="2001">
1-2-3
</st1:chsdate>
-2 Columns
，選擇該
Template
，然后在頁(yè)面中添加
Journal Content
，按照我們自定義的布局將
portlet
拖拉到合適的位置，再為每個(gè)
Journal Content
指定
Article
，最后就完成了各種風(fēng)格頁(yè)面的定制過(guò)程。使用這個(gè)的方法，我們可以定制各種滿足不同需求的頁(yè)面。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
