freeMarker 中宏<#macro >解析
- https://blog.csdn.net/qq_27009517/article/details/121951128
复制代码
用户定义指令-使用@符合来调用
有两种不同的类型:Macro(宏)和transform(传递器),Macro是在模板中使用macro指令定义,而transform是在模板外由程序定义(基本上都是基于Java的),这里通过Macro来介绍自定义指令。 1:在介绍宏<#macro >之前我们先了解一下html中<meta>标签:1.1、name= viewport<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
属性解析:
1、width : 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)
2、height : 和width相对应,指定高度
3、initial-scale : 初始缩放比例,页面第一次加载时的缩放比例
4、maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0
5、minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0
6、user-scalable : 用户是否可以手动缩放,值可以是:①yes、 true允许用户缩放;②no、false不允许用户缩放 1.2、meta中的name属性
<meta name="Generator" content="">
<!--向搜索引擎说明你的网页的关键词-->
<meta name="Keywords" content="">
<!-- 告诉搜索引擎你的站点的主要内容-->
<meta name="Description" content="">
1.3、html中更多的meta与link的使用
<!DOCTYPE html> <!-- HTML5 doctype 不区分大小写 -->
<html lang="zh"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<meta charset="UTF-8">
<!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no">
<meta name="description" content="" /> <!-- 页面描述 -->
<meta name="keywords" content=""/> <!-- 页面关键词 -->
<title>页面标题</title>
<link rel="icon" type="image/ico" href="/favicon.ico" />:网页ico图标设置;
</head>
2、宏是有一个变量名的模板片段。你可以在模板中使用宏作为自定义指令,这样就能进行重复性的工作。2.1、简单使用宏的解析
<#macro greet>
<font size="+2">Hello Joe!</font>
</#macro>
macro指令自身不打印任何内容,它只是用来创建宏变量,所以就会有一个名为greet的变量。在<#macro greet>和</#macro>之间的内容(称为宏定义体)当使用它作为指令时将会被执行。你可以在FTL标记中通过@代替#来使用自定义指令。使用变量名作为指令名。而且,自定义指令的结束标记也是需要的。
<@greet></@greet>
或者
<@greet/>
输出结果: <font size="+2">Hello Joe!</font>
2.2、嵌套macro内容:自定义指令可以嵌套内容,例:
创建public.ftl文件;用于存放各个公共宏macro
<#--公共顶部-->
<#macro header title="默认文字" keywords="默认文字" description="默认文字">
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<meta name="format-detection" content="telephone=no" />
<title>${title}</title>
<meta name="keywords" content="${keywords}" />
<meta name="description" content="${description}" />
<link rel="stylesheet" type='text/css' href="/static/style/common.css"/>
<#nested>
</head>
<body>
</#macro>
<#--公共底部-->
<#macro footer>
<script type="text/javascript" src="/static/js/common.js"></script>
<#nested>
</body>
</html>
</#macro>
示例页面about.ftl,并此页面中使用宏macro
<#include "/include/public.ftl">
<@header title="公司简介" keywords="公司简介2" description="公司简介3">
<link rel="stylesheet" type='text/css' href="/static/style/about.css"/>
<style type="text/css">
body{background:#fff}
.pub-title{margin-bottom:0;padding-bottom:15px}
.pub-con p{color:#555;line-height:30px;padding:0 30px}
</style>
</@header>
<div class="pub-con">
<p>
FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用
</p>
</div>
<@footer>
<script type="text/javascript" src="/static/js/about.js"></script>
</@footer>
结果实例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<meta name="format-detection" content="telephone=no" />
<title>公司简介</title>
<meta name="keywords" content="公司简介2" />
<meta name="description" content="公司简介3" />
<link rel="stylesheet" type='text/css' href="/static/style/common.css"/>
<link rel="stylesheet" type='text/css' href="/static/style/about.css"/>
<style type="text/css">
body{background:#fff}
.pub-title{margin-bottom:0;padding-bottom:15px}
.pub-con p{color:#555;line-height:30px;padding:0 30px}
</style>
</head>
<body>
<div class="pub-con">
<p>
FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用FreeMarker宏macro的使用
</p>
</div>
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/about.js"></script>
</body>
</html>
2.3自定义宏的使用:
<#macro head>
<#assign layout_title>
<#nested />
</#assign>
</#macro>
<#macro body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${layout_title}</title>
<link rel="icon" href="/img/logo_16.png" type="image/x-icon">
<link rel="shortcut icon" href="/img/logo_16.png" type="image/x-icon">
<script>
var API_HOST_URL = "${API_HOST_URL!'http://www。hao123.com'}";
</script>
</head>
<body id="pageBody">
<#include "head.ftl"/>
<#nested >
</body>
</html>
</#macro>
<@head>账号信息</@head> 一个页面,检索按钮和信息展示表格分开。
每个tab都是button/input+表格, input有几十个,所有要复用,需要用到freemarker。
|