母版页

提示

延伸阅读：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>