百里香叶模板答案

【问题标题】：Thymeleaf Template百里香叶模板
【发布时间】：2015-11-29 18:06:56
【问题描述】：

Thymeleaf 使模板可以作为原型静态显示在浏览器上这个例子解释了http://www.thymeleaf.org/doc/articles/petclinic.html

<!-- ownersList.html -->
<!DOCTYPE html>

<html lang="en">

<head th:substituteby="fragments/headTag :: headTag">

  <!-- ============================================================================ -->
  <!-- This <head> is only used for static prototyping purposes (natural templates) -->
  <!-- and is therefore entirely optionl, as this markup fragment will be included  -->
  <!-- from "fragments.html" at runtime.                                            -->
  <!-- ============================================================================ -->

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>PetClinic :: a Spring Framework demonstration</title>

  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/2.3.0/css/bootstrap.min.css}" rel="stylesheet" />
  <link href="../../../resources/css/petclinic.css" th:href="@{/resources/css/petclinic.css}" rel="stylesheet" />

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" th:src="@{/webjars/jquery/1.9.0/jquery.js}"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" th:src="@{/webjars/jquery-ui/1.9.2/js/jquery-ui-1.9.2.custom.js}"></script>

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css" th:href="@{/webjars/jquery-ui/1.9.2/css/smoothness/jquery-ui-1.9.2.custom.css}" rel="stylesheet" />

</head>

<body>

  <div class="container">

    <div th:include="fragments/bodyHeader" th:remove="tag">

      <!-- =========================================================================== -->
      <!-- This div is only used for static prototyping purposes (natural templates)   -->
      <!-- and is therefore entirely optionl, as this markup fragment will be included -->
      <!-- from "fragments.html" at runtime.                                           -->
      <!-- =========================================================================== -->

      <img th:src="@{/resources/images/banner-graphic.png}" src="../../../resources/images/banner-graphic.png" />

      <div class="navbar" style="width: 601px;">
        <div class="navbar-inner">
          <ul class="nav">
            <li style="width: 100px;">
              <a href="../welcome.html" th:href="@{/}">
                <i class="icon-home"></i>Home
              </a>
            </li>
            <li style="width: 130px;">
              <a href="../owners/findOwners.html" th:href="@{/owners/find.html}">
                <i class="icon-search"></i>Find owners
              </a>
            </li>
            <li style="width: 140px;">
              <a href="../vets/vetList.html" th:href="@{/vets.html}">
                <i class="icon-th-list"></i>Veterinarians
              </a>
            </li>
            <li style="width: 90px;">
              <a href="../exception.html" th:href="@{/oups.html}" title="trigger a RuntimeException to see how it is handled">
                <i class="icon-warning-sign"></i>Error
              </a>
            </li>
            <li style="width: 80px;">
              <a href="#" title="not available yet. Work in progress!!">
                <i class=" icon-question-sign"></i>Help
              </a>
            </li>
          </ul>
        </div>
      </div>

    </div>


    <!-- ... -->


    <table th:substituteby="fragments/footer :: footer" class="footer">

      <!-- =========================================================================== -->
      <!-- This table section is only used for static prototyping purposes (natural    -->
      <!-- templates) and is therefore entirely optionl, as this markup fragment will  -->
      <!-- be included from "fragments.html" at runtime.                               -->
      <!-- =========================================================================== -->

      <tr>
        <td></td>
        <td align="right">
          <img src="../../../resources/images/springsource-logo.png" th:src="@{/resources/images/springsource-logo.png}" alt="Sponsored by SpringSource" />
        </td>
      </tr>

    </table>

  </div>

</body>

</html>

我的问题是假设您需要更改 bodyHeader 片段，您在片段定义中更改它，但您仍然需要更改所有其他页面的静态内容，以便仍然能够以与渲染版本相同的方式查看它们。静态原型是否值得所有页面中的额外代码？

【问题讨论】：

在我的工作场所，我们总是使用静态原型设计，因为我们有单独的设计人员来进行 UI 设计。我相信从长远来看这是值得的。
我们也这样做。如果您与平面设计师合作，那么很容易向他们解释如何使用模板。应用一些小的更改（如拼写错误、标签或其他内容）也更快。如果您只是为自己创建一个小项目，您将看不到如此大的差异，甚至您可能会觉得这没什么用。

标签： spring spring-mvc thymeleaf

【解决方案1】：

您可能想看看百里酚 (http://www.thymoljs.org/)，它试图解决您描述的问题。

它是 Thymeleaf 子集的 JavaScript 实现。使用百里酚，您可以直接在浏览器中解析包含和大量模板表达式，而无需网络服务器。

在不使用百里酚的情况下绕过此限制的一种简单方法是将静态内容限制为结构占位符。在上面的示例中，您不会包含完整的正文标题，而仅包含第一级 HTML 标签，因此页面结构是完整的，但只有模板中实际定义的内容被完整拼写出来。示例：

<div th:include="fragments/bodyHeader" th:remove="tag">
  <img th:src="@{/resources/images/banner-graphic.png}" src="../../../resources/images/banner-graphic.png" />
  <div class="navbar" style="width: 601px;">
      NAVIGATION
  <div>
</div>

这样，如果包含的片段发生巨大变化，您只需更改包含片段的模板。

【讨论】：