art-template模板引擎的语法和基本使用

模板引擎

1.1 模板引擎

  • 模板引擎不是Node本身提供的,它是第三方模块。
  • 目的是让开发者以更加友好的方式拼接字符串,使项目代码更加清晰、更加易于维护。

1.2 art-template

  • 官网 https://aui.github.io/art-template/zh-cn/

  • 安装 npm install art-template

  • 使用let template = require('art-template')引入模板引擎

  • 告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’,数据);

    • 数据是对象类型
    • template()的返回值是一个拼接好的字符串

完整使用流程
1. 创建01.js文件

let template = require("art-template");
let path = require("path");

let view = path.join(__dirname,'views','01.art');

//第一个参数是路径
//第二个参数是数据,对象类型
//返回值是拼接好的字符串
let html = template(view,{
     
  name:"张三"
})

console.log(html);

2.创建01.art文件

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<!--标准语法-->
<p>{
     {
      name }}</p>

<!--原始语法-->
<p><%= name %></p>
</body>
</html>

  1. 执行01.js文件 node 01.js

1.3 输出语法

  • art-template 支持标准语法与原始语法。标准语法可以让模板易读写,而原始语法拥有强大的逻辑表达能力。

    • 标准语法{ {value}}
    • 原始语法<%= value %>
  • 如果数据中携带HTML标签,默认模板引擎不会解析标签,会将其转义后输出。这是出于安全考虑

    • let template = require("art-template");
      let path = require("path");
      
      let view = path.join(__dirname,'views','01.art');
      
      let html = template(view,{
               
        content:'

      我是标题

      '
      }) console.log(html);
    • 当使用{ {content}}输出时,会得到以下结果

      • {
                   {
                   content}}
        // <h1>我是标题</h1>
        
  • 原文输出:原文输出语句不会对 HTML 内容进行转义处理,可能存在安全风险,请谨慎使用。

    • 标准语法 { { @数据 }}
    • 原始语法:<%- 数据 %>,把 = 改为减号

1.4 条件判断

  • 在模板中可以根据条件来决定显示哪块HTML代码

    • 标准语法

      {
              {if value}} ... {
              {/if}}
      {
              {if v1}} ... {
              {else if v2}} ... {
              {/if}}
                                        
      
      {
              {if age >= 20}}
      <p>年龄大于等于20p>
      {
              {else if age < 15}}
      <p>年龄小于15p>
      {
              {else}}
      <h1>年龄不符合要求h1>
      {
              {/if}}
      
    • 原始语法

      <% if (value) { %> ... <% } %>
      <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
          
      
      <% if(age >= 20) { %>
      <p>年龄大于等于20p>
      <% } else if(age < 15) { %>
      <p>年龄小于15p>
      <% } else {%>
      <h1>年龄不符合要求h1>
      <% } %>
      

1.5 循环语法

  • 标准语法

    • $index代表当前循环的索引
    • $value代表当前循环的数据
    {
          {each target}}
        {
          {$index}} {
          {$value}}
    {
          {/each}}
    
  • 原始语法

    <% for(var i = 0; i < target.length; i++){ %>
        <%= i %> <%= target[i] %>
    <% } %>
    
  • target 支持 arrayobject 的迭代,其默认值为 $data

  • $value$index 可以自定义:{ {each target val key}}

1.6 子模板

  • 使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。

  • 标准语法

    {
          {include './header.art'}}
    {
          {include './header.art' data}}
    
  • 原始语法

    <% include('./header.art') %>
    <% include('./header.art', data) %>
    

1.7 模板继承

  • 使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件。art-template模板引擎的语法和基本使用_第1张图片

  • 标准语法

    {
          {extend './layout.art'}}
    {
          {block 'head'}} ... {
          {/block}}
    
  • 原始语法

    <% extend('./layout.art') %>
    <% block('head', function(){ %> ... <% }) %>
    
  • 模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例:

    
    
    
    
        
        {
          {block 'title'}}My Site{
          {/block}}
    
        {
          {block 'head'}}
        
        {
          {/block}}
    
    
        {
          {block 'content'}}{
          {/block}}
    
    
    
  • 
    {
          {extend './layout.art'}}
    
    {
          {block 'title'}}{
          {title}}{
          {/block}}
    
    {
          {block 'head'}}
        
    {
          {/block}}
    
    {
          {block 'content'}}
    

    This is just an awesome page.

    { {/block}}

1.8 模板配置

  • 向模板中导入变量 template.defaults.imports.变量名=变量值;变量值可以是第三方模块中提供的方法

    • let template = require("art-template");
      let path = require("path");
      let dateFormat = require('dateformat');
      
      let view = path.join(__dirname, 'views', '06.art')
      
      //默认情况下,在模板中**.art中是不能使用dateFormat方法的,所以需要导入
      //导入模板变量
      template.defaults.imports.dateFormat = dateFormat
      
      let html = template(view, {
        time: new Date()
      })
      
      console.log(html);
      
    • {
              { dateFormat(time,'yyyy-mm-dd') }}
      
  • 设置模板根目录 template.defaults.root = 模板目录

  • 设置模板默认后缀 template.defaults.extname = '.art'


学习资源

B站视频:模板引擎art-template

你可能感兴趣的:(node,node.js,npm,前端,art-template,模板引擎)