碼上快樂

相關內容    簡體    繁體

art-template學習（二）之語法

本文轉載自   查看原文   2018-12-26 17:11   1198    art-template/ 模版引擎

語法

art-template 支持標准語法與原始語法。標准語法可以讓模板易讀寫，而原始語法擁有強大的邏輯表達能力。

標准語法支持基本模板語法以及基本 JavaScript 表達式；原始語法支持任意 JavaScript 語句，這和 EJS 一樣。

一、輸出

標准語法

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始語法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

模板一級特殊變量可以使用 $data 加下標的方式訪問：

{{$data['user list']}}

二、原文輸出

標准語法

{{@ value }}

原始語法

     {{%-  value %}}   

原文輸出語句不會對 HTML 內容進行轉義處理，可能存在安全風險，請謹慎使用。

三、條件

標准語法

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

原始語法

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

四、循環

標准語法

{{each target}}
    {{$index}} {{$value}}
{{/each}}
 
 
{{each target $vallist $indexcomment}}
    {{$vallist}} {{$indexcomment}}
{{/each}} 

原始語法

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

1、模板繼承target 支持 array 與 object 的迭代，其默認值為 $data。

2、$value 與 $index 可以自定義：{{each target val key}}。

五、變量

標准語法

{{set temp = data.sub.content}}

原始語法

     <% var temp = data.sub.content;  %>

六、模板繼承

標准語法

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

原始語法

<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

模板繼承允許你構建一個包含你站點共同元素的基本模板“骨架”。范例：

<!--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 后，將自動應用布局骨架。 

子模板

標准語法

{{include './header.art'}}
{{include './header.art' data}}

原始語法

<% include('./header.art') %>
<% include('./header.art', data) %>

1、data 數默認值為 $data；標准語法不支持聲明 object 與 array，只支持引用變量，而原始語法不受限制。

2、art-template 內建 HTML 壓縮器，請避免書寫 HTML 非正常閉合的子模板，否則開啟壓縮后標簽可能會被意外“優化。

過濾器

注冊過濾器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};

過濾器函數第一個參數接受目標值。

標准語法

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

{{value | filter}} 過濾器語法類似管道操作符，它的上一個輸出作為下一個輸入。

 如果想修改 {{ }} 與 <% %>，請參考 解析規則。

注釋 

artTemplate的注釋和html一樣

<!--   -->

調試

template.defaults.debug

art-template 內建調試器，能夠捕獲到語法與運行錯誤，並且支持自定義的語法。在 NodeJS 中調試模式會根據環境變量自動開啟：process.env.NODE_ENV !== 'production'

設置 template.defaults.debug=true 后，等同於：

{
    "cache": false,
    "minimize": false,
    "compileDebug": true
}

更多參見 選項。

模板變量

template.defaults.imports

模板通過 $imports 可以訪問到模板外部的全局變量與導入的變量。

導入變量

template.defaults.imports.log = console.log;
 

$imports.log("hello world")

內置變量清單

  • $data 傳入模板的數據

  • $imports 外部導入的變量以及全局變量

  • print 字符串輸出函數

  • include 子模板載入函數

  • extend 模板繼承模板導入函數

  • block 模板塊聲明函數

解析規則

template.defaults.rules

art-template 可以自定義模板解析規則，默認配置了原始語法與標准語法。

修改界定符

// 原始語法的界定符規則
template.defaults.rules[0].test = /<%(#?)((?:==|=#|[=-])?)[ \t]*([\w\W]*?)[ \t]*(-?)%>/;
// 標准語法的界定符規則
template.defaults.rules[1].test = /{{([@#]?)[ \t]*(\/?)([\w\W]*?)[ \t]*}}/;

它們是一個正則表達式，你可以只修改界定符部分。例如修改 <% %> 為 <??>：

var rule = template.defaults.rules[0];
rule.test = new RegExp(rule.test.source.replace('<%', '<\\\?').replace('%>', '\\\?>'));

添加語法

從一個簡單的例子說起，讓模板引擎支持 ES6 ${name} 模板字符串的解析：

template.defaults.rules.push({
    test: /\${([\w\W]*?)}/,
    use: function(match, code) {
        return {
            code: code,
            output: 'escape'
        }
    }
});

其中 test 是匹配字符串正則，use 是匹配后的調用函數。關於 use 函數：

  • 參數：一個參數為匹配到的字符串，其余的參數依次接收 test 正則的分組匹配內容
  • 返回值：必須返回一個對象，包含 code 與 output 兩個字段：
    • code 轉換后的 JavaScript 語句
    • output 描述 code 的類型，可選值：
      • 'escape' 編碼后進行輸出
      • 'raw' 輸出原始內容
      • false 不輸出任何內容

值得一提的是，語法規則對渲染速度沒有影響，模板引擎編譯器會幫你優化渲染性能。

壓縮頁面

template.defaults.minimize

art-template 內建的壓縮器可以壓縮 HTML、JS、CSS，它在編譯階段運行，因此完全不影響渲染速度，並且能夠加快網絡傳輸。

開啟

template.defaults.minimize = true;

配置

參見：https://github.com/kangax/html-minifier

默認配置

template.defaults.htmlMinifierOptions = {
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true,
    // 運行時自動合並：rules.map(rule => rule.test)
    ignoreCustomFragments: []
};

 

選項

template.defaults

// 模板名
filename: null,

// 模板語法規則列表
rules: [nativeRule, artRule],

// 是否開啟對模板輸出語句自動編碼功能。為 false 則關閉編碼輸出功能
// escape 可以防范 XSS 攻擊
escape: true,

// 啟動模板引擎調試模式。如果為 true: {cache:false, minimize:false, compileDebug:true}
debug: detectNode ? process.env.NODE_ENV !== 'production' : false,

// bail 如果為 true，編譯錯誤與運行時錯誤都會拋出異常
bail: true,

// 是否開啟緩存
cache: true,

// 是否開啟壓縮。它會運行 htmlMinifier，將頁面 HTML、CSS、CSS 進行壓縮輸出
// 如果模板包含沒有閉合的 HTML 標簽，請不要打開 minimize，否則可能被 htmlMinifier 修復或過濾
minimize: true,

// 是否編譯調試版
compileDebug: false,

// 模板路徑轉換器
resolveFilename: resolveFilename,

// 子模板編譯適配器
include: include,

// HTML 壓縮器。僅在 NodeJS 環境下有效
htmlMinifier: htmlMinifier,

// HTML 壓縮器配置。參見 https://github.com/kangax/html-minifier
htmlMinifierOptions: {
    collapseWhitespace: true,
    minifyCSS: true,
    minifyJS: true,
    // 運行時自動合並：rules.map(rule => rule.test)
    ignoreCustomFragments: []
},

// 錯誤事件。僅在 bail 為 false 時生效
onerror: onerror,

// 模板文件加載器
loader: loader,

// 緩存中心適配器（依賴 filename 字段）
caches: caches,

// 模板根目錄。如果 filename 字段不是本地路徑，則在 root 查找模板
root: '/',

// 默認后綴名。如果沒有后綴名，則會自動添加 extname
extname: '.art',

// 忽略的變量。被模板編譯器忽略的模板變量列表
ignore: [],

// 導入的模板變量
imports: runtime

 

參考

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 art-template模板判斷 有了art-template，如有神助 art-template模板引擎循環嵌套 js模板引擎art-Template（以前的artTemplate） js模板引擎-art-template常用總結 js模板引擎-art-template常用總結 解決Mongoose 返回的文檔過大導致模板引擎art-template無法渲染的問題，錯誤-RangeError: Maximum call stack size exceeded node——express-art-template使用方法 深度學習二：Neural art：用機器模仿梵高 Flask 的 template模板 與 jinja2語法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM