語法 · art-template

[TOC] # 語法 art-template 支持標準語法與原始語法。標準語法可以讓模板易讀寫，而原始語法擁有強大的邏輯表達能力。標準語法支持基本模板語法以及基本 JavaScript 表達式；原始語法支持任意 JavaScript 語句，這和 EJS 一樣。 ## 輸出 **標準語法** ```html {{value}} {{data.key}} {{data['key']}} {{a ? b : c}} {{a || b}} {{a + b}} ``` **原始語法** ```html <%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %> ``` 模板一級特殊變量可以使用 `$data` 加下標的方式訪問： ```html {{$data['user list']}} ``` ## 原文輸出 **標準語法** ```html {{@ value }} ``` **原始語法** ```html <%- value %> ``` > 原文輸出語句不會對 `HTML` 內容進行轉義處理，可能存在安全風險，請謹慎使用。 ## 條件 **標準語法** ```html {{if value}} ... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}} ``` **原始語法** ```html <% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %> ``` ## 循環 **標準語法** ```html {{each target}} {{$index}} {{$value}} {{/each}} ``` **原始語法** ```html <% for(var i = 0; i < target.length; i++){ %> <%= i %> <%= target[i] %> <% } %> ``` 1. `target` 支持 `array` 與 `object` 的迭代，其默認值為 `$data`。 2. `$value` 與 `$index` 可以自定義：`{% raw %}{{each target val key}}{% endraw %}`。 ## 變量 **標準語法** ```html {{set temp = data.sub.content}} ``` **原始語法** ```html <% var temp = data.sub.content; %> ``` ## 模板繼承 **標準語法** ```html {{extend './layout.art'}} {{block 'head'}} ... {{/block}} ``` **原始語法** ```html <% extend('./layout.art') %> <% block('head', function(){ %> ... <% }) %> ``` 模板繼承允許你構建一個包含你站點共同元素的基本模板“骨架”。范例： ```html  <!doctype html> <html> <head> <meta charset="utf-8"> <title>{{block 'title'}}My Site{{/block}}</title> {{block 'head'}} <link rel="stylesheet" href="main.css"> {{/block}} </head> <body> {{block 'content'}}{{/block}} </body> </html> ``` ```html  {{extend './layout.art'}} {{block 'title'}}{{title}}{{/block}} {{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}} {{block 'content'}} <p>This is just an awesome page.</p> {{/block}} ``` 渲染 index.art 后，將自動應用布局骨架。 ## 子模板 **標準語法** ```html {{include './header.art'}} {{include './header.art' data}} ``` **原始語法** ```html <% include('./header.art') %> <% include('./header.art', data) %> ``` 1. `data` 數默認值為 `$data`；標準語法不支持聲明 `object` 與 `array`，只支持引用變量，而原始語法不受限制。 2. art-template 內建 HTML 壓縮器，請避免書寫 HTML 非正常閉合的子模板，否則開啟壓縮后標簽可能會被意外“優化。 ## 過濾器 **注冊過濾器** ```js template.defaults.imports.dateFormat = function(date, format){/*[code..]*/}; template.defaults.imports.timestamp = function(value){return value * 1000}; ``` 過濾器函數第一個參數接受目標值。 **標準語法** ```html {{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}} ``` `{% raw %}{{value | filter}}{% endraw %}` 過濾器語法類似管道操作符，它的上一個輸出作為下一個輸入。 **原始語法** ```html <%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %> ``` > 如果想修改 `{% raw %}{{{% endraw %}` `{% raw %}}}{% endraw %}` 與 `<%` `%>`，請參考 [解析規則](rules.html)。