art-template入门（三）之语法
轉(zhuǎn)載自??art-template語(yǔ)法
語(yǔ)法
art-template 支持標(biāo)準(zhǔn)語(yǔ)法與原始語(yǔ)法。標(biāo)準(zhǔn)語(yǔ)法可以讓模板易讀寫(xiě)，而原始語(yǔ)法擁有強(qiáng)大的邏輯表達(dá)能力。
標(biāo)準(zhǔn)語(yǔ)法支持基本模板語(yǔ)法以及基本 JavaScript 表達(dá)式；原始語(yǔ)法支持任意 JavaScript 語(yǔ)句，這和 EJS 一樣。
一、輸出
標(biāo)準(zhǔn)語(yǔ)法
| {{value}} {{data.key}} {{data['key']}} {{a ? b : c}} {{a || b}} {{a + b}} |
原始語(yǔ)法
| <%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %> |
模板一級(jí)特殊變量可以使用?$data?加下標(biāo)的方式訪(fǎng)問(wèn)：
| {{$data['user list']}} |
二、原文輸出
標(biāo)準(zhǔn)語(yǔ)法
| {{@ value }} |
原始語(yǔ)法
| <%- value %> |
原文輸出語(yǔ)句不會(huì)對(duì)?HTML?內(nèi)容進(jìn)行轉(zhuǎn)義處理，可能存在安全風(fēng)險(xiǎn)，請(qǐng)謹(jǐn)慎使用。
三、條件
標(biāo)準(zhǔn)語(yǔ)法
| {{if value}} ... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}} |
原始語(yǔ)法
| <% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %> |
四、循環(huán)
標(biāo)準(zhǔn)語(yǔ)法
| {{each target}}{{$index}} {{$value}} {{/each}} |
原始語(yǔ)法
| <% for(var i = 0; i < target.length; i++){ %><%= i %> <%= target[i] %> <% } %> |
五、變量
標(biāo)準(zhǔn)語(yǔ)法
| {{set temp = data.sub.content}} |
原始語(yǔ)法
| <% var temp = data.sub.content; %> |
六、模板繼承
標(biāo)準(zhǔn)語(yǔ)法
| {{extend './layout.art'}} {{block 'head'}} ... {{/block}} |
原始語(yǔ)法
| <% extend('./layout.art') %> <% block('head', function(){ %> ... <% }) %> |
模板繼承允許你構(gòu)建一個(gè)包含你站點(diǎn)共同元素的基本模板“骨架”。范例：
| <!--layout.art--> <!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> |
| <!--index.art--> {{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 后，將自動(dòng)應(yīng)用布局骨架。
七、子模板
標(biāo)準(zhǔn)語(yǔ)法
| {{include './header.art'}} {{include './header.art' data}} |
原始語(yǔ)法
| <% include('./header.art') %> <% include('./header.art', data) %> |
八、過(guò)濾器
注冊(cè)過(guò)濾器
| template.defaults.imports.dateFormat = function(date, format){/*[code..]*/}; template.defaults.imports.timestamp = function(value){return value * 1000}; |
過(guò)濾器函數(shù)第一個(gè)參數(shù)接受目標(biāo)值。
標(biāo)準(zhǔn)語(yǔ)法
| {{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}} |
{{value | filter}}?過(guò)濾器語(yǔ)法類(lèi)似管道操作符，它的上一個(gè)輸出作為下一個(gè)輸入。
原始語(yǔ)法
| <%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %> |
如果想修改?{{?}}?與?<%?%>，請(qǐng)參考?解析規(guī)則。
總結(jié)
以上是生活随笔為你收集整理的art-template入门（三）之语法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 玩dnf电脑配置推荐2022（玩dnf
- 下一篇： art-template入门（四）之调试