我正在尝试为具有多级嵌套的页面设计结构,有些事情如下:
[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>
我感谢任何帮助和反馈。
答案 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 />