Ken的杂谈
  • Ken的杂谈 (current)
  • 关于
  • 杂谈
    Java Spring Spring Boot Spring Cloud MyBatis C# .NET Core .NET ASP.NET Core ASP.NET ClassLibrary Mono 数据库 MySQL SQL Server 网络 缓存 Web Linux CentOS Ubuntu macOS Windows openEuler Nginx ServiceStack JS/JQ 正则 工具 IDE Grafana Exceptions CI/CD Solution 微服务 Arch Docker 杂谈
  • 系列
    Java 快速入门系列教程 Spring Boot 入门教程 Spring Boot 2.x 入门教程 Spring Cloud 入门教程 .NET Core 快速入门教程 ASP.NET Core 2.1 入门教程 CentOS 7 快速上手教程 Ubuntu快速上手入门教程 Hyper-V基础教程 Docker入门教程
  • GitHub

Freemarker使用技巧:使用自定义宏(Macro)实现母板页(Layout)功能

Web Java Spring Boot @ 2017-09-08 18:35:57 · 阅读:(9570)

一、前言

  • 为什么要使用模板页(Layout)

网站中往往有通用的布局,比如导航、底部等等,这些页面中共用的部分,就需要放在母版页(Layout)里面。
这样每个页面只用关注本页面要完成的功能/内容即可。提高了开发效率,也降低了公共部分的维护成本。

如果你还未使用过Freemarker,可以先阅读:使用Spring Boot+Freemarker模板引擎开发Web应用

二、实现方式

1、Freemarker母版页示例

  • 母版页代码(resources/templates/shared/layout1.ftl)
<#macro layout>
<html>

<head>
    <title>${title} - Layout</title>
</head>

<body>
<div id="content">
    <#nested />
</div>
</body>

</html>
</#macro>

母版页定义macro(id=layout)并在macro中定义 <#nested />标签,子页面引用该模板时,就可以定义macroid同名标签,将内容填充在<#nested />所在位置

2、Freemarker子页面继承示例

  • 子页面代码(resources/templates/demo/page1.ftl)
<#include "../shared/layout1.ftl">

<@layout>
<div>这是子页面内容</div>
</@layout>

3、控制器函数

@RequestMapping("/page1")
ModelAndView page1(){
    ModelAndView mv = new ModelAndView();
    mv.addObject("title","子页面标题");
    mv.setViewName("demo/page1");
    return mv;
}

4、渲染结果



<html>

<head>
    <title>子页面标题 - Layout</title>
</head>

<body>
<div id="content">
<div>这是子页面内容</div>
</div>
</body>

</html>

三、备注

Freemarker语法/标签说明

语法/标签 说明
macro 宏,用于包装Freemarker语句块/片段,可以被引用,在引用页,或者当前页都可以引用
<#macro layout> 指定macroid = layout
<#nested /> 嵌套,在macro标签内部使用,引用该macro时,<@macroid>标签包裹的内容会填充在<#nested />所在的位置
include 引用Freemarker模板文件
<@macroid> 引用macro,例如:<@macroid>,<@macroid>内容</@macroid>

Ken的杂谈

本文由 ken.io 创作,采用CC BY 3.0 CN协议 进行许可。 可自由转载、引用、甚至修改,但需署名作者且注明出处。

Web Java Spring Boot

随笔目录


    © Copyright 2012-2025 Ken的杂谈

    豫ICP备10025012号

    ASP.NET Core(6.0) on Linux