模板布局


8.1Including template fragments

Defining and referencing fragments

在我们的模板中,我们经常需要包含其他模板中的部分,页脚,标题,菜单等部分......

为了做到这一点,Thymeleaf需要我们定义这些部分,“片段”,以便包含,这可以使用th:fragment属性来完成。

假设我们要为所有杂货页面添加标准版权页脚,因此我们创建一个/WEB-INF/templates/footer.html包含以下代码的文件:

<!DOCTYPE html>

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

  <body>

    <div th:fragment="copy">
      &copy; 2011 The Good Thymes Virtual Grocery
    </div>

  </body>

</html>

上面的代码定义了一个名为的片段copy,我们可以使用其中一个th:insert或th:replace属性轻松地在我们的主页中包含这些片段(并且th:include,尽管自Thymeleaf 3.0以来不再推荐使用它):

<body>

  ...

  <div th:insert="~{footer :: copy}"></div>

</body>

请注意,th:insert需要一个片段表达式(~{...}),它是一个导致片段的表达式。在上面的例子中,这是一个非复杂的片段表达式,(~{,})封闭是完全可选的,所以上面的代码相当于:

<body>

  ...

  <div th:insert="footer :: copy"></div>

</body>

Fragment specification syntax

片段表达式的语法非常简单。有三种不同的格式:

  • "~{templatename::selector}"包括在名为的模板上应用指定标记选择器而产生的片段templatename。请注意,selector可以仅仅是一个片段的名字,所以你可以指定为简单的东西~{templatename::fragmentname}就像在~{footer :: copy}上面。

标记选择器语法由底层AttoParser解析库定义,类似于XPath表达式或CSS选择器。有关详细信息,请参阅附录C.

  • "~{templatename}"包含名为的完整模板templatename。

请注意,您在th:insert/ th:replacetags中使用的模板名称必须由模板引擎当前使用的模板解析器解析。

  • ~{::selector}"或"~{this::selector}"插入来自同一模板的片段,进行匹配selector。如果在表达式出现的模板上找不到,则模板调用(插入)的堆栈将遍历最初处理的模板(根),直到selector在某个级别匹配。

双方templatename并selector在上面的例子可以是全功能的表达式(甚至条件语句!),如:

<div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>

再次注意周围的~{...}包络在th:insert/中是如何可选的th:replace。

片段可以包含任何th:* 属性。一旦将片段包含在目标模板(具有th:insert/ th:replaceattribute的模板)中,就会评估这些属性,并且它们将能够引用此目标模板中定义的任何上下文变量。

这种片段方法的一大优点是,您可以在浏览器完美显示的页面中编写片段,具有完整且有效的标记结构,同时仍保留使Thymeleaf将其包含在其他模板中的能力。

Referencing fragments without th:fragment

由于标记选择器的强大功能,我们可以包含不使用任何th:fragment属性的片段。它甚至可以是来自不同应用程序的标记代码,完全不了解Thymeleaf:

...
<div id="copy-section">
  &copy; 2011 The Good Thymes Virtual Grocery
</div>
...

我们可以使用上面的片段简单地通过其id属性引用它,类似于CSS选择器:

<body>

  ...

  <div th:insert="~{footer :: #copy-section}"></div>

</body>

Difference between th:insert and th:replace (and th:include)

和之间有什么区别th:insert和th:replace(和th:include,因为3.0不推荐)?

- th:insert 是最简单的:它只是插入指定的片段作为其主机标签的主体。

- th:replace实际上用指定的片段替换它的主机标签。

  • th:include类似于th:insert,但不是插入片段,它只插入此片段的内容。

所以像这样的HTML片段:

<footer th:fragment="copy">
  &copy; 2011 The Good Thymes Virtual Grocery
</footer>

...在主机

标签中包含三次,如下所示:

<body>

  ...

  <div th:insert="footer :: copy"></div>

  <div th:replace="footer :: copy"></div>

  <div th:include="footer :: copy"></div>

</body>

......将导致:

<body>

  ...

  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>

  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>

  <div>
    &copy; 2011 The Good Thymes Virtual Grocery
  </div>

</body>

8.2Parameterizable fragment signatures

为了为模板片段创建更像函数的机制,使用定义的片段th:fragment可以指定一组参数:

<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>

这需要使用这两种语法之一来从th:insert或调用片段th:replace:

<div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>

请注意,顺序在最后一个选项中并不重要:

<div th:replace="::frag (twovar=${value2},onevar=${value1})">...</div>

片段局部变量没有片段参数 即使片段定义没有这样的参数:

<div th:fragment="frag">
    ...
</div>

我们可以使用上面指定的第二种语法来调用它们(只有第二种语法):

<div th:replace="::frag (onevar=${value1},twovar=${value2})">

这将相当于组合th:replace和th:with:

<div th:replace="::frag" th:with="onevar=${value1},twovar=${value2}">

请注意,片段的局部变量规范 - 无论是否具有参数签名 - 都不会导致上下文在执行之前被清空。片段仍然可以像访问目前那样访问调用模板中使用的每个上下文变量。

th:assert for in-template assertions

该th:assert属性可以指定一个以逗号分隔的表达式列表,这些表达式应该被评估并为每次评估生成true,否则会引发异常。

<div th:assert="${onevar},(${twovar} != 43)">...</div>

这对于验证片段签名的参数非常方便:

<header th:fragment="contentheader(title)" th:assert="${!#strings.isEmpty(title)}">...</header>

8.3Flexible layouts: beyond mere fragment insertion

由于片段表达式,我们可以为不是文本,数字,bean对象的片段指定参数......而是指定标记片段。

这允许我们以一种方式创建我们的片段,使得它们可以通过来自调用模板的标记来丰富,从而产生非常灵活的模板布局机制。

请注意以下片段中的title和links变量的使用:

<head th:fragment="common_header(title,links)">

  <title th:replace="${title}">The awesome application</title>

  <!-- Common styles and scripts -->
  <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
  <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
  <script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>

  <!--/* Per-page placeholder for additional links */-->
  <th:block th:replace="${links}" />

</head>

我们现在可以将这个片段称为:

...
<head th:replace="base :: common_header(~{::title},~{::link})">

  <title>Awesome - Main</title>

  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
  <link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">

</head>
...

...结果将使用我们的调用模板中的实际和<link>标签作为title和links变量的值,从而导致我们的片段在插入过程中自定义:</p> <div class="highlight"><pre><span></span>... <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Awesome - Main<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="c"><!-- Common styles and scripts --></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="na">media</span><span class="o">=</span><span class="s">"all"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/css/awesomeapp.css"</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"shortcut icon"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/images/favicon.ico"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/awe/sh/scripts/codebase.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/css/bootstrap.min.css"</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/themes/smoothness/jquery-ui.css"</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> ... </pre></div> <h3>Using the empty fragment</h3> <p>一个特殊的片段表达式,即空片段(~{}),可用于指定无标记。使用前面的示例:</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">head</span> <span class="na">th:replace</span><span class="o">=</span><span class="s">"base :: common_header(~{::title},~{})"</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Awesome - Main<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> ... </pre></div> <p>注意fragment(links)的第二个参数如何设置为空片段,因此没有为<th:block th:replace="${links}" />块写入任何内容:</p> <div class="highlight"><pre><span></span>... <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Awesome - Main<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="c"><!-- Common styles and scripts --></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="na">media</span><span class="o">=</span><span class="s">"all"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/css/awesomeapp.css"</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"shortcut icon"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/images/favicon.ico"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/awe/sh/scripts/codebase.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> ... </pre></div> <h3>Using the no-operation token</h3> <p>如果我们只想让我们的片段使用其当前标记作为默认值,则no-op也可以用作片段的参数。再次,使用common_header示例:</p> <div class="highlight"><pre><span></span>... <span class="p"><</span><span class="nt">head</span> <span class="na">th:replace</span><span class="o">=</span><span class="s">"base :: common_header(_,~{::link})"</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Awesome - Main<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">th:href</span><span class="o">=</span><span class="s">"@{/css/bootstrap.min.css}"</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">th:href</span><span class="o">=</span><span class="s">"@{/themes/smoothness/jquery-ui.css}"</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> ... </pre></div> <p>看看如何将title参数(common<em>header片段的第一个参数)设置为no-op(</em> ),这导致片段的这一部分根本不被执行(title= 无操作):</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">title</span> <span class="na">th:replace</span><span class="o">=</span><span class="s">"${title}"</span><span class="p">></span>The awesome application<span class="p"></</span><span class="nt">title</span><span class="p">></span> </pre></div> <p>结果是:</p> <div class="highlight"><pre><span></span>... <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>The awesome application<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="c"><!-- Common styles and scripts --></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="na">media</span><span class="o">=</span><span class="s">"all"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/css/awesomeapp.css"</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"shortcut icon"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/images/favicon.ico"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/javascript"</span> <span class="na">src</span><span class="o">=</span><span class="s">"/awe/sh/scripts/codebase.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/css/bootstrap.min.css"</span><span class="p">></span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"/awe/themes/smoothness/jquery-ui.css"</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> ... </pre></div> <h3>Advanced conditional insertion of fragments</h3> <p>emtpy片段和无操作令牌的可用性允许我们以非常简单和优雅的方式执行片段的条件插入。</p> <p>例如,我们可以这样做,以便仅在用户是管理员时插入我们的common :: adminhead片段,并且如果不是,则不插入任何内容(emtpy片段):</p> <div class="highlight"><pre><span></span>... <span class="p"><</span><span class="nt">div</span> <span class="na">th:insert</span><span class="o">=</span><span class="s">"${user.isAdmin()} ? ~{common :: adminhead} : ~{}"</span><span class="p">></span>...<span class="p"></</span><span class="nt">div</span><span class="p">></span> ... </pre></div> <p>此外,我们可以使用无操作令牌,以便仅在满足指定条件时插入片段,但如果不满足条件则保留标记而不进行修改:</p> <div class="highlight"><pre><span></span>... <span class="p"><</span><span class="nt">div</span> <span class="na">th:insert</span><span class="o">=</span><span class="s">"${user.isAdmin()} ? ~{common :: adminhead} : _"</span><span class="p">></span> Welcome [[${user.name}]], click <span class="p"><</span><span class="nt">a</span> <span class="na">th:href</span><span class="o">=</span><span class="s">"@{/support}"</span><span class="p">></span>here<span class="p"></</span><span class="nt">a</span><span class="p">></span> for help-desk support. <span class="p"></</span><span class="nt">div</span><span class="p">></span> ... </pre></div> <p>另外,如果我们已经配置了模板解析器以检查模板资源是否存在 - 通过它们的checkExistence标志 - 我们可以使用片段本身的存在作为默认操作中的条件:</p> <div class="highlight"><pre><span></span>... <span class="c"><!-- The body of the <div> will be used if the "common :: salutation" fragment --></span> <span class="c"><!-- does not exist (or is empty). --></span> <span class="p"><</span><span class="nt">div</span> <span class="na">th:insert</span><span class="o">=</span><span class="s">"~{common :: salutation} ?: _"</span><span class="p">></span> Welcome [[${user.name}]], click <span class="p"><</span><span class="nt">a</span> <span class="na">th:href</span><span class="o">=</span><span class="s">"@{/support}"</span><span class="p">></span>here<span class="p"></</span><span class="nt">a</span><span class="p">></span> for help-desk support. <span class="p"></</span><span class="nt">div</span><span class="p">></span> ... </pre></div> <h2>8.4Removing template fragments</h2> <p>回到示例应用程序,让我们重新访问我们的产品列表模板的最新版本:</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">table</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>NAME<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>PRICE<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>IN STOCK<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>COMMENTS<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">th:each</span><span class="o">=</span><span class="s">"prod : ${prods}"</span> <span class="na">th:class</span><span class="o">=</span><span class="s">"${prodStat.odd}? 'odd'"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.name}"</span><span class="p">></span>Onions<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.price}"</span><span class="p">></span>2.41<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.inStock}? #{true} : #{false}"</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${#lists.size(prod.comments)}"</span><span class="p">></span>2<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"comments.html"</span> <span class="na">th:href</span><span class="o">=</span><span class="s">"@{/product/comments(prodId=${prod.id})}"</span> <span class="na">th:unless</span><span class="o">=</span><span class="s">"${#lists.isEmpty(prod.comments)}"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"></</span><span class="nt">table</span><span class="p">></span> </pre></div> <p>这段代码作为一个模板很好,但作为一个静态页面(当浏览器直接打开而没有Thymeleaf处理它时)它就不会成为一个好的原型。</p> <p>为什么?因为虽然浏览器可以完全显示,但该表只有一行,而且这行包含模拟数据。作为原型,它看起来不够逼真......我们应该有多个产品,我们需要更多的行。</p> <p>所以让我们添加一些:</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">table</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>NAME<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>PRICE<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>IN STOCK<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>COMMENTS<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">th:each</span><span class="o">=</span><span class="s">"prod : ${prods}"</span> <span class="na">th:class</span><span class="o">=</span><span class="s">"${prodStat.odd}? 'odd'"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.name}"</span><span class="p">></span>Onions<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.price}"</span><span class="p">></span>2.41<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.inStock}? #{true} : #{false}"</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${#lists.size(prod.comments)}"</span><span class="p">></span>2<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"comments.html"</span> <span class="na">th:href</span><span class="o">=</span><span class="s">"@{/product/comments(prodId=${prod.id})}"</span> <span class="na">th:unless</span><span class="o">=</span><span class="s">"${#lists.isEmpty(prod.comments)}"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"odd"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Blue Lettuce<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>9.55<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>no<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mild Cinnamon<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>1.99<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>3<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"comments.html"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"></</span><span class="nt">table</span><span class="p">></span> </pre></div> <p>好的,现在我们有三个,对原型来说肯定更好。但是......当我们用Thymeleaf处理它时会发生什么?:</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">table</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>NAME<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>PRICE<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>IN STOCK<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>COMMENTS<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Fresh Sweet Basil<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>4.99<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"odd"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Italian Tomato<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>1.25<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>no<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>2<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/gtvg/product/comments?prodId=2"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Yellow Bell Pepper<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>2.50<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"odd"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Old Cheddar<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>18.75<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>1<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/gtvg/product/comments?prodId=4"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"odd"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Blue Lettuce<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>9.55<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>no<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mild Cinnamon<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>1.99<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>3<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"comments.html"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"></</span><span class="nt">table</span><span class="p">></span> </pre></div> <p>最后两行是模拟行!嗯,当然它们是:迭代只适用于第一行,所以没有理由为什么Thymeleaf应该删除其他两个。</p> <p>我们需要一种在模板处理过程中删除这两行的方法。让我们th:remove在第二个和第三个<tr>标签上使用该属性:</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">table</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>NAME<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>PRICE<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>IN STOCK<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>COMMENTS<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">th:each</span><span class="o">=</span><span class="s">"prod : ${prods}"</span> <span class="na">th:class</span><span class="o">=</span><span class="s">"${prodStat.odd}? 'odd'"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.name}"</span><span class="p">></span>Onions<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.price}"</span><span class="p">></span>2.41<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.inStock}? #{true} : #{false}"</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${#lists.size(prod.comments)}"</span><span class="p">></span>2<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"comments.html"</span> <span class="na">th:href</span><span class="o">=</span><span class="s">"@{/product/comments(prodId=${prod.id})}"</span> <span class="na">th:unless</span><span class="o">=</span><span class="s">"${#lists.isEmpty(prod.comments)}"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"odd"</span> <span class="na">th:remove</span><span class="o">=</span><span class="s">"all"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Blue Lettuce<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>9.55<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>no<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">th:remove</span><span class="o">=</span><span class="s">"all"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mild Cinnamon<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>1.99<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>3<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"comments.html"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"></</span><span class="nt">table</span><span class="p">></span> </pre></div> <p>处理完毕后,所有内容都会再次显示:</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">table</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>NAME<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>PRICE<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>IN STOCK<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>COMMENTS<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Fresh Sweet Basil<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>4.99<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"odd"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Italian Tomato<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>1.25<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>no<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>2<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/gtvg/product/comments?prodId=2"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Yellow Bell Pepper<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>2.50<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"odd"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Old Cheddar<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>18.75<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>1<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/gtvg/product/comments?prodId=4"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"></</span><span class="nt">table</span><span class="p">></span> </pre></div> <p>all属性中的这个值是什么意思?th:remove可以根据其价值以五种不同的方式表现:</p> <ul> <li>all:删除包含标记及其所有子标记。</li> <li>body:不要删除包含标记,但删除其所有子标记。</li> <li>tag:删除包含标记,但不删除其子项。</li> <li>all-but-first:删除除第一个之外的所有包含标记的子项。</li> <li>none: 没做什么。此值对于动态评估很有用。</li> </ul> <p>这个all-but-first价值有什么用呢?它将让我们th:remove="all"在原型设计时节省一些:</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">table</span><span class="p">></span> <span class="p"><</span><span class="nt">thead</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>NAME<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>PRICE<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>IN STOCK<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"><</span><span class="nt">th</span><span class="p">></span>COMMENTS<span class="p"></</span><span class="nt">th</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"></</span><span class="nt">thead</span><span class="p">></span> <span class="p"><</span><span class="nt">tbody</span> <span class="na">th:remove</span><span class="o">=</span><span class="s">"all-but-first"</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">th:each</span><span class="o">=</span><span class="s">"prod : ${prods}"</span> <span class="na">th:class</span><span class="o">=</span><span class="s">"${prodStat.odd}? 'odd'"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.name}"</span><span class="p">></span>Onions<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.price}"</span><span class="p">></span>2.41<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${prod.inStock}? #{true} : #{false}"</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span> <span class="na">th:text</span><span class="o">=</span><span class="s">"${#lists.size(prod.comments)}"</span><span class="p">></span>2<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"comments.html"</span> <span class="na">th:href</span><span class="o">=</span><span class="s">"@{/product/comments(prodId=${prod.id})}"</span> <span class="na">th:unless</span><span class="o">=</span><span class="s">"${#lists.isEmpty(prod.comments)}"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span> <span class="na">class</span><span class="o">=</span><span class="s">"odd"</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Blue Lettuce<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>9.55<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>no<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>0<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">tr</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>Mild Cinnamon<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>1.99<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span>yes<span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">td</span><span class="p">></span> <span class="p"><</span><span class="nt">span</span><span class="p">></span>3<span class="p"></</span><span class="nt">span</span><span class="p">></span> comment/s <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"comments.html"</span><span class="p">></span>view<span class="p"></</span><span class="nt">a</span><span class="p">></span> <span class="p"></</span><span class="nt">td</span><span class="p">></span> <span class="p"></</span><span class="nt">tr</span><span class="p">></span> <span class="p"></</span><span class="nt">tbody</span><span class="p">></span> <span class="p"></</span><span class="nt">table</span><span class="p">></span> </pre></div> <p>该th:remove属性可采取任何Thymeleaf标准表示,因为它返回允许字符串值中的一个,只要(all,tag,body,all-but-first或none)。</p> <p>这意味着删除可能是有条件的,例如:</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/something"</span> <span class="na">th:remove</span><span class="o">=</span><span class="s">"${condition}? tag : none"</span><span class="p">></span>Link text not to be removed<span class="p"></</span><span class="nt">a</span><span class="p">></span> </pre></div> <p>另请注意,th:remove考虑null同义词none,因此以下工作方式与上面的示例相同:</p> <div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"/something"</span> <span class="na">th:remove</span><span class="o">=</span><span class="s">"${condition}? tag"</span><span class="p">></span>Link text not to be removed<span class="p"></</span><span class="nt">a</span><span class="p">></span> </pre></div> <p>在这种情况下,如果${condition}为false,null将返回,因此不会执行删除。</p> <h2>8.5Layout Inheritance</h2> <p>为了能够将单个文件作为布局,可以使用片段。具有title和content使用th:fragment和的简单布局的示例th:replace:</p> <div class="highlight"><pre><span></span><span class="cp"><!DOCTYPE html></span> <span class="p"><</span><span class="nt">html</span> <span class="na">th:fragment</span><span class="o">=</span><span class="s">"layout (title, content)"</span> <span class="na">xmlns:th</span><span class="o">=</span><span class="s">"http://www.thymeleaf.org"</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span> <span class="na">th:replace</span><span class="o">=</span><span class="s">"${title}"</span><span class="p">></span>Layout Title<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Layout H1<span class="p"></</span><span class="nt">h1</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">th:replace</span><span class="o">=</span><span class="s">"${content}"</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Layout content<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">footer</span><span class="p">></span> Layout footer <span class="p"></</span><span class="nt">footer</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <p>此示例声明了一个名为layout的片段,其中title和content作为参数。两者都将在页面上替换,并在下面的示例中通过提供的片段表达式继承它。</p> <div class="highlight"><pre><span></span><span class="cp"><!DOCTYPE html></span> <span class="p"><</span><span class="nt">html</span> <span class="na">th:replace</span><span class="o">=</span><span class="s">"~{layoutFile :: layout(~{::title}, ~{::section})}"</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Page Title<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">section</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Page content<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span><span class="p">></span>Included on page<span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">section</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <p>在这个文件中,该html标签将被替换的布局,但在布局title和content将已被替换title,并section分别块。</p> <p>如果需要,布局可以由多个片段组成页眉和页脚。</p> </div> <!-- 分页 --> <nav> <ul class="pagination pager justify-content-between"> <li class="previous"><a href="/article/28312">条件计算</a></li> <li class="next"><a href="/article/28314">局部变量</a></li> </ul> </nav> <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more">分享到:</a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":["weixin","qzone","tsina","sqq"],"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{"bdSize":16}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </article> </div> </div> <!-- 右侧导航 --> <div class="col-md-2"> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#基础语言" aria-expanded="true" aria-controls="collapseOne"> 基础语言(22) </button> </h5> </div> <div id="基础语言" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/1" title="HTML教程">HTML教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/2" title="CSS教程">CSS教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/3" title="C语言教程">C语言教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/140" title="C语言100例">C语言100例</a></li> <li style="padding:0px 0px;"><a href="/tutorial/78" title="C语言标准库">C语言标准库</a></li> <li style="padding:0px 0px;"><a href="/tutorial/142" title="C语言实例教程">C语言实例教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/135" title="C语言基础教程实例源码">C语言基础教程实例源码</a></li> <li style="padding:0px 0px;"><a href="/tutorial/4" title="Java教程">Java教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/5" title="C++教程">C++教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/6" title="C# 教程">C# 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/7" title="Python教程">Python教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/79" title="Python3教程">Python3教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/8" title="Golang语言教程">Golang语言教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/197" title="Go 实例教程">Go 实例教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/9" title="R语言教程">R语言教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/10" title="Perl语言教程">Perl语言教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/11" title="Ruby教程">Ruby教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/12" title="Swift教程">Swift教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/166" title="Dart教程">Dart教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/165" title="数据结构和算法教程">数据结构和算法教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/181" title="golang语言">golang语言</a></li> <li style="padding:0px 0px;"><a href="/tutorial/196" title="Dart实例教程">Dart实例教程</a></li> </ul> </div> </div> </div> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#数据库教程" aria-expanded="true" aria-controls="collapseOne"> 数据库教程(10) </button> </h5> </div> <div id="数据库教程" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/13" title="SQL教程">SQL教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/14" title="MySQL教程">MySQL教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/81" title="MariaDB教程">MariaDB教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/15" title="SQLite教程">SQLite教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/16" title="MongoDB教程">MongoDB教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/17" title="Redis教程">Redis教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/18" title="Memcached教程">Memcached教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/19" title="SQLServer教程">SQLServer教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/20" title="Oracle教程">Oracle教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/21" title="DB2教程">DB2教程</a></li> </ul> </div> </div> </div> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#前端教程" aria-expanded="true" aria-controls="collapseOne"> 前端教程(35) </button> </h5> </div> <div id="前端教程" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/1" title="HTML教程">HTML教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/25" title="HTML5 教程">HTML5 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/77" title="HTML参考手册">HTML参考手册</a></li> <li style="padding:0px 0px;"><a href="/tutorial/2" title="CSS教程">CSS教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/26" title="CSS3 教程">CSS3 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/22" title="JavaScript教程">JavaScript教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/36" title="HTTP教程">HTTP教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/37" title="XML教程">XML教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/38" title="Ajax教程">Ajax教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/23" title="jQuery教程">jQuery教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/80" title="Less教程">Less教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/24" title="BootStrap4教程">BootStrap4教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/27" title="NPM教程">NPM教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/28" title="Babel教程">Babel教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/29" title="Webpack教程">Webpack教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/30" title="Grunt教程">Grunt教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/31" title="Gulp教程">Gulp教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/32" title="ES6教程">ES6教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/33" title="AngularJS教程">AngularJS教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/34" title="VueJS教程">VueJS教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/35" title="React教程">React教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/39" title="Node.js教程">Node.js教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/134" title="CSS 参考手册">CSS 参考手册</a></li> <li style="padding:0px 0px;"><a href="/tutorial/191" title="Node.js项目实战">Node.js项目实战</a></li> <li style="padding:0px 0px;"><a href="/tutorial/118" title="Express 教程">Express 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/189" title="koa 教程">koa 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/146" title="JavaScript实例教程">JavaScript实例教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/136" title="JavaScript参考手册">JavaScript参考手册</a></li> <li style="padding:0px 0px;"><a href="/tutorial/138" title="jQuery参考手册">jQuery参考手册</a></li> <li style="padding:0px 0px;"><a href="/tutorial/149" title="Node.js&ES6 实例教程">Node.js&ES6 实例教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/170" title="JavaScript专题(常见问题)">JavaScript专题(常见问题)</a></li> <li style="padding:0px 0px;"><a href="/tutorial/177" title="TypeScript教程">TypeScript教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/178" title="JavaScript异步">JavaScript异步</a></li> <li style="padding:0px 0px;"><a href="/tutorial/190" title="Vue CLI教程">Vue CLI教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/193" title="GraphGL教程">GraphGL教程</a></li> </ul> </div> </div> </div> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#Python教程" aria-expanded="true" aria-controls="collapseOne"> Python教程(18) </button> </h5> </div> <div id="Python教程" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/112" title="PyCharm教程">PyCharm教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/7" title="Python教程">Python教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/79" title="Python3教程">Python3教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/108" title="Python多线程并发教程">Python多线程并发教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/114" title="Python 100例">Python 100例</a></li> <li style="padding:0px 0px;"><a href="/tutorial/40" title="Python数据结构">Python数据结构</a></li> <li style="padding:0px 0px;"><a href="/tutorial/41" title="Django教程">Django教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/42" title="Flask教程">Flask教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/43" title="Tornado教程">Tornado教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/85" title="Web2py教程">Web2py教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/44" title="Scrapy教程">Scrapy教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/45" title="wxPython 教程">wxPython 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/107" title="AI与Python">AI与Python</a></li> <li style="padding:0px 0px;"><a href="/tutorial/147" title="Python 实例教程">Python 实例教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/148" title="Python3 实例教程">Python3 实例教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/168" title="Python专题">Python专题</a></li> <li style="padding:0px 0px;"><a href="/tutorial/109" title="PySpark教程">PySpark教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/110" title="Seaborn教程">Seaborn教程</a></li> </ul> </div> </div> </div> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#Java教程" aria-expanded="true" aria-controls="collapseOne"> Java教程(48) </button> </h5> </div> <div id="Java教程" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/4" title="Java教程">Java教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/94" title="Java8 教程">Java8 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/95" title="Java9 教程">Java9 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/96" title="Java泛型教程">Java泛型教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/99" title="Gson教程">Gson教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/100" title="Java设计模式教程">Java设计模式教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/101" title="Apache DBUtils教程">Apache DBUtils教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/103" title="Apache Commons IO教程">Apache Commons IO教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/105" title="JasperResports教程">JasperResports教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/102" title="Apache POI教程">Apache POI教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/104" title="Guava教程">Guava教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/46" title="JDBC教程">JDBC教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/47" title="Servlet教程">Servlet教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/183" title="Java Servlet规范">Java Servlet规范</a></li> <li style="padding:0px 0px;"><a href="/tutorial/48" title="JSP教程">JSP教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/51" title="Struts2 教程">Struts2 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/204" title="Velocity 教程">Velocity 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/200" title="FreeMarker教程">FreeMarker教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/208" title="Thymeleaf教程">Thymeleaf教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/49" title="Hibernate教程">Hibernate教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/50" title="Spring教程">Spring教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/120" title="Spring AOP教程">Spring AOP教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/121" title="Spring Batch 教程">Spring Batch 教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/122" title="Spring JDBC教程">Spring JDBC教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/124" title="Spring MVC教程">Spring MVC教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/123" title="Spring Boot CLI教程">Spring Boot CLI教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/125" title="Spring Web Service教程">Spring Web Service教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/198" title="Spring Boot教程">Spring Boot教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/52" title="iBatis教程">iBatis教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/199" title="MyBatis教程">MyBatis教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/53" title="JPA教程">JPA教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/54" title="Lucene教程">Lucene教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/55" title="Maven教程">Maven教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/56" title="Gradle教程">Gradle教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/57" title="JFreeChart教程">JFreeChart教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/58" title="jUnit教程">jUnit教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/59" title="log4j教程">log4j教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/139" title="Java实例教程">Java实例教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/143" title="Java实例教程(上)">Java实例教程(上)</a></li> <li style="padding:0px 0px;"><a href="/tutorial/144" title="Java实例教程(中)">Java实例教程(中)</a></li> <li style="padding:0px 0px;"><a href="/tutorial/145" title="Java实例教程(下)">Java实例教程(下)</a></li> <li style="padding:0px 0px;"><a href="/tutorial/205" title="Java IO">Java IO</a></li> <li style="padding:0px 0px;"><a href="/tutorial/169" title="Java专题">Java专题</a></li> <li style="padding:0px 0px;"><a href="/tutorial/97" title="Java并发教程">Java并发教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/173" title="Java算法大全">Java算法大全</a></li> <li style="padding:0px 0px;"><a href="/tutorial/176" title="IntelliJ IDEA教程">IntelliJ IDEA教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/206" title="Java.util教程">Java.util教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/180" title="RabbitMQ教程">RabbitMQ教程</a></li> </ul> </div> </div> </div> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#PHP教程" aria-expanded="true" aria-controls="collapseOne"> PHP教程(13) </button> </h5> </div> <div id="PHP教程" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/159" title="PHP教程">PHP教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/60" title="PHP教程2">PHP教程2</a></li> <li style="padding:0px 0px;"><a href="/tutorial/67" title="PHP7教程">PHP7教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/14" title="MySQL教程">MySQL教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/113" title="WordPress教程">WordPress教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/61" title="Linux教程">Linux教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/62" title="Composer教程">Composer教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/63" title="Laravel教程">Laravel教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/64" title="Yii教程">Yii教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/65" title="CodeIgniter教程">CodeIgniter教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/66" title="Symfony教程">Symfony教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/141" title="PHP参考手册">PHP参考手册</a></li> <li style="padding:0px 0px;"><a href="/tutorial/150" title="PHP实例教程">PHP实例教程</a></li> </ul> </div> </div> </div> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#大数据" aria-expanded="true" aria-controls="collapseOne"> 大数据(12) </button> </h5> </div> <div id="大数据" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/4" title="Java教程">Java教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/9" title="R语言教程">R语言教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/86" title="Scala教程">Scala教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/68" title="Hadoop教程">Hadoop教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/69" title="Spark教程">Spark教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/109" title="PySpark教程">PySpark教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/70" title="HBase教程">HBase教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/71" title="Hive教程">Hive教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/72" title="Pig教程">Pig教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/126" title="Apache Flume教程">Apache Flume教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/73" title="Storm教程">Storm教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/127" title="Apache Solr教程">Apache Solr教程</a></li> </ul> </div> </div> </div> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#人工智能" aria-expanded="true" aria-controls="collapseOne"> 人工智能(11) </button> </h5> </div> <div id="人工智能" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/7" title="Python教程">Python教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/111" title="Python文本处理">Python文本处理</a></li> <li style="padding:0px 0px;"><a href="/tutorial/107" title="AI与Python">AI与Python</a></li> <li style="padding:0px 0px;"><a href="/tutorial/74" title="Numpy教程">Numpy教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/84" title="Scipy教程">Scipy教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/75" title="Pandas教程">Pandas教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/76" title="Matplotlib教程">Matplotlib教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/110" title="Seaborn教程">Seaborn教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/82" title="Python数据科学教程">Python数据科学教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/83" title="Python深度学习教程">Python深度学习教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/179" title="PyTorch教程">PyTorch教程</a></li> </ul> </div> </div> </div> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#微软技术" aria-expanded="true" aria-controls="collapseOne"> 微软技术(4) </button> </h5> </div> <div id="微软技术" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/160" title="Excel高级教程">Excel高级教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/161" title="Powerpoint教程">Powerpoint教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/164" title="Visio教程">Visio教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/163" title="Word教程">Word教程</a></li> </ul> </div> </div> </div> <div class="card" style="border:none;"> <div class="card-header" id="headingOne" style="padding:0px 1px;"> <h5 class="mb-0"> <button class="btn btn-link" style="font-size:13px;color:#000;" type="button" data-toggle="collapse" data-target="#其他教程" aria-expanded="true" aria-controls="collapseOne"> 其他教程(36) </button> </h5> </div> <div id="其他教程" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <ul style="list-style:none;padding:0;margin:0;font-size:12px"> <li style="padding:0px 0px;"><a href="/tutorial/167" title="UML教程">UML教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/129" title="HTML 全局属性">HTML 全局属性</a></li> <li style="padding:0px 0px;"><a href="/tutorial/172" title="iOS开发">iOS开发</a></li> <li style="padding:0px 0px;"><a href="/tutorial/131" title="HTML 音视频">HTML 音视频</a></li> <li style="padding:0px 0px;"><a href="/tutorial/186" title="Git中文参考">Git中文参考</a></li> <li style="padding:0px 0px;"><a href="/tutorial/133" title="Linux 命令大全">Linux 命令大全</a></li> <li style="padding:0px 0px;"><a href="/tutorial/188" title="Node.js中文文档">Node.js中文文档</a></li> <li style="padding:0px 0px;"><a href="/tutorial/151" title="Python3详细">Python3详细</a></li> <li style="padding:0px 0px;"><a href="/tutorial/91" title="ES6详细">ES6详细</a></li> <li style="padding:0px 0px;"><a href="/tutorial/153" title="Swift详细">Swift详细</a></li> <li style="padding:0px 0px;"><a href="/tutorial/155" title="Vim教程">Vim教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/115" title="Android教程">Android教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/157" title="JSON教程">JSON教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/117" title="Ionic教程">Ionic教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/162" title="Sublime Text教程">Sublime Text教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/128" title="wxPython教程详细">wxPython教程详细</a></li> <li style="padding:0px 0px;"><a href="/tutorial/130" title="HTML 画布">HTML 画布</a></li> <li style="padding:0px 0px;"><a href="/tutorial/185" title="Linux命令行">Linux命令行</a></li> <li style="padding:0px 0px;"><a href="/tutorial/132" title="HTML 元素属性">HTML 元素属性</a></li> <li style="padding:0px 0px;"><a href="/tutorial/187" title="atom教程">atom教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/88" title="C#详细">C#详细</a></li> <li style="padding:0px 0px;"><a href="/tutorial/137" title="JavaScript 对象属性和方法">JavaScript 对象属性和方法</a></li> <li style="padding:0px 0px;"><a href="/tutorial/192" title="Flutter教程">Flutter教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/90" title="Golang详细">Golang详细</a></li> <li style="padding:0px 0px;"><a href="/tutorial/152" title="Java详细">Java详细</a></li> <li style="padding:0px 0px;"><a href="/tutorial/154" title="YAML教程">YAML教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/98" title="SEO教程">SEO教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/156" title="Eclipse教程">Eclipse教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/116" title="iOS教程">iOS教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/158" title="Git教程">Git教程</a></li> <li style="padding:0px 0px;"><a href="/tutorial/119" title="使用Swift2开发iOS">使用Swift2开发iOS</a></li> <li style="padding:0px 0px;"><a href="/tutorial/87" title="C++详细">C++详细</a></li> <li style="padding:0px 0px;"><a href="/tutorial/89" title="Python详细">Python详细</a></li> <li style="padding:0px 0px;"><a href="/tutorial/92" title="Linux 服务器管理">Linux 服务器管理</a></li> <li style="padding:0px 0px;"><a href="/tutorial/93" title="程序员简历模板">程序员简历模板</a></li> <li style="padding:0px 0px;"><a href="/tutorial/171" title="Docker教程">Docker教程</a></li> </ul> </div> </div> </div> </div> </div> </div> <script src="/static/assets/js/compressed.js" type="application/javascript"></script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f4ad49491aa54f5876e7d1536cc2d379"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <footer class="footer"> <div class="container mb-3"> <div class="row text-left"> <!-- 第一列 --> <div class="col-md-4"> <div> <h5>编程字典</h5> <p><a href="http://www.codingdict.com">编程字典(CodingDict.com)</a>, 专注于IT课程的研发和培训,课程分为:<a href="/courses">实战课程</a>、 <a href="/tutorials">免费教程</a>、<a href="/document">中文文档</a>、<a href="/blog">博客</a>和<a href="/tools/index.html">在线工具</a> 形成了五维一体的全方位IT课程平台。内容涵盖: Python、Java、PHP、Web前端、大数据、人工智能、数据库、移动开发(Android、iOS)及游戏开发等。课程以文字+视频的方式呈现, 极大的提高学员的学习效率,深受业界和学员一致好评。</p> </div> </div> <!-- 第二列 --> <div class="col-md-4"> <div class="tagcloud01"> <h5>热门标签</h5> <ul> <li><a href="/tutorial/1">HTML</a></li> <li><a href="/tutorial/25">HTML5</a></li> <li><a href="/tutorial/2">CSS</a></li> <li><a href="/tutorial/26">CSS3</a></li> <li><a href="/tutorial/22">JavaScript</a></li> <li><a href="/tutorial/23">jQuery</a></li> <li><a href="/tutorial/39">Node.js</a></li> <li><a href="/tutorial/13">SQL</a></li> <li><a href="/tutorial/14">MySQL</a></li> <li><a href="/tutorial/3">C语言</a></li> <li><a href="/tutorial/4">Java</a></li> <li><a href="/tutorial/7">Python</a></li> <li><a href="/tutorial/41">Django</a></li> <li><a href="/tutorial/74">Numpy</a></li> <li><a href="/tutorial/159">PHP</a></li> <li><a href="/tutorial/63">Laravel</a></li> <li><a href="/tutorials#大数据">大数据</a></li> <li><a href="/tutorials#人工智能">人工智能</a></li> </ul> </div> </div> <!-- 第三列 --> <div class="col-md-2"> <h5>学习线路图</h5> <ul class="list-group"> <a href="/blog/article/2018/10/26/7.html">Python</a> <a href="/blog/article/2018/10/26/8.html">Java</a> <a href="/blog/article/2018/10/26/9.html">PHP</a> <a href="/blog/article/2018/10/26/5.html">数据库</a> <a href="/blog/article/2018/10/26/10.html">大数据</a> <a href="/blog/article/2018/10/26/11.html">人工智能</a> </ul> </div> <!-- 第四列 --> <div class="col-md-2"> <h5>友情链接</h5> <ul class="list-group"> <a href="/">CodingDict</a> <a href="/courses">实战课程</a> <a href="/tutorials">免费教程</a> <a href="/document">中文文档</a> <a href="/tools/index.html">在线工具</a> <a href="/blog">博客</a> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> <div class="row"> <div class="col-md-8"> <p>© Copyright 2010-2017. 编程字典版权所有.</p> </div> <div class="col-md-4"> <nav id="sub-menu"> <ul> <li><a href="http://www.codingdict.com">CodingDict</a></li> <li><a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=heLw6u3q6_L-7ey0tbXF4_r96OTs6avm6ug" style="text-decoration:none;">意见反馈</a></li> <li style="display:none"> <script> $(function () { // 延迟CNZZ统计, 以免影响页面载入 var cz = document.createElement("script"); cz.src = "//s11.cnzz.com/z_stat.php?id=1274745527&web_id=1274745527"; document.getElementsByTagName('body')[0].appendChild(cz); }); </script> </li> </ul> </nav> </div> </div> </div> </div> </footer> </body> </html>