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