blog

网站html页面之前是使用的thymeleaf模板引擎, 最近使用了freemarker进行替换.

功能还是很相似的, 类比一下

thymeleaf

templates/common/layout/default.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
	...
</head>
<body>
	
<header th:replace="~{common/fragments/header :: header}">
</header>
	
<div class="tm-container">
    <section layout:fragment="tm-content">
		...
    </section>
</div>
	
<footer th:replace="~{common/fragments/footer :: footer}">
</footer>

</body>
</html>

templates/common/fragments/header.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<header layout:fragment="header">
   这是 header 内容
</header>

</html>

templates/common/fragments/footer.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<footer class="container-fluid footer" layout:fragment="footer">
    这是footer内容
</footer>

</html>

templates/xxx/yyy.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="~{common/layout/default}">
	
<body>

<div class="container" layout:fragment="tm-content">
	这是正文内容
</div>
	
</body>
</html>

最终渲染页面内容

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
	...
</head>
<body>
	
<header>
	这是 header 内容
</header>
	
<div class="tm-container">
    <section>
		<div class="container">
			这是正文内容
		</div>
    </section>
</div>
	
<footer>
    这是footer内容
</footer>

</body>
</html>

freemarker

templates/ftl/common/layout/default.ftlh

<#macro layout>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>${title!}</title>
</head>

<body>
<#include "/ftl/common/fragments/header.ftlh" />

<#-- 在这里嵌入 内容 -->
<#nested>

<#include "/ftl/common/fragments/footer.ftlh" />
</body>
</html>
</#macro>

templates/ftl/common/fragments/header.ftlh

<header layout:fragment="header">
    这是header内容
</header>

templates/ftl/common/fragments/footer.ftlh

<footer class="container-fluid footer">
    这是footer内容
</footer>

templates/ftl/xxx/yyy.html

<#include "/ftl/common/layout/default.ftlh"/>
<#assign title="这是标题">

<@layout>

<div class="container">
	这是正文内容
</div>

</@layout>

最终渲染页面内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>这是标题</title>
</head>

<body>
<header layout:fragment="header">
    这是header内容
</header>

<div class="container">
    这是正文内容
</div>

<footer class="container-fluid footer">
    这是footer内容
</footer>
</body>
</html>