模板引擎artTemplate 學習筆記

2021-10-04 01:44:12 字數 3266 閱讀 5071

1.1 模板引擎

模板引擎是第三方模組。

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

1.2 art-template模板引擎1.3 art-template**示例

在.js檔案中寫

// 匯入模板引擎模組

const template =

require

('art-template');

// 將特定模板與特定資料進行拼接

const html =

template

('./views/index.art',}

);

在.art檔案中可以在html中引入資料

}<

/span>

}<

/span>

<

/div>

2.1 模板語法

2.2 輸出

將某項資料輸出在模板中,標準語法和原始語法如下:

<

!-- 標準語法 --

>

}<

/h2>

}<

/h2>

}<

/h2>

<

!-- 原始語法 --

>

<

%= value %

>

<

/h2>

<

%= a ? b : c %

>

<

/h2>

<

%= a + b %

>

<

/h2>

2.3 原文輸出

如果資料中攜帶html標籤,預設模板引擎不會解析標籤,會將其轉義後輸出。

標準語法:}

原始語法:<%-資料 %>

<

!-- 標準語法 --

>

}<

/h2>

<

!-- 原始語法 --

>

<

%- value %

>

<

/h2>

2.4 條件判斷

語法:

} ... }

} ... } ... }

<% if (value) %>

<% if (v1) else if (v2) %>

} 年齡大於18

} 年齡小於15

} 年齡不符合要求

}<%if

(age >18)

else

if(age <15)

else

%>

2.5 迴圈

標準語法:} }

原始語法:<% for() %>

語法:

} } }

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

動態生成li

}}}}<

/li>

}<

/ul>

<

%for

(var i =

0; i < users.length; i++)%

>

<

/ul>

2.6 子模版

} <% include('./header.art') %>

講公共部分的保持在.art檔案中,然後再用.art檔案引用模板

}<

%include

('./common/header.art')%

>

}<

/div>

}<

%include

('./common/footer.art')%

>

2.7 模板繼承

使用模板繼承可以將**html骨架抽離到單獨的檔案中,其他頁面模板可以繼承骨架檔案

建立摸板 layout.art

<

!doctype html>

"en"

>

"utf-8"

>

document<

/title>

<

!-- 留出空白,給使用摸板進行填充 --

>}}

<

/head>

<

!-- 留出空白,給使用摸板進行填充 --

>}}

<

/body>

<

/html>

引用模板

}//引用檔案

}//在預留的空白進行填充

"stylesheet" type=

"text/css" href=

"./main.css"

>}}

//在預留的空白進行填充

}<

/p>

}

2.8 模板配置

向模板中匯入變數 template.defaults.imports.變數名 = 變數值;

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

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

// 設定模板的根目錄

template.defaults.root = path.

join

(__dirname,

'views');

// 匯入模板變數

template.defaults.imports.dateformat = dateformat;

// 配置模板的預設字尾

template.defaults.extname =

'.html'

;

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 ...