Question

使用FreeMarker，我希望能够在不同的模板中加载不同的样式表或javascript文件。我的问题可能出在我的实施中。

我有一个布局宏，如下所示：

<#macro layout>

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- common javascript and css references here -->
  </head>

  <body>
    <div class="container">

      <!-- header stuff -->

      <#nested>

      <!-- footer stuff -->

    </div>
  </body>
</html>

</#macro>

我在所有这样的模板中使用它：

<!-- "declare" specific css or js here -->
<@layout.layout>

<div id="mapid">

  <!-- use specific css or js -->

</div>

</@layout.layout>

在我的一些模板中，我想使用适用于常见情况的特定样式表或javascript库。对此最好的方法是什么？

我已经尝试将变量传递给布局宏来插入css和js引用，但我发现没有简单的方法来使用#assign分配文本块。

Answer 1

您可以声明嵌套标记并将参数作为参数发送，如下所示：

layout.ftl

<#macro layout>
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- common javascript and css references here -->
    <#nested "styles">
    <#nested "scripts">
  </head>

  <body>
    <div class="container">

      <!-- header stuff -->

      <#nested "content">

      <!-- footer stuff -->

    </div>
  </body>
</html>

</#macro>

然后你可以收到一个参数作为参数并使用if这样：

page.ftl

<@layout.layout; section>
<#if section = "scripts">
     <script src="/js/myscripts/myfile.js"></script>    
</#if>
<#if section = "styles">
    <link rel="stylesheet" href="/css/style.css" /> 
</#if>

<#if section="content">
  <div id="mapid">

  </div>
</#if>

</@layout.layout>

Answer 2

我将布局分为页面开始结束页面结束，并在页面开始时定义嵌套。

page_start.ftl

＆＃13;

<#macro external>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>${title}</title>
    <meta name="keywords" content="${keyword}">
    <meta name="description" content="${description}">

    <link href="https://cdn.insdep.com/themes/1.0.0/easyui.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.insdep.com/themes/1.0.0/easyui_animation.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="https://cdn.insdep.com/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.insdep.com/easyui/jquery.easyui-1.5.1.min.js"></script>

    <#nested >

</head>
<body>

    <#include "global/header.ftl">

    <#include "global/sidebar.ftl">

</#macro>

＆＃13;

page_end.ftl

＆＃13;

<#include "global/footer.ftl">

</body>
</html>

＆＃13;

<#import "page_start.ftl" as page>
<@page.external>
    <link href="https://cdn.insdep.com/themes/1.0.0/easyui_plus.css" rel="stylesheet" type="text/css">
</@page.external>
hello world

<#include "page_end.ftl">

＆＃13;

但我认为，这不是一个非常好的解决方案。

每页使用不同的css或java脚本和freemarker

2 个答案: