Question

我希望能够使用百万美元片段，使用其中的所有内容，但有时会从消耗它的页面添加额外的内容。典型案例：我有一个页脚模板，其中包含我想要在每个页面上的脚本参考。在某些页面上，我想添加另一个脚本ref，但不是全部。

我的网络应用程序中有以下设置（降低了复杂性，专注于这一点）：

的layout.html：

<html>
    <body>
        <div class="container">
            <div fragment="content"></div>
        </div>
        <div th:replace="shared/footer :: footer"></div>
    </body>
</html>

共享/ footer.html

<html>
    <body>
        <div th:fragment="footer" th:remove="tag">
            <script th:src="{@/scripts/a.js}"></script>
        </div>
    </body>
</html>

的index.html

<html>
   <body>
       <div th:fragment="content" class="myClass">
           <h1>Oh hello</h1>
       </div>

       <!-- what do i put here?!!! -->
   </body>
</html>

我想要做的是能够从index.html向页脚添加一些额外的内容：

e.g：

<div th:addExtraStuff="footer">
    <script th:ref="@{scripts/b.js"></script>
</div>

所以最终结果如下：

<html>
       <body>
           <div class="container">
               <div class="myClass">
                   <h1>Oh hello</h1>
               </div>
           </div>
           <div>
               <script src="/scripts/a.js"></script>
               <script src="/scripts/b.js"></script>
           </div>
       </body>
    </html>

显然：addExtraStuff不存在 - 但你明白了。我想要现有的内容，并能够提供我自己的内容。我认为如果我将所有可能性放在片段中然后使用评估来决定是否实际包含这种可能性，它将开始变得太复杂。我可能错了。

Answer 1

我在没有使用自定义方言的情况下解决了这个问题的一种方法是在我用作布局模板的片段上使用参数，我称之为“main-layout＆＃39;”。此示例允许您省略不需要覆盖的元素，但您提供的任何元素都将添加到“主要布局”中的任何内容中。分段。

基本模板看起来像这样

主view.html

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="main-layout">
    <head>
        <title>Template Head Title</title>
        <th:block th:replace="${head} ?: ~{}" />
    </head>
    <body>
        <header>
            Common Template Header Here
            <th:block th:replace="${contentHeader} ?: ~{}" />
        </header>
        <main>
            Common Template Content Here
            <th:block th:replace="${content} ?: ~{}" />
        </main>
    </body>
    <footer>
        Common Template Footer Here
        <th:block th:replace="${footer} ?: ~{}" />
    </footer>
</html>

使用它看起来像

<!DOCTYPE HTML>
<html th:replace="main-view.html :: main-layout (head=~{:: head}, contentHeader=~{:: header}, content=~{:: main}, footer=~{:: footer})">
    <head th:remove="tag">
        <title>Greeting Head</title>
    </head>
    <body>
        <header th:remove="tag">
            Greeting Content Header
        </header>
        <main th:remove="tag">
            Greeting Content
        </main>
    </body>
    <footer th:remove="tag">
        Greeting Footer
    </footer>
</html>

Answer 2

我不确定我是否了解您想要做什么，但是如何解决呢？
index.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
   <body>
   Hello World
   </body>

   <!-- Calling default scripts + custom scripts -->
   <div th:replace="fragments/script :: base_script(~{::script})">
      <script th:src="@{js/customjs1.min.js}"></script>
      <script th:src="@{js/customjs2.min.js}"></script>
      <script th:src="@{js/customjs3.min.js}"></script>
   </div>

   <!-- If you want to call only default scripts -->
   <!--<head th:replace="fragments/script :: base_script(null)"></head>-->
</html>

默认情况下会调用默认的js文件，但您可以添加其他脚本。
模板/片段/script.html：

<html xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="base_script(scripts)">
        <!-- /* default js files */ -->
        <script th:src="@{js/defaul1.min.js}"></script>
        <script th:src="@{js/defaul2.min.js}"></script>
        <script th:src="@{js/defaul3.min.js}"></script>
        <th:block th:if="${scripts != null}">
            <th:block th:replace="${scripts}" />
        </th:block>
    </div>
</html>

默认js文件和自定义js文件都将在index.html中调用。

<!DOCTYPE html>
<html>
   <body>
   Hello World
   </body>

   <!-- Calling default scripts + custom scripts -->
   <div>
      <!-- /* default js + custom js files */ -->
      <script src="/js/defaul1.min.js"></script>
      <script src="/js/defaul2.min.js"></script>
      <script src="/js/defaul3.min.js"></script>
      <script src="/js/customjs1.min.js"></script>
      <script src="/js/customjs2.min.js"></script>
      <script src="/js/customjs3.min.js"></script>
   </div>

</html>

Answer 3

我在没有使用自定义方言的情况下解决这个问题的一种方法是在我用作布局模板的片段上使用参数，我称之为“main-layout”。此示例允许您省略不需要覆盖的元素，但您提供的任何元素都将添加到“main-layout”片段中的任何内容。

我如何“添加”一个Thymeleaf片段，而不是替换

3 个答案: