JeeGit 官方论坛

找回密码
立即注册
搜索
热搜: 活动 交友 discuz
发新帖

1

收听

0

听众

190

主题
发表于 2023-3-6 09:38:14 | 查看: 657| 回复: 0
freeMarker 中宏<#macro >解析

  1. 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



您需要登录后才可以回帖 登录 | 立即注册

QQ|Archiver|手机版|小黑屋|JeeGit 官方论坛 ( 吉ICP备19001578号-2|吉B2-20200006 )

GMT+8, 2024-4-20 02:28 , Processed in 0.029714 second(s), 17 queries .

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

快速回复 返回顶部 返回列表