当前位置：首页 > 前端开发 > 正文

怎样轻松将FreeMarker模板转成HTML？

admin
前端开发
2025-06-22
4088

FreeMarker模板(ftl)通过模板引擎加载，绑定数据模型后直接渲染输出为静态HTML文件，核心步骤是数据填充与模板解析转换。

转换原理

FTL是Java模板引擎FreeMarker的模板文件，本身不是HTML，转换本质是通过FreeMarker引擎动态渲染数据生成静态HTML,核心流程：

怎样轻松将FreeMarker模板转成HTML？第1张

graph LR
A[FTL模板] --> B[数据模型 JSON/XML/Java对象]
B --> C[FreeMarker引擎渲染]
C --> D[静态HTML文件]

手动转换方法（无需编程）

步骤1：安装FreeMarker工具

下载FreeMarker命令行工具：官方JAR包

或通过Maven添加依赖：

<dependency>
  <groupId>org.freemarker</groupId>
  <artifactId>freemarker</artifactId>
  <version>2.3.32</version>
</dependency>

步骤2：准备数据模型

创建JSON数据文件（如data.json）：

{
  "user": {
    "name": "张三",
    "email": "contact@example.com"
  }
}

步骤3：执行转换命令

java -jar freemarker.jar 
  --template template.ftl 
  --data data.json 
  --output result.html

代码自动化转换（Java示例）

import freemarker.template.*;
import java.io.*;
public class FtlToHtml {
  public static void main(String[] args) throws Exception {
    // 1. 配置FreeMarker
    Configuration cfg = new Configuration(Configuration.VERSION_2_3_32);
    cfg.setDirectoryForTemplateLoading(new File("/templates"));
    // 2. 加载数据模型
    Object data = new Object() {
      public String title = "示例页面";
      public List<String> items = Arrays.asList("项目1", "项目2");
    };
    // 3. 渲染模板
    Template template = cfg.getTemplate("page.ftl");
    try (Writer writer = new FileWriter("output.html")) {
      template.process(data, writer);
    }
  }
}

前端工程化方案（Webpack/Vite）

使用构建工具插件：

Webpack：配置freemarker-loader

module: {
  rules: [{
    test: /.ftl$/,
    use: [
      { loader: 'html-loader' },
      { 
        loader: 'freemarker-loader',
        options: {
          data: require('./data.json')
        }
      }
    ]
  }]
}

Vite：通过插件vite-plugin-freemarker实现热更新渲染

在线工具快速转换

FreeMarker Online Tester：https://freemarker-online.kulig.org/
1. 左侧粘贴FTL代码
2. 右侧输入JSON数据
3. 实时生成HTML

关键注意事项

特殊字符转义：
- 用<#escape x as x?html>包裹模板，防止XSS攻击
```
<#escape x as x?html>
<div>${userInput}</div>
</#escape>
```
空值处理：
- 使用${variable!}或${variable?default('')}避免渲染中断
性能优化：
- 缓存模板对象（Configuration单例）
- 预编译高频模板（.ftl → .class）

常见问题解决

问题现象	解决方案
变量未渲染	检查数据模型Key是否匹配
特殊符号报错	用`<#ftl output_format="HTML">`声明格式
生成HTML结构错乱	验证FTL标签闭合（如`<#if>`需配`</#if>`）