模板引擎

ejs

<%- %>可以转译html标签

<%= %>不可以转译html标签

<% %>写js内容 条件判断 循环语句等

服务端

指令：

npm install art-template

npm install dataformat //格式化时间

模板配置

配置模板变量：template.defaults.imports.变量名 = 变量值;

配置模板根目录：template.defaults.root = path.join(__dirname,'views')

配置模板默认后缀：template.defaults.extname = '.art'

//导入下载好的dateformat模块（用来格式化时间）
const template = require('art-template')
const dateformat = require('dateformat')
//向模板中导入变量
template.defaults.imports.dateFormat = dateformat;
template.defaults.root = path.join(__dirname,'views')
//template.defaults.extname = '.art'
const html = template('index.art',{
    data:{
        数据
    }
})
//在模板使用格式化时间方法   data.date ---->new Date()  返回值时间戳
<p>{{dateFormat(data.date,'yyyy-mm-dd')}}</p>

输出

标准语法:{{数据}} 原文输出{{@ data.content }}

原始语法:<%= 数据 %> 原文输出<%- data.content %>

判断

{{if data.age > 18 }}
  年龄大于十八
  {{else if data.age < 16 }}
  年龄小于16
  {{else}}
  年龄不符合
{{/if}}

循环

 标准语法
  <ul>
    {{each data.like}}
    <li>{{$index}}+{{$value}}</li>
    {{/each}}
  </ul>
原始语法|输出记得加= 换行记得加<% } %>
  <ul>
    <% for(var i=0;i<data.like.length; i++){ %>
      <li><%= i %> / <%=  data.like[i] %></li>
    <% } %>
  </ul>

子模版

子模版无法抽离html骨架（html,header,body）

标准语法{{include '模板'}}

原始语法<% include('模板')%>

{{ include'./common/header.art' }}
<% include('./common/header.art') %>

模板继承

子模版无法抽离html骨架（html,header,body）

抽离骨架区域
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  {{block 'head'}}{{/block}}
</head>
<body>
  {{block 'content'}}{{/block}}
</body>
</html>
//继承股价区域
{{extend './layout.art'}}
{{block 'header'}}<link rel="stylesheet" href="aa.css">{{/block}}
{{block 'content'}}<p>我是内容</p>{{/block}}

客户端

 

header中引入art-template
<div id="wrapper"></div>
  <script type="text/html" id="tpl">
    <h1>{{username}} {{age}}</h1>
  </script>
  <script>
    var html = template('tpl',{username:'lisi',age:30})
    document.getElementById('wrapper').innerHTML=html
  </script>

 

posted @ 2020-11-04 15:23  良荣十贰  阅读(110)  评论(0)    收藏  举报