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>
 

• 1

意味著 <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>

• 1

同時也能夠支援相對路徑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} + '!'">

• 1

一種更簡潔的方式是：

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

• 1

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

4、運算子

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

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

• 1

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

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

• 1
• 2

二、常用的表示式

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">

• 1

常用th標籤

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 digits, and also thousands and 
 * decimal separator.
 * Also works with arrays, lists or sets
 */
${#numbers.formatDecimal(num,3,'POINT',2,'COMMA')}
${#numbers.arrayFormatDecimal(numArray,3,'POINT',2,'COMMA')}
${#numbers.listFormatDecimal(numList,3,'POINT',2,'COMMA')}
${#numbers.setFormatDecimal(numSet,3,'POINT',2,'COMMA')}


/* 
 * =====================
 * Formatting currencies
 * =====================
 */

${#numbers.formatCurrency(num)}
${#numbers.arrayFormatCurrency(numArray)}
${#numbers.listFormatCurrency(numList)}
${#numbers.setFormatCurrency(numSet)}


/* 
 * ======================
 * Formatting percentages
 * ======================
 */

${#numbers.formatPercent(num)}
${#numbers.arrayFormatPercent(numArray)}
${#numbers.listFormatPercent(numList)}
${#numbers.setFormatPercent(numSet)}

/* 
 * Set minimum integer digits and (exact) decimal digits.
 */
${#numbers.formatPercent(num, 3, 2)}
${#numbers.arrayFormatPercent(numArray, 3, 2)}
${#numbers.listFormatPercent(numList, 3, 2)}
${#numbers.setFormatPercent(numSet, 3, 2)}


/*
 * ===============
 * Utility methods
 * ===============
 */

/*
 * Create a sequence (array) of integer numbers going
 * from x to y
 */
${#numbers.sequence(from,to)}
${#numbers.sequence(from,to,step)}

字串:#strings

/*
 * Null-safe toString()
 */
${#strings.toString(obj)}                           // also array*, list* and set*

/*
 * Check whether a String is empty (or null). Performs a trim() operation before check
 * Also works with arrays, lists or sets
 */
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}

/*
 * Perform an 'isEmpty()' check on a string and return it if false, defaulting to
 * another specified string if true.
 * Also works with arrays, lists or sets
 */
${#strings.defaultString(text,default)}
${#strings.arrayDefaultString(textArr,default)}
${#strings.listDefaultString(textList,default)}
${#strings.setDefaultString(textSet,default)}

/*
 * Check whether a fragment is contained in a String
 * Also works with arrays, lists or sets
 */
${#strings.contains(name,'ez')}                     // also array*, list* and set*
${#strings.containsIgnoreCase(name,'ez')}           // also array*, list* and set*

/*
 * Check whether a String starts or ends with a fragment
 * Also works with arrays, lists or sets
 */
${#strings.startsWith(name,'Don')}                  // also array*, list* and set*
${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*

/*
 * Substring-related operations
 * Also works with arrays, lists or sets
 */
${#strings.indexOf(name,frag)}                      // also array*, list* and set*
${#strings.substring(name,3,5)}                     // also array*, list* and set*
${#strings.substringAfter(name,prefix)}             // also array*, list* and set*
${#strings.substringBefore(name,suffix)}            // also array*, list* and set*
${#strings.replace(name,'las','ler')}               // also array*, list* and set*

/*
 * Append and prepend
 * Also works with arrays, lists or sets
 */
${#strings.prepend(str,prefix)}                     // also array*, list* and set*
${#strings.append(str,suffix)}                      // also array*, list* and set*

/*
 * Change case
 * Also works with arrays, lists or sets
 */
${#strings.toUpperCase(name)}                       // also array*, list* and set*
${#strings.toLowerCase(name)}                       // also array*, list* and set*

/*
 * Split and join
 */
${#strings.arrayJoin(namesArray,',')}
${#strings.listJoin(namesList,',')}
${#strings.setJoin(namesSet,',')}
${#strings.arraySplit(namesStr,',')}                // returns String[]
${#strings.listSplit(namesStr,',')}                 // returns List<String>
${#strings.setSplit(namesStr,',')}                  // returns Set<String>

/*
 * Trim
 * Also works with arrays, lists or sets
 */
${#strings.trim(str)}                               // also array*, list* and set*

/*
 * Compute length
 * Also works with arrays, lists or sets
 */
${#strings.length(str)}                             // also array*, list* and set*

/*
 * Abbreviate text making it have a maximum size of n. If text is bigger, it
 * will be clipped and finished in "..."
 * Also works with arrays, lists or sets
 */
${#strings.abbreviate(str,10)}                      // also array*, list* and set*

/*
 * Convert the first character to upper-case (and vice-versa)
 */
${#strings.capitalize(str)}                         // also array*, list* and set*
${#strings.unCapitalize(str)}                       // also array*, list* and set*

/*
 * Convert the first character of every word to upper-case
 */
${#strings.capitalizeWords(str)}                    // also array*, list* and set*
${#strings.capitalizeWords(str,delimiters)}         // also array*, list* and set*

/*
 * Escape the string
 */
${#strings.escapeXml(str)}                          // also array*, list* and set*
${#strings.escapeJava(str)}                         // also array*, list* and set*
${#strings.escapeJavaScript(str)}                   // also array*, list* and set*
${#strings.unescapeJava(str)}                       // also array*, list* and set*
${#strings.unescapeJavaScript(str)}                 // also array*, list* and set*

/*
 * Null-safe comparison and concatenation
 */
${#strings.equals(first, second)}
${#strings.equalsIgnoreCase(first, second)}
${#strings.concat(values...)}
${#strings.concatReplaceNulls(nullValue, values...)}

/*
 * Random
 */
${#strings.randomAlphanumeric(count)}

布林:#bools

/*
 * Evaluate a condition in the same way that it would be evaluated in a th:if tag
 * (see conditional evaluation chapter afterwards).
 * Also works with arrays, lists or sets
 */
${#bools.isTrue(obj)}
${#bools.arrayIsTrue(objArray)}
${#bools.listIsTrue(objList)}
${#bools.setIsTrue(objSet)}

/*
 * Evaluate with negation
 * Also works with arrays, lists or sets
 */
${#bools.isFalse(cond)}
${#bools.arrayIsFalse(condArray)}
${#bools.listIsFalse(condList)}
${#bools.setIsFalse(condSet)}

/*
 * Evaluate and apply AND operator
 * Receive an array, a list or a set as parameter
 */
${#bools.arrayAnd(condArray)}
${#bools.listAnd(condList)}
${#bools.setAnd(condSet)}

/*
 * Evaluate and apply OR operator
 * Receive an array, a list or a set as parameter
 */
${#bools.arrayOr(condArray)}
${#bools.listOr(condList)}
${#bools.setOr(condSet)}

陣列 :#arrays

/*
 * Converts to array, trying to infer array component class.
 * Note that if resulting array is empty, or if the elements
 * of the target object are not all of the same class,
 * this method will return Object[].
 */
${#arrays.toArray(object)}

/*
 * Convert to arrays of the specified component class.
 */
${#arrays.toStringArray(object)}
${#arrays.toIntegerArray(object)}
${#arrays.toLongArray(object)}
${#arrays.toDoubleArray(object)}
${#arrays.toFloatArray(object)}
${#arrays.toBooleanArray(object)}

/*
 * Compute length
 */
${#arrays.length(array)}

/*
 * Check whether array is empty
 */
${#arrays.isEmpty(array)}

/*
 * Check if element or elements are contained in array
 */
${#arrays.contains(array, element)}
${#arrays.containsAll(array, elements)}