Thymeleaf教程（三）建立一個多語言的首頁

時間 2019-11-19

標籤 thymeleaf 教程建立一個多語言首頁简体版

原文原文鏈接

一個多語言的首頁

咱們要建立一個多語言的首頁。css

第一個版本咱們將編寫的頁面將極其簡單:只是一個標題和一個歡迎信息。這是咱們的/WEBINF/templates/home.html文件html

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      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>

你會發現，此xhtml文件使用瀏覽器單獨打開的話，能夠被良好的顯示，由於它並不包含其餘非法的XHTML標籤（瀏覽器會忽視全部它不明白的屬性，好比 th:text ）。數據庫

讓咱們看看上面代碼作了什麼。瀏覽器

首先在thymeleaf名稱空間被描述爲th:*屬性:ui

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

而後咱們添加了 th:text=」#{home.welcome}」屬性到P裏。spa

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

在這裏咱們用了兩種不一樣的Thymeleaf Standard Dialect特性：code

」th:text「屬性,將會解析出一個結果來替換」Welcome to our grocery store!「
」#{home.welcome}「表達式,表達式將會在外部環境中獲取指定的KEY的文本並返回。

那麼外部的文本在哪裏呢？orm

Thymeleaf的外部化文本的位置是徹底可配置的,而且它將取決於　org.thymeleaf.messageresolver。IMessageResolver的具體實現。一般咱們會使用*.properties,但咱們能夠創造咱們本身的實現,例如,從數據庫中獲取文本。xml

然而,在咱們在初始化咱們的模板引擎時沒有指定消息解析器,這意味着咱們的應用程序使用標準的消息解析器,此類會實現類org.thymeleaf.messageresolver。StandardMessageResolverhtm

那麼消息解析器會在」/WEB-INF/templates/home.html「文件的相同目錄下去尋找同名的 .properties文件,舉個栗子：

/WEB-INF/templates/home_en.properties for English texts.
/WEB-INF/templates/home_es.properties for Spanish language texts.
/WEB-INF/templates/home_pt_BR.properties for Portuguese (Brazil) language texts.
/WEB-INF/templates/home.properties for default texts
(if locale is not matched).

home.properties文件中的內容以下：

home.welcome=歡迎光臨本店。

以上就是咱們使用Thymeleaf建立的模板，接下來是服務端的controller。

環境

讓咱們回到第二課建立的HomeController

public class HomeController implements IGTVGController {
    public void process(HttpServletRequest request, HttpServletResponse response,
                ServletContext servletContext, TemplateEngine templateEngine) {
        WebContext ctx =new WebContext(request, response, servletContext, request.getLocale());
        templateEngine.process("home", ctx, response.getWriter());
    }
}

這步將建立運行的服務端的環境。並映射路徑。

templateEngine.process("home", ctx, response.getWriter());

而後運行程序。結果以下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Good Thymes Virtual Grocery</title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <link rel="stylesheet" type="text/css" media="all" href="/gtvg/css/gtvg.css" />
    </head>
    <body>
        <p>歡迎光臨本店！</p>
    </body>
</html>

使用和顯示變量

如今讓咱們添加更多的內容到咱們的主頁。例如,咱們可能但願顯示下面的日期咱們的消息文本中,像這樣:

Welcome to our fantastic grocery store!
Today is: 12 july 2010

那麼首先咱們將更改controller文件，並把日期參數添加進去。

public void process(HttpServletRequest request, HttpServletResponse response,
            ServletContext servletContext, TemplateEngine templateEngine) {
    SimpleDateFormat dateFormat = new SimpleDateFormat("dd MMMM yyyy");
    Calendar cal = Calendar.getInstance();
    WebContext ctx =new WebContext(request, response, servletContext, request.getLocale());
    ctx.setVariable("today", dateFormat.format(cal.getTime()));
    templateEngine.process("home", ctx, response.getWriter());
}

咱們增長了一個String類型的日期。而且把此日期」today「放到模板中

<body>
    <p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
    <p>Today is: <span th:text="${today}">13 February 2011</span></p>
</body>

這樣就完成了。這裏使用了${。。}表達試，這是一個變量表達式,它能解析OGNL表達式的語言，此語言將會解析上下文環境中的變量。