EJS 模板语言使用

收藏176

阅读10985

更新时间2022-04-11

tmt-workflow 支持 EJS 模式引擎,在编写 HTML 过程中可以节省下不少的工作量,并且通过 includefor 循环 等特性减少代码行数,提高代码的可读性。

我们采用 EJS 2.0 以上版本:https://github.com/mde/ejs

EJS 特性

输出

在页面中输出变量值,你可以这么用: 

<%= var01 %>

如果不希望变量值的内容被转义,那就这么用:

<%- var02 %>

模块的逻辑支持

所有使用 <% %> 括起来的内容都会被编译成 Javascript,你可以在模版文件中像写 js 一样 Coding,也允许你声明变量,作用域就是当前模版,因为一个模版会被编译成一个 Javascript 函数。

示例:

    <% var name = "littledu" %>    
    Hello, My Name is <%-name %>    

循环

就像写 Javascript 一样

        <% for(var i = 0; i < 10; i++) {%>     
  • 我是列表 <%-i %>
  •     <% } %>

    Includes

    Include 可以引用相对路径的模版文件,例如有 html/index.html 和 html/_block/head.html这两个文件,你就可以在 index.html 这么用 <% include _block/head.html %>

    示例

          <% users.forEach(function(user){ %>     <% include user/show %>     <% }) %>

    TmT EJS Helper

    我们在 EJS 之外,提供了一些额外的模版函数来简化我们的一些工作。

    GIT:https://github.com/willerce/tmt-ejs-helper

    css()

    快速的引用 CSS 文件,并附上注释线上 CSS 绝对路径,便于下游前端使用。

    
        页面标题
        <%- css("style-workflow.css") %>
    

    编译后:

    
        页面标题
        
        
    

    js()

    功能与 css() 一致,不复述

    img() 占位图

    占位图,可以指定高、宽,以及 className

    <%- img(200, 400, 'block__img') %>

    编译后:

    text() 占位文本

    生成指定长度的占位图,第二个参数为偏移字数

    例如,下面这个函数,生成的文本长度可能为 7 ~ 13 位。

     <%- text(10, 3) %>

    编译后:

    一二三四五六七八九

    更多的模版函数?等你来提~

    科技资讯

    更多

    精选课程

    更多
    前端入门_HTML5
    前端入门_HTML5

    共29课时

    61.9万人学习

    CSS视频教程-玉女心经版
    CSS视频教程-玉女心经版

    共25课时

    39.4万人学习

    JavaScript极速入门_玉女心经系列
    JavaScript极速入门_玉女心经系列

    共43课时

    71.1万人学习

    独孤九贱(1)_HTML5视频教程
    独孤九贱(1)_HTML5视频教程

    共25课时

    61.8万人学习

    独孤九贱(2)_CSS视频教程
    独孤九贱(2)_CSS视频教程

    共22课时

    23万人学习

    独孤九贱(3)_JavaScript视频教程
    独孤九贱(3)_JavaScript视频教程

    共28课时

    34万人学习

    独孤九贱(4)_PHP视频教程
    独孤九贱(4)_PHP视频教程

    共89课时

    125.5万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号