使用 thymeleaf 模板


我们可以使用 thymeleaf 的模板功能将顶部 CSS 与底部 JS 封装起来,方便重用

定义模板

templates 目录下新建 includes 目录,并创建需要的模板文件

定义模板:<th:block th:fragment="header"></th:block>

引用模板:<th:block th:include="includes/header :: header"></th:block>

顶部模板 header.html

语法:<th:block th:fragment="header"></th:block>

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="header">
    <meta charset="utf-8" />
    <meta name="description" content="Latest updates and statistic charts">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="/assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
    <link href="/assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
    <link href="/assets/custom/style.css" rel="stylesheet" type="text/css" />

    <link rel="shortcut icon" href="/assets/demo/default/media/img/logo/favicon.ico" />
</th:block>

底部模板 footer.html

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="footer">
<script src="/assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
<script src="/assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
</th:block>

results matching ""

    No results matching ""