Velocity版面设计

 大多数网站的每个页面布局差别不是太大,除非一些特殊页面例如门户首页等。如果每个页面独立一个文件,则会导致不同文件出现大量相同的代码,我们也可以把这些相同的代码抽取出来放在一个独立的小文件,需要的时候利用Velocity的#parse指令来嵌入到目标页面中。但是此法却对页面上用于控制排版的HTML代码无效,因为控制整个页面排版的代码一般会贯穿整个文件,开头、结尾皆有,无法分拆到独立的文件上,因此就有将页面的layout独立出来的,以减小页面的代码量的需要。

我在用Velocity时一般都是使用Velocity-Tools项目的VelocityViewServlet来负责解析所有Velocity模板的请求,其实VelocityTools也提供另外一个Servlet便是VelocityLayoutServlet,该类直接从VelocityViewServlet继承而来,通过使用VelocityLayoutServlet可以让我们很容易的页面的布局控制模板数据模板分隔开来。欲使用此功能,请遵循以下步骤:

1。使用VelocityLayoutServlet类:原先的VelocityViewServlet直接替换成VelocityLayoutServlet;

2。配制VelocityLayoutServlet:打开velocity.properties增加配制如下:

#  处理错误信息的模板路径 
#  relative to web application root directory
tools.view.servlet.error.template = error.vm

#  所有布局文件的默认路径
#  relative to web application root directory
tools.view.servlet.layout.directory = /WEB-INF/layout/

#  默认的布局文件
#  relative to the layout directory 
#  NOT relative to the root directory of the webapp!
tools.view.servlet.layout.default.template =  default.vm


3。布局测试

编写测试布局文件default.vm放置于上述配置中的默认布局文件存放路径中,内容如下

<html>
<head>
  <title>$!page_title</title>
</head>
<body>
  $screen_content
</body>
</html>


上面源码中$screen_content便是VelocityLayoutServlet保留的关键字,Velocity依此关键字来潜入实际被引用的页面内容,其他变量开发者可以灵活处理。

另编写测试页面test.vm存放于web根目录下,内容如下

#set($page_title="Layout Test")
Hello Velocity Layout!
 


启动服务器,测试该页面输出的HTML内容如下:

<html>
<head>
  <title>Layout Test</title>
</head>
<body>
  Hello Velocity Layout!
</body>
</html>


如此便达到我们预期的效果,如何使用便是听凭各位发落:)

技巧:页面可以通过下面二法决定使用那个布局文件

1. 设置$layout变量的值,例如: #set($layout="layout1.vm")

2. 通过传递layout参数,例如:http://localhost/test.vm?layout=layout1.vm

你可能感兴趣的:(Velocity版面设计)