美文网首页
ejs模板引擎

ejs模板引擎

作者: jrg陈咪咪sunny | 来源:发表于2018-09-28 15:06 被阅读0次

    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视图系统

    相关文章

      网友评论

          本文标题:ejs模板引擎

          本文链接:https://www.haomeiwen.com/subject/hklpoftx.html