posts - 12, comments - 19, trackbacks - 0, articles - 23
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理
 Liferay Portal 4.0 为我们提供了几种不同的页面布局,我们可以通过Add Content中的Template参数来指定不同的页面布局,但是,但我们利用CMS来定制文章内容的时候,仅有的几种页面布局并不能满足我们的需求,所以我们需要开发能够满足特定需求的页面布局。
    我们将开发一个具有下图风格的页面布局,该布局中我们指定了7个区域来分别装配portlet实现独特的页面风格。
1.JPG
一、编写模板文件
    我们将该页面风格名称定义为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>

    文件中前三行定义的<div>和最后三行</div>是固定的模板格式,从第四行开始就是我们需要定制的页面风格的HTML格式,我们需要将输出portlet区域的HTML语句用$processor.processColumn("column-1")来替换,“column-1”是该区域的名称,并且每个区域的名字不能重复,这样系统在生成模板的时候会自动生成不同的区域来存放我们指定的portlet

二、编写属性文件

    我们需要在liferay-layout-templates.xml文件中配置我们自定义的页面布局文件1_2_3_2_columns.tpl,为了和系统自带的布局文件区分开,我们创建扩展文件liferay-layout-templates-ext.xml,在该文件中指定我们的页面布局文件,当然也可以在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.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定义该templateID号,name定义该templateAdd Content中显示的名称,template-path定义该template的路径名。


三、定制页面
    定制好页面风格后,需要重新启动TOMCAT,登陆系统,进入GUEST频道,点击Add Content ,在Template中将会显示我们自定义的页面布局名称1-2-3-2 Columns,选择该Template,然后在页面中添加Journal Content,按照我们自定义的布局将portlet拖拉到合适的位置,再为每个Journal Content指定Article,最后就完成了各种风格页面的定制过程。使用这个的方法,我们可以定制各种满足不同需求的页面。


只有注册用户登录后才能发表评论。


网站导航: