Question

我有以下问题/问题：

我想＆＃34;建立＆＃34;一个模板系统，我可以聚合页面，从几个不同的*.html文件中显示。例如，我有一个带有基本页面结构的layout.html，我希望用header.html，content.html和footer.html中的内容填充它。

我使用Thymeleaf片段机制尝试了它，但是当从不同的输入文件聚合头部定义（css，js）时总是失败。

我还尝试了正确聚合头部定义的Thymeleaf布局方言机制，但似乎只能使用layout:decorate指令处理一个布局和一个内容文件。我是对的吗？

以下代码段简单明了......我只想将header.html，column1.html，column2.html和footer.html包含到layout.html中，如上所述以上。问题是我只能使用ThymeLeafs替换/片段机制来包含相应的内容部分。但是，如何处理head和script部分以将其包含在布局中？

的layout.html

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Thyme Fiddling</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" th:href="@{/styles/main.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/styles/layout.css}"/>
    <script type="text/javascript" th:src="@{/scripts/jquery-3.1.0.js}"></script>
</head>

<body>

    <div id="layout">

        <div id="headerWrapper">
            <div th:replace="~{header :: content}">placeholder for header</div>
        </div>

        <div id="contentWrapper">

            <div id="column1Wrapper">
                <div th:replace="~{column1 :: content}">placeholder for column1</div>
            </div>

            <div id="column2Wrapper">
                <div th:replace="~{column2 :: content}">placeholder for column2</div>
            </div>

        </div>    

        <div id="footerWrapper">
            <div th:replace="~{footer :: content}">placeholder for footer</div>
        </div>

    </div>

</body>

<强烈> header.html中

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/styles/header.css}"/>
</head>

<script  type="text/javascript">
    $(document).ready(function() {});
</script>                        

<div th:fragment="content">                  
    <div class="center">Header !!!</div>
</div>

column1.html

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/styles/column1.css}"/>
</head>

<script  type="text/javascript">
    $(document).ready(function() {});
</script>                        

<div th:fragment="content">                  
    <div class="center">Column1 !!!</div>
</div>

column2.html

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/styles/column2.css}"/>
</head>

<script  type="text/javascript">
    $(document).ready(function() {});
</script>                        

<div th:fragment="content">                  
    <div class="center">Column2 !!!</div>
</div>

footer.html

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/styles/footer.css}"/>
</head>

<script  type="text/javascript">
    $(document).ready(function() {});
</script>                        

<div th:fragment="content">                  
    <div class="center">Footer !!!</div>
</div>

Thymeleaf使用多个文件进行模板化

0 个答案: