3.12. 布局

布局可以通过Beetl提供的include,layout 以及模板变量来完成。模板变量能完成复杂的布局

  • 采用layout include
  1.   <%
  2.    //content.html内容如下：
  3.    layout("/inc/layout.html"){ %>
  4.    this is 正文
  5.    ..........
  6.    <% } %>

如上一个子页面将使用layout布局页面，layout 页面内容如下

  1.   <% include("/inc/header.html"){} %>
  2.   this is content:${layoutContent}
  3.   this is footer:

layoutContent 是默认变量，也可以改成其他名字，具体请参考layout标签函数

全局变量总是能被布局用的页面所使用，如果布局页面需要临时变量，则需要显示的传入，如：

  1.   <%
  2.   var user= model.user;
  3.   include("/inc/header.html",{title:'这是一个测试页面',user:user}){} 
  4.   %>

这样，title和user成为全局变量，能被header.html 及其子页面引用到

  • 继承布局：采用模板变量和include
  1.           <%
  2.                   var jsPart = {
  3.           %>
  4.           web页面js部分
  6.           <% }; %>
  8.           <%
  9.                   var htmlPart = {
  10.           %>
  11.           web页面html部分
  13.           <% };
  14.           include("/inc/layout.html",{jsSection:jsPart,htmlSection:htmlPart}){}
  15.           %>
  1.       layout.html页面如下：
  1.           <body>
  2.           <head>
  3.           ${jsSection}
  4.           </head>
  5.           <body>
  6.           .......
  7.           ${htmlSection}
  8.           </body>