免費(fèi)AI編程助手
EJS 模板語言使用
tmt-workflow 支持 EJS 模式引擎，在編寫 HTML 過程中可以節(jié)省下不少的工作量，并且通過 include、for 循環(huán) 等特性減少代碼行數(shù)，提高代碼的可讀性。
我們采用 EJS 2.0 以上版本：https://github.com/mde/ejs
EJS 特性
輸出
在頁面中輸出變量值，你可以這么用： <div><%= var01 %></div>
如果不希望變量值的內(nèi)容被轉(zhuǎn)義，那就這么用：<div><%- var02 %></div>
模塊的邏輯支持
所有使用 <% %> 括起來的內(nèi)容都會(huì)被編譯成 Javascript，你可以在模版文件中像寫 js 一樣 Coding，也允許你聲明變量，作用域就是當(dāng)前模版，因?yàn)橐粋€(gè)模版會(huì)被編譯成一個(gè) Javascript 函數(shù)。
示例:
<% var name = "littledu" %>
<div>
Hello, My Name is <%-name %>
</div>
循環(huán)
就像寫 Javascript 一樣
<ul>
<% for(var i = 0; i < 10; i++) {%>
<li>我是列表 <%-i %></li>
<% } %>
<ul>
Includes
Include 可以引用相對(duì)路徑的模版文件，例如有 html/index.html 和 html/_block/head.html這兩個(gè)文件，你就可以在 index.html 這么用 <% include _block/head.html %>。
示例
<ul>
<% users.forEach(function(user){ %>
<% include user/show %>
<% }) %>
</ul>
TmT EJS Helper
我們?cè)?EJS 之外，提供了一些額外的模版函數(shù)來簡化我們的一些工作。
GIT：https://github.com/willerce/tmt-ejs-helper
css()
快速的引用 CSS 文件，并附上注釋線上 CSS 絕對(duì)路徑，便于下游前端使用。
<head>
<title>頁面標(biāo)題</title>
<%- css("style-workflow.css") %>
</head>
編譯后：
<head>
<title>頁面標(biāo)題</title>
<link rel="stylesheet" href="../../dev/css/style-workflow.css"/>
<!--<link rel="stylesheet" href="http://wximg.gtimg.com/tmt/workflow/dist/css/style-workflow.css"/>-->
</head>
js()
功能與 css() 一致，不復(fù)述
img() 占位圖
占位圖，可以指定高、寬，以及 className
<%- img(200, 400, 'block__img') %>
編譯后：
<img src="http://temp.im/200x400" class="block__img"/>
text() 占位文本
生成指定長度的占位圖，第二個(gè)參數(shù)為偏移字?jǐn)?shù)
例如，下面這個(gè)函數(shù)，生成的文本長度可能為 7 ~ 13 位。
<span><%- text(10, 3) %></span>
編譯后：
<span>一二三四五六七八九</span>
更多建議：