ejs模板引擎
2018-09-28 本文已影响0人
jrg陈咪咪sunny
EJS是一个JavaScript库(https://ejs.bootcss.com/),EJS可以同时运行在客户端和服务器端,客户端安装直接引入文件即可,服务器端用npm包安装:
$ npm install ejs
EJS常用标签
<% %>流程控制标签
<%= %>输出标签(原文输出HTML标签)
<%- %>输出标签(HTML会被浏览器解析)
<%# %>注释标签
% 对标记进行转义
-%>去掉没用的空格
说明:ejs中的逻辑代码全部用JavaScript
js 逻辑判断方法:
<% if (isLogin){ %>
<%} else { %>
<% } %>
获取值,里面的值替换:
<%= user.avatar %>
首页代码- 用户是否登录,展示2个不同页面逻辑。
<div id="header">
<a class="add-note" title="添加笔记" href="#"><span class="fa fa-plus"></span> 添加</a>
<ul class="user-area">
<!-- % ejs模板引擎语法 -->
<% if (isLogin){ %>
<li><img src="<%= user.avatar %>" alt=""></li>
<li><span title="<%= user.username %>"><%= user.username %></span></li>
<li><span class="line"> | </span> </li>
<li><a class="logout" href="/auth/logout">注销</a></li>
<%} else { %>
<li><a class="login" title="GitHub登录" href="/auth/github"> GitHub登录</a>
</li>
<% } %>
</ul>
</div>
<div id="content">
</div>
<div class="stars"></div>
<script src="/js/index.js"></script>
EJS的特点:
快速编译和渲染
简单的模板标签
自定义标记分隔符
支持文本包含
支持浏览器端和服务器端
模板静态缓存
支持express视图系统