可能是最全的Thymeleaf參考手冊（十三）：文字模板模式

字語法

在Thymeleaf的三種模板模式被認為是文字：TEXT，JAVASCRIPT和CSS。這將它們與標記模板模式區分開：HTML和 XML。

文本模板模式和標記模式之間的主要區別在于，在文本模板中，沒有標簽可以插入屬性形式的邏輯，因此我們必須依靠其他機制。

這些機制的第一個也是最基本的是內聯的，我們已經在上一章中進行了詳細介紹。內聯語法是在文本模板模式下輸出表達式結果的最簡單方法，因此，這是文本電子郵件完美有效的模板。

 Dear [(${name})],

  Please find attached the results of the report you requested
  with name "[(${report.name})]".

  Sincerely,
    The Reporter.

即使沒有標簽，上面的示例也是一個完整且有效的Thymeleaf模板，可以在 TEXT 模板模式下執行。

但是，為了包含比單純的輸出表達式更復雜的邏輯，我們需要一種新的非基于標記的語法：

[# th:each="item : ${items}"]
  - [(${item})]
[/]

實際上是更冗長的精簡版本：

[#th:block th:each="item : ${items}"]
  - [#th:block th:utext="${item}" /]
[/th:block]

請注意，這種新語法是如何基于聲明為的元素（即可處理標簽）[#element ...] 而不是 <element ...>。元素以 [#element ...] 開頭，以 [/element] 閉合，并且可以通過 / 將開始元素最小化來聲明獨立標簽，該方式幾乎等同于XML標簽：[#element ... /]。

標準方言僅包含用于以下元素之一的處理器：th:block，盡管我們可以在方言中對此進行擴展并以通常的方式創建新元素。另外，th:block 元素（[#th:block ...] ... [/th:block]）可以縮寫為空字符串（[# ...] ... [/]），因此上述代碼塊實際上等效于：

[# th:each="item : ${items}"]
  - [# th:utext="${item}" /]
[/]

給定 [# th:utext="${item}" /] 等效于內聯的未轉義表達式，我們可以使用它來減少代碼量。因此，我們結束了上面看到的代碼的第一個片段：

[# th:each="item : ${items}"]
  - [(${item})]
[/]

請注意，文本語法要求元素對稱（沒有未關閉的標簽）和帶引號的屬性 – XML樣式比HTML樣式更多。

我們來看一個更完整的TEXT模板示例，即純文本電子郵件模板：

Dear [(${customer.name})],

This is the list of our products:

[# th:each="prod : ${products}"]
   - [(${prod.name})]. Price: [(${prod.price})] EUR/kg
[/]

Thanks,
  The Thymeleaf Shop

執行后，其結果可能類似于：

Dear Mary Ann Blueberry,

This is the list of our products:

   - Apricots. Price: 1.12 EUR/kg
   - Bananas. Price: 1.78 EUR/kg
   - Apples. Price: 0.85 EUR/kg
   - Watermelon. Price: 1.91 EUR/kg

Thanks,
  The Thymeleaf Shop

JAVASCRIPT 模板模式下的另一個示例（greeter.js文件）將作為文本模板進行處理，然后從HTML頁面調用該結果。請注意，這不是HTML模板中的 <script> 塊，而是 .js 單獨作為模板處理的文件：

var greeter = function() {

    var username = [[${session.user.name}]];

    [# th:each="salut : ${salutations}"]    
      alert([[${salut}]] + " " + username);
    [/]

};

執行后，其結果可能類似于：

var greeter = function() {

    var username = "Bertrand \"Crunchy\" Pear";

      alert("Hello" + " " + username);
      alert("Ol\u00E1" + " " + username);
      alert("Hola" + " " + username);

};

轉義元素屬性

為了避免與模板的其他部分可能會以其他方式處理的交互（例如，HTML模板內的文本模式），Thymeleaf 3.0允許轉義其文本語法中元素的屬性。所以：

TEXT 模板模式下的屬性將采用HTML轉義。
JAVASCRIPT 模板模式下的屬性將是JavaScript非轉義的。
CSS 模板模式下的屬性將采用CSS換碼。

因此，這在文本模式模板中是完全可以的（請注意 >）：

 [# th:if="${120<user.age}"]
     Congratulations!
 [/]

當然，< 在實際的文本模板中這沒有任何意義，但是如果我們用包含上面代碼的th:inline="text" 代碼塊來處理HTML模板，并且希望確保我們的瀏覽器在靜態打開文件作為原型時，不使用 <user.age 作為起始標記的名稱。

可擴展性

這種語法的優點之一是它與標記語法一樣可擴展。開發人員仍然可以使用自定義元素和屬性來定義自己的方言，為它們應用前綴（可選），然后在文本模板模式下使用它們：

 [#myorg:dosomething myorg:importantattr="211"]some text[/myorg:dosomething]

純文本原型注釋塊：添加代碼

在JAVASCRIPT 和 CSS 模板模式（不適用于 TEXT），允許包括一個特殊的注釋語法之間的代碼 /*[+...+]*/，這樣Thymeleaf會處理模板時自動取消注釋這樣的代碼：

var x = 23;

/*[+

var msg  = "This is a working application";

+]*/

var f = function() {
    ...

將解析為：

var x = 23;

var msg  = "This is a working application";

var f = function() {
...

也可以在這些注釋中包含表達式，它們將被評估：

var x = 23;

/*[+

var msg  = "Hello, " + [[${session.user.name}]];

+]*/

var f = function() {
...

文本解析器級注釋塊：刪除代碼

在類似于僅原型的注釋塊的方式，所有三個文本模板模式（TEXT，JAVASCRIPT 和 CSS）使其能夠指示Thymeleaf特殊時間移除代碼/*[- */ 和 /* -]*/ 標志，就像這樣：

var x = 23;

/*[- */

var msg  = "This is shown only when executed statically!";

/* -]*/

var f = function() {
...

或在 TEXT 模式下：

...
/*[- Note the user is obtained from the session, which must exist -]*/
Welcome [(${session.user.name})]!
...

自然的JavaScript和CSS模板

如之前所述，JavaScript和CSS內聯提供了將內聯表達式包含在JavaScript / CSS注釋中的可能性，例如：

...
var username = /*[[${session.user.name}]]*/ "Sebastian Lychee";
...

解析后結果為：

...
var username = "John Apricot";
...

實際上，可以將這種將內聯表達式包含在注釋中的相同技巧可用于整個文本模式語法：

/*[# th:if="${user.admin}"]*/
    alert('Welcome admin');
/*[/]*/

如果模板是靜態打開的（因為它是100％有效的JavaScript），并且如果用戶是管理員運行模板，則將在上面的代碼中顯示該警報。它等效于：

[# th:if="${user.admin}"]
   alert('Welcome admin');
[/]

實際上是模板解析期間初始版本轉換成的代碼。

但是請注意，注釋行中的換行元素不會像內聯表達式那樣，清除其所在的行（直到一直在右邊找到a ;為止）。這種行為只適用于內聯輸出表達式。

因此Thymeleaf 3.0允許以自然模板的形式開發復雜的JavaScript腳本和CSS樣式表，這些模板既可以作為原型也可以作為工作模板使用。

TML文本格式化

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文檔標題</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>

</body>
</html>

輸出：

其他格式：

這個文本是加粗的

這個文本是斜體的

<big>這個文本字體放大</big>

這個文本是縮小的

HTML文本格式化標簽

標簽	描述
<b>	定義粗體文本
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號字
<strong>	定義加重語氣
<sub>	定義下標字
<sup>	定義上標字
<ins>	定義插入字
<del>	定義刪除字

HTML“計算機輸出”標簽

標簽	描述
<code>	定義計算機代碼
<kbd>	定義鍵盤碼
<samp>	定義計算機代碼樣本
<var>	定義變量
<pre>	定義預格式文本

HTML引文，引用，及標簽定義

標簽	描述
<abbr>	定義縮寫
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長的引用
<q>	定義短的引用語
<cite>	定義引用、引證
<dfn>	定義一個定義項目。

個好的文本編輯器對于想要建立網站或進行編碼的任何人都是必不可少的。這對于習慣于面面俱到的環境的Mac開發人員而言更加明顯。對于他們來說存在一系列不同的優質軟件之選。今天小編將介紹幾款Mac上好用的HTML文本編輯器，對于每一款文本編輯器，小編將對對其中的亮點和不足之處進行了簡單的描述。

Atom（免費）

Atom被公認為Mac上最好的免費文本編輯器，以Node.js進行編寫，并嵌于GitControl中。它可以作為單純的Mac文本編輯器使用，也可以作為源代碼編輯器來使用。通過插件程序的使用，此應用支持很多語言，如HTML, CSS, C/C++, Objective-C, Java, Go, C#, JavaScript, Python, PHP, Perl, XML, Mustache, Clojure, Ruby等等，使之成為了現代開發人員的有用工具。

其部分有用的功能包括多標簽編輯，自動完成，多面板組，一個文件系統瀏覽器，優秀的導航選項，以及軟件包管理器。此外，Atom的一項非常重要的功能在于數以萬計的虛擬免費軟件包的可用性，其充分增強了它的功能性。

它的用戶界面非常友好，同時還提供一系列不同的主題可供用戶根據自己的喜好來選擇可視化環境。

一般而言，Atom可謂是明智之選，尤其是對于MEAN網頁開發人員而言。

Visual Studio(免費)

像Atom一樣，Visual Studio Code是一個功能強大的綜合應用程序，可以作為HTML編輯器使用。VS Code是一款輕量級的文本和腳本編輯器，以擴展對插件的支持為概念，與Microsoft的功能強大的Visual Studio不會混淆。

有一些插件可用于在Code中編寫和運行Shell腳本，編寫Markdown文檔，甚至編寫AppleScript。那就對了; 您可以使用Microsoft的文本編輯器來創建僅在Apple計算機上運行的腳本。

但是輕量級的Visual Studio意味著對插件的依賴，但是它具有響應能力，您不用在意那些永遠不會使用的功能。

MacVim （免費）

MacVim是一個將Vim程序員編輯器帶入Mac的項目。另一方面，Vim基于強大的Vi應用程序，這是一個為Unix操作系統開發的文本編輯器。除了其他功能之外，MacVim應用程序還支持使用熱鍵，包括全屏模式，允許您使用透明背景等等。

盡管Vim已內置到操作系統中，仍有很多人對MacVim感興趣。它具有功能完整的菜單欄控件和比Apple維護的Vim更新的版本，對于新手來說，還算友好！

Sublime Text

Sublime Text是一款商業化的Mac文本編輯器。這款編輯器采用了Python應用程序接口（API），并支持多種語言。此外，它的功能性通過插件的形式進一步予以強化，這些插件通常是由社團進行開發的，根據免費軟件許可予以開放使用。Sublime Text擁有超級友好的界面，有22種不同的主題可供選擇。在其眾多有趣功能當中有一項被稱為免分心模式，在該模式下，屏幕中心只包含文本。

其他的功能包括建立在簡單的JSON文件基礎之上的高級定制功能；以及分割編輯，也即編輯能夠在兩個不同的文件或一個文件的不同部分之間完成。簡單來說，它的快速文件和文本行導航，它的跨平臺支持，以及以項目為本的參數選擇，使得這款應用經常被評為“最佳Mac文本編輯器”。

TextMate

強大，簡單且輕巧的TextMate是許多Mac專業人士的首選，不難理解為什么。該編輯器支持多種語言和語法，選項卡以及特定于語言的方法，可以節省您的時間和精力。

TextMate包含摘要，宏和作用域確定功能，可在不逐步進入完整IDE范圍的情況下極大地加快工作流程。開發人員旨在將“ Apple的操作系統方法帶入文本編輯器世界”，這是為什么這么多人喜歡TextMate的一個很好的總結。

這是一個易于使用的簡單工具，界面簡潔，價格合理。盡管開發有時會停滯不前，但TextMate仍然堅持不懈地追隨專業用戶。

BBEdit

它是典型的Mac文本編輯器，與TextWrangler來自同一開發人員。盡管缺少Atom的新鮮度或Sublime Text中清晰的UI，但BBEdit是針對macOS從頭開始構建的，針對該平臺進行了優化，并采用Mac方式進行文本編輯。

這意味著對于普通的Mac用戶來說，鍵盤快捷鍵是有意義的，以及遵循Apple的許多設計敏感性的文本編輯方法。它還支持Bonjour等Mac技術。這消除了其他應用程序中出現的一些進入障礙，但導致UI與其競爭對手相比更加笨拙。

BBEdit非常適合HTML和文本編輯，并支持通過FTP / SFTP進行遠程編輯。該應用程序高度可定制，從語法著色到菜單選項，用戶定義的功能，鍵盤快捷鍵以及直接在該應用程序中的macOS終端支持。

什么是最好的HTML文本編輯器？它不一定是功能最多的那個。但一定是最適合您工作方式的那一個。小編建議您在決定之前先進行一些測試，找到最適合自己的那款！

（來自Mac下載macz.com）

在線咨詢

上一篇：優酷視頻變清爽的瀏覽器開源擴展插件Youku HTML5 Player
下一篇：html欄目邊框過渡動畫小效果

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商