3.1 多种语言显示欢迎

我们的第一个任务是为杂货店网站创建主页。

主页的第一版将会非常简单：一个标题和欢迎信息。这就是我们的/WEB-INF/templates/home.html文件：

<!DOCTYPE html>

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

  <head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" 
          href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
  </head>

  <body>

    <p th:text="#{home.welcome}">Welcome to our grocery store!</p>

  </body>

</html>

你注意到的第一件事是：这个文件是HTML5，可以被任何浏览器正确地表示，因为它没有包含任何非HTML标签（浏览器会忽略所有不认识的属性，比如th:text）。

但是，你也可能注意到这个模板实际上并不是一个有效的HTML5文档，因为HTML5规范不允许使用这些非标准属性（th:*）。实际上，我们甚至往<html>标签里加了xmlns:th属性，这样完全不是HTML5风格的东西：

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

这对模板的处理完全没有影响，但是它能像魔法一样，防止IDE抱怨这些th:*属性缺少命名空间的定义。

要是我们想要这个模板变成有效的HTML5，该怎么办呢？简单：使用Thymeleaf的数据属性语法，为属性名使用data-前缀，同时用连字符（-）代替冒号（:）：

<!DOCTYPE html>

<html>

  <head>
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" 
          href="../../css/gtvg.css" data-th-href="@{/css/gtvg.css}" />
  </head>

  <body>

    <p data-th-text="#{home.welcome}">Welcome to our grocery store!</p>

  </body>

</html>

HTML5规范允许自定义的data-前缀属性，所以用上面的代码，我们的模板就能成为有效的HTML5文档。

两种记法完全等价，可以互换。但是，为了简单起见，本教程将使用命名空间记法（`th:*`）。
而且，`th:*`记法更加普遍，在每一种Thymeleaf模板模式（XML，TEXT······）中都被允许,而`data-`记法只在HTML模式中被允许使用。

Previous3 使用文本 Next使用th:text以及外部化文本

Last updated 5 years ago