freemarker使用macro创建母版继承

在使用 freemarker 开发过程中，每个页面都需要些一些相同的代码，如header中的设置网页缓存，引入公共css样式，当然我们可以通过copy来快速编写页面。

这种方式有一个很大缺点，如果我需要修改公共css样式的名字或者我想加入一个js文件，并且这个js需要所有页面都引入的时候，麻烦就来了，只能一个一个的修改网页代码，那么有没有办法解决这个问题？

有两种方式解决这个问题：

1.将公共的代码写入单独的模板文件中，然后使用incloud导入命令在每次使用的时候导入，类似下面的代码

common_footer.html

<div class="footer">这个是页脚我是每个页面都用的</div>

index.html

<html>
    <head>
        <#include "common_header.html">
    </head>
    <body>
        <#include "common_footer.html">
    </body>
</html>

2.使用macro命令创建自定义指令，实现母版的功能

首先建立一个母版文件layout_public.html

<#macro header title="这是默认页面">
<html>
    <head>
        <title>${title}</title> 
    <#nested>
    </head>
    <body>
</#macro>
<#macro app>
    <div id="app">
    <#nested>
    </div>
</#macro>
<#macro footer>
    <#include "common_footer.html">
    <#nested>
     </body>
</html>
</#macro>

index.html页面这样写

<#include "layout_public.html">
<@header title="这是首页">
<style>
.index-demo {
    color: red;
}
</style>
</@header>
<@app>
<div class="index-demo">这是index.html中的内容</div>
</@app>
<@footer>
<script>
    console.log('这是index页面的脚本, <@footer></@footer>里面可以没有任何东西')
</script>
</@footer>

可以看出，如果我们采用方式一，同样每个页面需要导入，而采用macro的方式则使用“继承”的方式，只需要指定使用的哪个母版即可，在我们自定义标签中加入的内容并不会覆盖母版中的内容，所以我们可以对每个页面做出相应的处理。

虽然无法做到想SPA那样完全的无重复代码，但是比直接copy代码更加方便了

Freemarker使用macro实现母版功能