3.1 多种语言显示欢迎

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

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

  1. <!DOCTYPE html>
  3. <html xmlns:th="http://www.thymeleaf.org">
  5.   <head>
  6.     <title>Good Thymes Virtual Grocery</title>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8.     <link rel="stylesheet" type="text/css" media="all" 
  9.           href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" />
  10.   </head>
  12.   <body>
  14.     <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
  16.   </body>
  18. </html>

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

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

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

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

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

  1. <!DOCTYPE html>
  3. <html>
  5.   <head>
  6.     <title>Good Thymes Virtual Grocery</title>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8.     <link rel="stylesheet" type="text/css" media="all" 
  9.           href="../../css/gtvg.css" data-th-href="@{/css/gtvg.css}" />
  10.   </head>
  12.   <body>
  14.     <p data-th-text="#{home.welcome}">Welcome to our grocery store!</p>
  16.   </body>
  18. </html>

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

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