我们将开发一个具有下图风格的页面布局，该布局中我们指定了 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
，最后就完成了各种风格页面的定制过程。使用这个的方法，我们可以定制各种满足不同需求的页面。
