博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用 jetbrick-template 来实现 HTML layout 功能
阅读量:5942 次
发布时间:2019-06-19

本文共 2066 字,大约阅读时间需要 6 分钟。

  hot3.png

1 在 jetbrick-template 中如何实现 layout 功能

通常页面都有一个布局,大体上有页面头部,尾部,以及正文三部分。头部和尾部内容基本上固定,只有正文是变化的。

jetbrick-template 可以使用 3 种方法实现模板的 layout 功能。

  1. #include(file, ...) 指令

  2. #tag layout(file, ...) 标签

  3. #tag block(name) + #inlcude(file, ...) 组合

1.1 常规模式

我们将页面公共部分放在 include 文件中,然后在每个页面中应用 include 文件来实现内容共享。

main.jetx

#include("/include/header.jetx")这是正文内容#include("/include/footer.jetx")

这个不算 layout?

呵呵,继续放下看。

1.2 变种模式

常规模式中,只是共享了一些公共内容,但是并没有实现真正的 layout,因为 layout 一变,include 的方式可能就会发生变化,这样所有文件都要重新 include,不是很方便。

下面就是 #include 模式的变种(动态 include),来实现真正的 layout。

layout.jetx

      ${title}        
This is a logo image.    #include(parameter.pageUrl)    
Copyright @2000-2010, All Rights Reserved.  

main.jetx

    这是正文内容  

Action.java

String url = "/layout.jetx?pageUrl=" + URLEncoder.encode("/main.jetx", "utf-8);RequestDispatcher rd = getServletContext().getRequestDispatcher(url);rd.forward(request, response);

怎么样?通过一个 pageUrl 参数来达到动态 layout 的目的,这样我们以后只要修改layout.jetx 文件就能达到修改所有页面布局了。

URL 访问方法:

1.3 #tag layout(file, ...)

这里再介绍一种采用 layout 自定义标签来实现。

layout.jetx

      ${title}        
This is a logo image.    ${bodyContent}    
Copyright @2000-2010, All Rights Reserved.  

main.jetx

#tag layout("layout.jetx") 
    这是正文内容  
#end

layout 标签允许指定一个 layout 模板文件,在渲染页面的时候,会将layout标签体的渲染内容作为一个 bodyContent 变量插入到 layout 指定模板文件里。

这样,我们就可以通过直接访问

1.4 组合 #tag block() + #inlcude

上面的 #tag layout() 标签只能嵌入一块自定义的内容 ${bodyContent},那么如果想要嵌入多个自定义的变量块呢?

main.jetx

#tag block("bodyContent1")    BODY 1111#end#tag block("bodyContent2")    BODY 2222#end#include ("layout.jetx")

layout.jetx

This is a header.
    ${bodyContent1}
    ${bodyContent2}
This is a footer.

输出结果:

This is a header.
    BODY 1111
    BODY 2222
This is a footer.

怎么样?现在就可以随意的进行组合了。

1.5 总结

不管采用哪种方式,jetbrick-template 都提供很大的灵活性来实现页面布局功能。

其中自定义 #tag 标签机制提供了非常强大功能,很容易实现其他模板引擎难以实现的功能,比如像 JSP Taglib 一样实现自定义标签,如 Cache Tag 将内容缓存到 memecached/redis 的标签等等。

转载于:https://my.oschina.net/sub/blog/181943

你可能感兴趣的文章
阿里云服务器ECS开放8080端口
查看>>
前端常用排序详解
查看>>
Spring中实现监听的方法
查看>>
使用Tooltip会出现一个问题,如果行上出现复选框
查看>>
11.03T1 DP
查看>>
P2924 [USACO08DEC]大栅栏Largest Fence
查看>>
jQuery操作table tr td
查看>>
工作总结:MFC自写排序算法(升序)
查看>>
螺旋队列问题之二
查看>>
扩展运算符和解构赋值的理解
查看>>
手机H5显示一像素的细线
查看>>
Menu 菜单栏
查看>>
Integer跟int的区别(备份回忆)
查看>>
集合解析
查看>>
详解分布式应用程序协调服务Zookeeper
查看>>
软件工程之构建之法
查看>>
UVa 10902
查看>>
Mathf.Sin正弦
查看>>
禁止浏览器缓存js
查看>>
【Redis】安装PHP的redis驱动(二)
查看>>