Thymeleaf基本語法

阿新 • • 發佈：2018-11-14

Thymeleaf是Web和獨立環境的現代伺服器端Java模板引擎，能夠處理HTML，XML，JavaScript，CSS甚至純文字。

Thymeleaf的主要目標是提供一種優雅和高度可維護的建立模板的方式。為了實現這一點，它建立在自然模板的概念上，將其邏輯注入到模板檔案中，不會影響模板被用作設計原型。這改善了設計的溝通，彌補了設計和開發團隊之間的差距。

Thymeleaf也從一開始就設計了Web標準 - 特別是HTML5 - 允許您建立完全驗證的模板，如果這是您需要的

springboot 用thymeleaf 還是挺不錯的

溫馨提示：點選右邊展示面板 –> 選擇經典白這個主題可能會更加適合。

一、標準表示式語法

它又分為：

訊息
變數
選擇表示式
連結URL
片段
文字
附加文字
字面替代
算術運算
比較與平等
條件表示式
預設表示式
無操作令牌
資料轉換/格式化
預處理

我就只介紹常用的了

${…} 表示式實際上是在上下文中包含的變數的地圖上執行的OGNL（Object-Graph Navigation Language）物件。

1、變數

<p 
>Today is: <span th:text="${today}">13 february 2011</span>.</p>

意味著 <span> 標籤中的內容會被表示式${today}的值所替代，無論模板中它的內容是什麼，之所以在模板中“多此一舉“地填充它的內容，完全是為了它能夠作為原型在瀏覽器中直接顯示出來。
假設today的值為2015年8月14日，那麼渲染結果為：<p>Today is: 2015年8月14日.</p>。可見Thymeleaf的基本變數和JSP一樣，都使用${.}

表示獲取變數的值。

2、URL

URL在Web應用模板中佔據著十分重要的地位，需要特別注意的是Thymeleaf對於URL的處理是通過語法@{…}來處理的。Thymeleaf支援絕對路徑URL：

<a th:href="@{http://www.thymeleaf.org}">Thymeleaf</a>

同時也能夠支援相對路徑URL：

另外，如果需要Thymeleaf對URL進行渲染，那麼務必使用th:href，th:src等屬性，下面是一個例子


  
   
    
     
    
    
     
      <!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
     
    
   
    
     
    
    
     
      <a href="details.html" 
     
    
   
    
     
    
    
        
      th:href=
      "@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view
      </a>
     
    
   
    
     
    
    
     
      <!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
     
    
   
    
     
    
    
     
      <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view
      </a>
     
    
   
    
     
    
    
     
      <!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
     
    
   
    
     
    
    
     
      <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view
      </a>

幾點說明：

上例中URL最後的(orderId=${o.id})表示將括號內的內容作為URL引數處理，該語法避免使用字串拼接，大大提高了可讀性@{...}表示式中可以通過{orderId}訪問Context中的orderId變數@{/order}是Context相關的相對路徑，在渲染時會自動新增上當前Web應用的Context名字，假設context名字為app，那麼結果應該是/app/order

3、字串替換

很多時候可能我們只需要對一大段文字中的某一處地方進行替換，可以通過字串拼接操作完成：

<span th:text="'Welcome to our application, ' + ${user.name} + '!'">

一種更簡潔的方式是：

<span th:text="|Welcome to our application, ${user.name}!|">

當然這種形式限制比較多，|…|中只能包含變量表達式${…}，不能包含其他常量、條件表示式等。

4、運算子

在表示式中可以使用各類算術運算子，例如+, -, *, /, %

th:with="isEven=(${prodStat.count} % 2 == 0)"

邏輯運算子>, <, <=,>=，==,!=都可以使用，唯一需要注意的是使用<,>時需要用它的HTML轉義符：


  
   
    
     
    
    
     
      th:
      if=
      "${prodStat.count} &gt; 1"
     
    
   
    
     
    
    
     
      th:text=
      "'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"

二、常用的表示式

1、for迴圈

使用 th:each 標籤


  
   
    
     
    
    
     
      <div 
      class=
      "row" >
     
    
   
    
     
    
    
         
      <div th:each="url,lstat:${links}">
     
    
   
    
     
    
    
             
      <div class="col-md-2"  th:title="${url.description}"  title="一個人，信你所信，為你所現" >
     
    
   
    
     
    
    
                 
      <strong th:text="${url.link_name}">這個冬天不太冷
      </strong>
     
    
   
    
     
    
    
                 
      <a href="http://www.lrshuai.top" th:href="${url.link}" th:text="${url.link}" >http://www.lrshuai.top
      </a>
     
    
   
    
     
    
    
             
      </div>
     
    
   
    
     
    
    
         
      </div>
     
    
   
    
     
    
    
     
      <
      /div>

lstat稱作狀態變數，屬性有：

index:當前迭代物件的index（從0開始計算）
count: 當前迭代物件的index(從1開始計算)
size:被迭代物件的大小
current:當前迭代變數
even/odd:布林值，當前迴圈是否是偶數/奇數（從0開始計算）
first:布林值，當前迴圈是否是第一個
last:布林值，當前迴圈是否是最後一個

2、條件求值

If/Unless

demo


  
   
    
     
    
    
     
      <div 
      class=
      "row" >
     
    
   
    
     
    
    
         
      <div th:each="url,lstat:${links}">
     
    
   
    
     
    
    
             
      <div class="col-md-2"  th:title="${url.description}" th:if="${lstat.index}%4 == 0" >
     
    
   
    
     
    
    
                 
      <strong th:text="${url.link_name}">這個冬天不太冷
      </strong>
     
    
   
    
     
    
    
                 
      <a href="http://www.lrshuai.top" th:href="${url.link}" th:text="${url.link}">http://www.lrshuai.top
      </a>
     
    
   
    
     
    
    
             
      </div>
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
             
      <div class="col-md-2 col-md-offset-1" th:title="${url.description}" th:unless="${lstat.index}%4==0">
     
    
   
    
     
    
    
                 
      <strong th:text="${url.link_name}">這個冬天不太冷
      </strong>
     
    
   
    
     
    
    
                 
      <a href="http://www.lrshuai.top" th:href="${url.link}" th:text="${url.link}"  >http://www.lrshuai.top
      </a>
     
    
   
    
     
    
    
             
      </div>
     
    
   
    
     
    
    
         
      </div>
     
    
   
    
     
    
    
     
      <
      /div>

Thymeleaf中使用th:if和th:unless屬性進行條件判斷，上面的例子中，<div>標籤只有在th:if中條件成立時才顯示：

th:unless於th:if恰好相反，只有表示式中的條件不成立，才會顯示其內容。

Switch

Thymeleaf同樣支援多路選擇Switch結構：


  
   
    
     
    
    
     
      <div th:switch="${user.role}">
     
    
   
    
     
    
    
       
      <p th:case="'admin'">User is an administrator
      </p>
     
    
   
    
     
    
    
       
      <p th:case="#{roles.manager}">User is a manager
      </p>
     
    
   
    
     
    
    
     
      </div>

預設屬性default可以用*表示：


  
   
    
     
    
    
     
      <div th:switch="${user.role}">
     
    
   
    
     
    
    
       
      <p th:case="'admin'">User is an administrator
      </p>
     
    
   
    
     
    
    
       
      <p th:case="#{roles.manager}">User is a manager
      </p>
     
    
   
    
     
    
    
       
      <p th:case="*">User is some other thing
      </p>
     
    
   
    
     
    
    
     
      </div>

3、內嵌變數

為了模板更加易用，Thymeleaf還提供了一系列Utility物件（內置於Context中），可以通過#直接訪問：

dates ： java.util.Date的功能方法類。
calendars : 類似#dates，面向java.util.Calendar
numbers : 格式化數字的功能方法類
strings : 字串物件的功能類
objects: 對objects的功能類操作。
bools: 對布林值求值的功能方法。
arrays：對陣列的功能類方法。
lists: 對lists功能類方法
sets
maps

說說我常用得方法吧，太多了，你也不一定看完

(1)、字串太多，顯示…


  
   
    
     
    
    
     
      # 這裡的含義是 如果 atc.text 這個變數多餘200個字元，後面顯示...
     
    
   
    
     
    
    
     
      <p th:text=
      "${#strings.abbreviate(atc.text,200)}">內容內容內容</p>

(2)、陣列判斷是否為空

<div th:if="${#lists.isEmpty(arrays)} " class="blog-article">

(3)、request 獲取絕對路徑

<img th:src="${#httpServletRequest.getContextPath()}+${atc.img}" src="/images/logo.jpg">

常用th標籤

標籤	說明	例子
th:id	替換id	`<input th:id="'xxx' + ${collect.id}"/>`
th:text	文字替換	`<p th:text="${collect.description}">description</p>`
th:utext	支援html的文字替換	`<p th:utext="${htmlcontent}">conten</p>`
th:object	替換物件	`<div th:object="${session.user}">`
th:value	屬性賦值	`<input th:value="${user.name}" />`
th:with	變數賦值運算	`<div th:with="isEven=${prodStat.count}%2==0"></div>`
th:style	設定樣式	`th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"`
th:onclick	點選事件	`th:onclick="'getCollect()'"`
th:each	屬性賦值	`tr th:each="user,userStat:${users}">`
th:if	判斷條件	`<a th:if="${userId == collect.userId}" >`
th:unless	和th:if判斷相反	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>`
th:href	連結地址	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />`
th:switch	多路選擇配合th:case 使用	`<div th:switch="${user.role}">`
th:case	th:switch的一個分支	`<p th:case="'admin'">User is an administrator</p>`
th:fragment	佈局標籤，定義一個程式碼片段，方便其它地方引用	`<div th:fragment="alert">`
th:include	佈局標籤，替換內容到引入的檔案	`<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />`
th:replace	佈局標籤，替換整個標籤到引入的檔案	`<div th:replace="fragments/header :: title"></div>`
th:selected	selected選擇框選中	`th:selected="(${xxx.id} == ${configObj.dd})"`
th:src	圖片類地址引入	`<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />`
th:inline	定義js指令碼可以使用變數	`<script type="text/javascript" th:inline="javascript">`
th:action	表單提交的地址	`<form action="subscribe.html" th:action="@{/subscribe}">`
th:remove	刪除某個屬性	`<tr th:remove="all">` 1.all:刪除包含標籤和所有的孩子。2.body:不包含標記刪除,但刪除其所有的孩子。3.tag:包含標記的刪除,但不刪除它的孩子。4.all-but-first:刪除所有包含標籤的孩子,除了第一個。5.none:什麼也不做。這個值是有用的動態評估。
th:attr	設定標籤屬性，多個屬性可以用逗號分隔	比如`<p th:attr="[email protected]{/image/aa.jpg},title=${title}">內容</p>`，這樣如果${title}=’這個是title’ 則結果就是`<p src="/image/aa.jpg" title="這個是title">內容</p>`

html 有的，它幾乎都有相對應的標籤

下面是一組的API

日期: #dates


  
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * ======================================================================
     
    
   
    
     
    
    
     
       * See javadoc API for class org.thymeleaf.expression.Dates
     
    
   
    
     
    
    
     
       * ======================================================================
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Format date with the standard locale format
     
    
   
    
     
    
    
     
       * Also works with arrays, lists or sets
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #dates.format(date)}
     
    
   
    
     
    
    
     
      ${
      #dates.arrayFormat(datesArray)}
     
    
   
    
     
    
    
     
      ${
      #dates.listFormat(datesList)}
     
    
   
    
     
    
    
     
      ${
      #dates.setFormat(datesSet)}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Format date with the ISO8601 format
     
    
   
    
     
    
    
     
       * Also works with arrays, lists or sets
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #dates.formatISO(date)}
     
    
   
    
     
    
    
     
      ${
      #dates.arrayFormatISO(datesArray)}
     
    
   
    
     
    
    
     
      ${
      #dates.listFormatISO(datesList)}
     
    
   
    
     
    
    
     
      ${
      #dates.setFormatISO(datesSet)}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Format date with the specified pattern
     
    
   
    
     
    
    
     
       * Also works with arrays, lists or sets
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #dates.format(date, 'dd/MMM/yyyy HH:mm')}
     
    
   
    
     
    
    
     
      ${
      #dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
     
    
   
    
     
    
    
     
      ${
      #dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
     
    
   
    
     
    
    
     
      ${
      #dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Obtain date properties
     
    
   
    
     
    
    
     
       * Also works with arrays, lists or sets
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #dates.day(date)}                    // also arrayDay(...), listDay(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.month(date)}                  // also arrayMonth(...), listMonth(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.monthName(date)}              // also arrayMonthName(...), listMonthName(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.monthNameShort(date)}         // also arrayMonthNameShort(...), listMonthNameShort(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.year(date)}                   // also arrayYear(...), listYear(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.dayOfWeek(date)}              // also arrayDayOfWeek(...), listDayOfWeek(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.dayOfWeekName(date)}          // also arrayDayOfWeekName(...), listDayOfWeekName(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.dayOfWeekNameShort(date)}     // also arrayDayOfWeekNameShort(...), listDayOfWeekNameShort(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.hour(date)}                   // also arrayHour(...), listHour(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.minute(date)}                 // also arrayMinute(...), listMinute(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.second(date)}                 // also arraySecond(...), listSecond(...), etc.
     
    
   
    
     
    
    
     
      ${
      #dates.millisecond(date)}            // also arrayMillisecond(...), listMillisecond(...), etc.
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Create date (java.util.Date) objects from its components
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #dates.create(year,month,day)}
     
    
   
    
     
    
    
     
      ${
      #dates.create(year,month,day,hour,minute)}
     
    
   
    
     
    
    
     
      ${
      #dates.create(year,month,day,hour,minute,second)}
     
    
   
    
     
    
    
     
      ${
      #dates.create(year,month,day,hour,minute,second,millisecond)}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Create a date (java.util.Date) object for the current date and time
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #dates.createNow()}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      ${
      #dates.createNowForTimeZone()}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Create a date (java.util.Date) object for the current date (time set to 00:00)
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #dates.createToday()}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      ${
      #dates.createTodayForTimeZone()}

數字:#numbers


  
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * ======================================================================
     
    
   
    
     
    
    
     
       * See javadoc API for class org.thymeleaf.expression.Numbers
     
    
   
    
     
    
    
     
       * ======================================================================
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * ==========================
     
    
   
    
     
    
    
     
       * Formatting integer numbers
     
    
   
    
     
    
    
     
       * ==========================
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 
     
    
   
    
     
    
    
     
       * Set minimum integer digits.
     
    
   
    
     
    
    
     
       * Also works with arrays, lists or sets
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #numbers.formatInteger(num,3)}
     
    
   
    
     
    
    
     
      ${
      #numbers.arrayFormatInteger(numArray,3)}
     
    
   
    
     
    
    
     
      ${
      #numbers.listFormatInteger(numList,3)}
     
    
   
    
     
    
    
     
      ${
      #numbers.setFormatInteger(numSet,3)}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /* 
     
    
   
    
     
    
    
     
       * Set minimum integer digits and thousands separator: 
     
    
   
    
     
    
    
     
       * 'POINT', 'COMMA', 'WHITESPACE', 'NONE' or 'DEFAULT' (by locale).
     
    
   
    
     
    
    
     
       * Also works with arrays, lists or sets
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #numbers.formatInteger(num,3,'POINT')}
     
    
   
    
     
    
    
     
      ${
      #numbers.arrayFormatInteger(numArray,3,'POINT')}
     
    
   
    
     
    
    
     
      ${
      #numbers.listFormatInteger(numList,3,'POINT')}
     
    
   
    
     
    
    
     
      ${
      #numbers.setFormatInteger(numSet,3,'POINT')}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * ==========================
     
    
   
    
     
    
    
     
       * Formatting decimal numbers
     
    
   
    
     
    
    
     
       * ==========================
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Set minimum integer digits and (exact) decimal digits.
     
    
   
    
     
    
    
     
       * Also works with arrays, lists or sets
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #numbers.formatDecimal(num,3,2)}
     
    
   
    
     
    
    
     
      ${
      #numbers.arrayFormatDecimal(numArray,3,2)}
     
    
   
    
     
    
    
     
      ${
      #numbers.listFormatDecimal(numList,3,2)}
     
    
   
    
     
    
    
     
      ${
      #numbers.setFormatDecimal(numSet,3,2)}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Set minimum integer digits and (exact) decimal digits, and also decimal separator.
     
    
   
    
     
    
    
     
       * Also works with arrays, lists or sets
     
    
   
    
     
    
    
     
       */
     
    
   
    
     
    
    
     
      ${
      #numbers.formatDecimal(num,3,2,'COMMA')}
     
    
   
    
     
    
    
     
      ${
      #numbers.arrayFormatDecimal(numArray,3,2,'COMMA')}
     
    
   
    
     
    
    
     
      ${
      #numbers.listFormatDecimal(numList,3,2,'COMMA')}
     
    
   
    
     
    
    
     
      ${
      #numbers.setFormatDecimal(numSet,3,2,'COMMA')}
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      /*
     
    
   
    
     
    
    
     
       * Set minimum integer digits and (exact) decimal d

Thymeleaf基本語法

一、標準表示式語法

1、變數

2、URL

3、字串替換

4、運算子

二、常用的表示式

1、for迴圈

2、條件求值

If/Unless

Switch

3、內嵌變數

常用th標籤

下面是一組的API

Thymeleaf基本語法

thymeleaf 基本語法

Thymeleaf 的基本語法

thymeleaf（2）基本語法

[C#] CSharp 基本語法

Swift基礎學習(一)基本語法

C# 基本語法

SQL語句基本語法

Xml一（基本語法和約束）、

Markdown 基本語法

Day1[下] - Python基礎基本語法、流程控制

python 基本語法速覽，快速入門

R的基本語法總結

1.基本語法

Kotlin VS Java：基本語法差異（轉載）

1go基本語法

shell--grep命令+正則表達式+基本語法

Shell第三篇：基本語法

js基本語法及註意事項

MarkDown基本語法

Thymeleaf基本語法

一、標準表示式語法

1、變數

2、URL

3、字串替換

4、運算子

二、常用的表示式

1、for迴圈

2、條件求值

If/Unless

Switch

3、內嵌變數

常用th標籤

下面是一組的API

相關推薦