2.12 自定义布局

About 297 wordsLess than 1 minute

2021-03-27

2.12 自定义布局

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

采用layout include
```
  <%
   //content.html内容如下：
   layout("/inc/layout.html"){ %>
   this is 正文
   ..........
   <% } %>
```
如上一个子页面将使用layout布局页面，layout 页面内容如下
```
  <% include("/inc/header.html"){} %>
  this is content:${layoutContent}
  this is footer:
```
layoutContent 是默认变量，也可以改成其他名字，具体请参考layout标签函数
全局变量总是能被布局用的页面所使用，如果布局页面需要临时变量，则需要显示的传入，如：
```
  <%
  var user= model.user;
  include("/inc/header.html",{title:'这是一个测试页面',user:user}){} 
  %>
```
这样，title和user成为全局变量，能被header.html 及其子页面引用到

继承布局：采用模板变量和include

<%
var jsPart = {
%>
web页面js部分

<% }; %>

<%
var htmlPart = {
%>
web页面html部分

<% };
include("/inc/layout.html",{jsSection:jsPart,htmlSection:htmlPart}){}
%>

layout.html页面如下：

```html
<body>
<head>
${jsSection}
</head>
<body>
.......
${htmlSection}
</body>
```

include, includeUrl,includeJSP,还有includeFragement都是Beetl提供的include系列标签函数，includeUrl,includeJSP考虑到需要WEB环境，并没有内置，需要手工注册，参考IncludeJSPTag.java,IncludeUrlTag.java