母版页

提示

延伸阅读:Sitemesh 就是专注于母版页的一款框架。

母版页技术较为成熟,它的工作原理是一个典型的 装饰器模式 一个启用了装饰器的页面在渲染时,会先渲染目标页面到一个临时的缓冲区。然后会再次渲染母版页,这个时候预先渲染的页面就会被安插到母版页的特定位置上。最后把合成的新页面一同返回给浏览器。

警告

在 Hasor 中一次请求页面过程中,只会有一个母版页生效。因此不支持嵌套的布局模板。如果需要在布局模板中再次提炼公共布局模板,需要做的是将布局模板文件的内容模块化。而不是套用嵌套布局。

默认情况下 Hasor 的母版页能力是关闭的,可以通过配置文件或者环境打开这个功能。在开启这个功能时,最好指明母版页及一般页面的资源文件位置:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <config xmlns="http://www.hasor.net/sechma/main">
  3. <hasor.environmentVar>
  4. <!-- 启用母版页 -->
  5. <HASOR_RESTFUL_LAYOUT>true</HASOR_RESTFUL_LAYOUT>
  6. <!-- 母版页资源文件位置(可选,默认为:/layout) -->
  7. <HASOR_RESTFUL_LAYOUT_PATH>/layout</HASOR_RESTFUL_LAYOUT_PATH>
  8. <!-- 页面资源文件位置(可选,默认为:/templates) -->
  9. <HASOR_RESTFUL_LAYOUT_TEMPLATES>/templates</HASOR_RESTFUL_LAYOUT_TEMPLATES>
  10. </hasor.environmentVar>
  11. </config>

依照上面的默认配置 Web工程的目录结构大致会变成这样:

  1. webapp
  2. layout 母版页(HASOR_RESTFUL_LAYOUT_PATH 环境变量指定)
  3. templates 网站页面(HASOR_RESTFUL_LAYOUT_TEMPLATES 环境变量指定)
  4. control 页面模块(可选,存放页面中重复的模版)
  5. static 静态资源文件(可选,静态资源文件)
  6. WEB-INF web.xml

加页脚

假定网站所有页面都统一加上一个页脚,首先创建母版页并将其保存到/webapp/layout/default.html

  1. <!DOCTYPE html>
  2. <html lang="cn">
  3. <head>
  4. <title>${rootData.pageTitle!}</title>
  5. </head>
  6. <body>
  7. ${content_placeholder!}
  8. <div>this is foot</div>
  9. </body>
  10. </html>

在这个母版页中含有的变量和含义是:

变量名含义
content_placeholder表示的是用户实际访问的目标页面内容
rootData是请求处理器用于保存数据的全局对象,其作用范围是 request

然后创建目标页并将其保存到/webapp/templates/target.html

${rootData.put('pageTitle','首页')}
<p>this page form user</p>

最后启动 Web 容器,访问:http://localhost:8080/target.html 就会看到完整的结果:

<!DOCTYPE html>
<html lang="cn">
    <head>
        <title>首页</title>
    </head>
    <body>
        <p>this page form user</p>
        <div>this is foot</div>
    </body>
</html>