模板引擎artTemplate學習筆記

2 模板引擎語法

模板引擎是第三方模組。

讓開發者以更加友好的方式拼接字串，使專案**更加清晰、更加易於維護。

// 未使用模板引擎的寫法

var ary =
;var str =
'';

<

!-- 使用模板引擎的寫法 --
>
}}<
/li>
}<
/li>
}<
/ul>

告訴模板引擎要拼接的資料和模板在哪 const html = template(『模板路徑』, 資料);

使用模板語法告訴模板引擎，模板與資料應該如何進行拼接

// 匯入模板引擎模組

const template =
require
('art-template');
// 將特定模板與特定資料進行拼接
const html =
template
('./views/index.art',}
);

}<

/span>
}<
/span>
<
/div>● art-template同時支援兩種模板語法：標準語法和原始語法。
● 標準語法可以讓模板更容易讀寫，原始語法具有強大的邏輯處理能力。
標準語法： 
}原始語法：<
%=資料  %
>

● 標準語法：}

● 原始語法：

<

!-- 標準語法 --
>
}<
/h2>
}<
/h2>
}<
/h2>
<
!-- 原始語法 --
>
<
%= value %
>
<
/h2>
<
%= a ? b : c %
>
<
/h2>
<
%= a + b %
>
<
/h2>

● 標準語法：}

● 原始語法：

<

!-- 標準語法 --
>
}<
/h2>
<
!-- 原始語法 --
>
<
%- value %
>
<
/h2>

<

!-- 標準語法 --
>
}...}}
...}
...}
<
!-- 原始語法 --
>
(value)
%>
(v1)
else
if(v2)
%>

● 原始語法：

<

!-- 標準語法 --
>}}
}}<
!-- 原始語法 --
>
<
%for
(var i =
0; i < target.length; i++)%
>

● 標準語法：}

● 原始語法：

<

!-- 標準語法 --
>
}<
!-- 原始語法 --
>
<
%include
('./header.art')%
>

html骨架模板<

/title>}}

<

/head>

}}<

/body>

<

/html>

<

!--index.art 首頁模板--
>}}
"stylesheet" href=
"custom.css"
>}}
this is just an awesome page.
<
/p>
}

● 設定模板根目錄 template.defaults.root = 模板目錄

● 設定模板預設字尾 template.defaults.extname = 『.art』

art template模板引擎

1.模板語法 2.輸出 將某項資料輸出在模板中 3.原文輸出 如果資料中攜帶html標籤，預設模板引擎不會解析標籤，會將其轉義後輸出 4.條件判斷 在模板中可以根據條件來決定顯示哪塊html 5.迴圈 6.子模版 使用子模版可以將 公共區塊 頭部 底部 抽離到單獨的檔案中 7.模板繼承 使用模板繼承...

artTemplate模板引擎

使用乙個type text html 的script標籤存放模板 模板邏輯語法開始與結束的界定符號為 與 若 後面緊跟 號則輸出變數內容。template.render id,data var data var html template.render test data document.gete...

ArtTemplate模板引擎入門

天下武功，唯快不破 對的，arttemplate模板引擎最大的特點就是乙個 快 字，但是這套模板引擎官方github上的文件相當地精簡，雖然有完整的demo，但是說真的，也不知道是不是我智商不夠用，研究了一下午才把這套模板引擎應用到了我的web專案裡。id art container div id ...