ejs使用文档

Posted 2020-11-19 adoctors

EJS是一个javascript模板库，用来从json数据中生成html字符串。

• 功能：缓存功能，能够缓存好的HTML模板；
• <% code %>用来执行javascript代码
• ejs模板文件后缀名 .ejs

引入其他文件

<%- include(‘path/filename‘, { data: data }) %>

上面的代码将path目录下的filename.ejs文件引入到当前文件中，并将data的值传入filename.ejs文件中。

此处使用<%- %>是为了避免二次转义。

也可以使用<% include path/filename %>进行引入

设置分隔符

var ejs = require(‘ejs‘),
    users = [‘geddy‘, ‘neil‘, ‘alex‘];
 
// 仅对当前模板有效的设置
ejs.render(‘<?= users.join(" | "); ?>‘, {users: users}, {delimiter: ‘?‘});
// => ‘geddy | neil | alex‘ 
 
// 全局有效的设置
ejs.delimiter = ‘$‘;
ejs.render(‘<$= users.join(" | "); $>‘, {users: users});
// => ‘geddy | neil | alex‘
。

模板嵌套

ejs不支持像Jade那样的block布局，但是可以使用include的方式实现布局

<%- include(‘header‘) -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include(‘footer‘) -%>

变量定义标签属性

<h1 style="<%= style %>"></h1>

循环

<ul>
    <% for(var i in users){ %>
    <li><%= users[i].username %>--<%= users[i].age %></li>
<% } %>
</ul>

<% if (names.length) { %>  
  <ul>  
    <% names.forEach(function(name){ %>  
      <li foo=‘<%= name + "‘" %>‘><%= name %></li>  
    <% }) %>  
  </ul>  
<% } %>  

if语句

<!-- 将所有条件判断代码放<% %>里面即可 -->
    <% if(isLogin){ %>
    <div class="user">
        <a href="">Jack</a>
        <a href="">退出</a>
    </div>
    <% }else{ %>
    <div class="login">
        <a href="">登录</a>
        <a href="">注册</a>
    </div>
    <% } %>

参考文档：https://ejs.bootcss.com/