Question

Thymeleaf使模板能够在浏览器上静态显示为原型此示例说明了http://www.thymeleaf.org/doc/articles/petclinic.html

＆＃13;

<!-- 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>

＆＃13;

我的问题是假设您需要更改bodyHeader片段，在片段定义中更改它，但仍然需要更改所有其他页面上的静态内容，以便仍然能够像呈现的版本一样查看它们。静态原型设计是否值得在所有页面中使用额外的代码？

Answer 1

你可能想看一下thymol（http://www.thymoljs.org/），它试图解决你描述的问题。

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

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

~/.bash_profile

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

Thymeleaf模板

1 个答案: