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文件
<link href="${basePath}/static/css/demo.css" rel="stylesheet"/>
<script src="${basePath}/static/js/demo.js"></script>
使用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对路径的理解。项目目录如下图:
在indexView.ftl中引用taglib.ftl
<#include "common/taglib.ftl">表示indexView.ftl所在目录下的common目录中的taglib.ftl文件。