FTL模板中引用文件的路径问题

      FTL模板存放在Web服务器上，看上去像是静态的HTML页面。但不管何时，只要有人来访问这个页面，FreeMarker将会介入执行，然后动态转换模板，用最新的数据内容替换模板中插值的部分。

     此处不涉及后台代码及配置，只浅谈在模板开发过程中引用JS、CSS以及引用其它模板文件的路径。

JS、CSS、图片的路径

     在ftl模板中引用js/css/图片引用方法和普通的HTML页面方法一样，只是在使用绝对路径引用文件时，为了方便需要使用ftl指令创建变量储存项目根目录。步骤如下：

1、用ftl指令声明一个全局变量来储存当前项目名称，如下：

<#assign basePath="/test-ftl">

      assign是Freemarker中创建变量的指令，此处我们调用assign创建了一个名为basePath的变量，在模板中我们可以通过${basePath}来取得变量的值。

2、使用html标签引用js、css文件

使用include指令引用其他文件的路径

     在ftl文件中如果需要引用其他的模板文件，此时引用路径与我们在jsp页面中使用include引用文件路径不一样。这是由ftl指令include对路径的理解不同造成的。

     ftl的include指令不理解我们在引用js、css的路径。假设我们当前开发的模板是indexView.ftl  ,我们需要使用include来引入位于common目录下的taglib.ftl文件，路径这样写是会报错的。

<#include "${basePath}/view/common/taglib.ftl" >

<#include "../../view/common/taglib.ftl" >

下面结合项目目录，来解释一下ftl中include对路径的理解。项目目录如下图：

图1：项目目录

在indexView.ftl中引用taglib.ftl

       <#include "common/taglib.ftl">表示indexView.ftl所在目录下的common目录中的taglib.ftl文件。