如何将变量传递给父父模板

时间:2014-03-01 04:28:48

标签: freemarker

我正在尝试为具有多级嵌套的页面设计结构,有些事情如下:

[base-template]

      ||
      \/

[layout-template]

      ||
      \/

[page-template]

base-template是我用来实现页面骨架的主模板,我有一些特定于布局的html,它是在layout-template中实现的。 (每个布局都有一些JavaScript和CSS文件) 然后在每个页面中我导入一个合适的布局,然后每个页面都有自己的CSS和JavaScript文件。

我需要在每个布局和页面中设置所需的css / js文件,基本模板应该将css文件添加到head和js文件到body。我试图通过使用宏来实现这一点,但无法得到我需要的东西。

以下是解释用例的示例:

[碱基模板]

<#macro skeleton>
  <!DOCTYPE html>
    ...
    ...css files...
    <get some more css>
    ...
    <#nested>
    ...js files...
    <get some more js>
  </html>
</#macro>

[布局模板]

<#import "base.ftl" as template>
<set some more css for layout>
<set some more js for layout>
<#macro layout>
  <@template.skeleton>
    <div>
      ... some html in layout ...
      <#nested>
      ... some html in layout ...
    </div>
  </@template.skeleton>
</#macro>

[页面模板]

<#import "layout.ftl" as template>
<set some more css for page>
<set some more js for page>
<#macro layout>
  <@template.layout>
    <div>
      ... some html for a page ...
    </div>
  </@template.layout>
</#macro>

我感谢任何帮助和反馈。

2 个答案:

答案 0 :(得分:3)

它不漂亮,但你可以做这样的事情。创建要添加的文件序列。在所需模板中连接其他文件。然后拆分此列表并添加文件。

如果不需要其他文件,对pageLayout的调用可以省略脚本或样式参数。如果模板不需要其他文件,那么只需传递脚本而不连接任何内容(scripts = scripts)。

如果要处理来自不同位置的css和js文件,则需要修改示例。

编辑使用序列代替csv

<@pageLayout scripts=["a", "b"]>
    <div>
        bah blah blah
    </div>
</@pageLayout>

<#macro pageLayout scripts=[] styles=[]>
    <@layout scripts=scripts+["pag-a", "pag-b"] styles=styles+["pag-A", "pag-B"]>
        <div>
            Start of pageLayout
            <#nested>
            End of pageLayout
        </div>
    </@layout>
</#macro>

<#macro layout scripts styles>
    <@skeleton scripts=scripts+["lay-a", "lay-b"] styles=styles+["lay-A", "lay-B"]>
        <div>
            Start of layout
            <#nested>
            End of layout
        </div>
    </@skeleton>
</#macro>

<#macro skeleton scripts styles>
    <!DOCTYPE html>
    <html>
        <head>
            <#list (styles+["skel-A", "skel-B"]) as style>
                <link rel="stylesheet" href="/styles/${style}.css">
            </#list>
            <#list (scripts+["skel-a", "skel-b"]) as script>
                <script src="/scripts/${script}.js"></script>
            </#list>
        </head>
        <body>
            Start of skeleton
            <#nested>
            End of skeleton
        </body>
    </html>
</#macro>

输出

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" href="/styles/pag-A.css">
        <link rel="stylesheet" href="/styles/pag-B.css">
        <link rel="stylesheet" href="/styles/lay-A.css">
        <link rel="stylesheet" href="/styles/lay-B.css">
        <link rel="stylesheet" href="/styles/skel-A.css">
        <link rel="stylesheet" href="/styles/skel-B.css">
        <script src="/scripts/a.js"></script>
        <script src="/scripts/b.js"></script>
        <script src="/scripts/pag-a.js"></script>
        <script src="/scripts/pag-b.js"></script>
        <script src="/scripts/lay-a.js"></script>
        <script src="/scripts/lay-b.js"></script>
        <script src="/scripts/skel-a.js"></script>
        <script src="/scripts/skel-b.js"></script>
    </head>
    <body>
        Start of skeleton
    <div>
        Start of layout
    <div>
        Start of pageLayout
<div>
    bah blah blah
</div>
        End of pageLayout
    </div>
        End of layout
    </div>
        End of skeleton
    </body>
</html>

答案 1 :(得分:0)

一种方法是传递脚本和样式表的列表,如Goose所示。另一个是定义这样的宏:

<#macro registerScripts scripts...>
  <#if !registered_scripts??>
    <#assign registered_scripts = scripts>
  <#else>
    <#assign registered_scripts = scripts + registered_scripts>
  </#if>
</#macro>

<#macro insertScripts>
  <#list registered_scripts as script>
    <script src="/scripts/${script}.js"></script>
  </#list>
</#macro>

说,您#import上面的模板为template。然后你在问题中说<set some more js for layout>,你会这样做:

<@template.registerScripts 'foo', 'bar' />

然后在base-template中插入脚本:

<@template.insertScripts />