tmt-workflow 支持 EJS 模式引擎,在编写 HTML 过程中可以节省下不少的工作量,并且通过 include、for 循环 等特性减少代码行数,提高代码的可读性。
我们采用 EJS 2.0 以上版本:https://github.com/mde/ejs
EJS 特性
输出
在页面中输出变量值,你可以这么用:
如果不希望变量值的内容被转义,那就这么用:
模块的逻辑支持
所有使用 括起来的内容都会被编译成 Javascript,你可以在模版文件中像写 js 一样 Coding,也允许你声明变量,作用域就是当前模版,因为一个模版会被编译成一个 Javascript 函数。
示例:
Hello, My Name is
循环
就像写 Javascript 一样
- 我是列表
Includes
Include 可以引用相对路径的模版文件,例如有 html/index.html 和 html/_block/head.html这两个文件,你就可以在 index.html 这么用 。
示例
TmT EJS Helper
我们在 EJS 之外,提供了一些额外的模版函数来简化我们的一些工作。
GIT:https://github.com/willerce/tmt-ejs-helper
css()
快速的引用 CSS 文件,并附上注释线上 CSS 绝对路径,便于下游前端使用。
页面标题编译后:
页面标题js()
功能与 css() 一致,不复述
img() 占位图
占位图,可以指定高、宽,以及 className
编译后:
text() 占位文本
生成指定长度的占位图,第二个参数为偏移字数
例如,下面这个函数,生成的文本长度可能为 7 ~ 13 位。
编译后:一二三四五六七八九
更多的模版函数?等你来提~