art-template模板引擎

模板引擎

模板引擎就是第三方模块。

art-template模板引擎使用：

  ① 使用 npm install art-template 下载
  
  ② 引入 art-template 模板引擎
  
  ③ 使用 const html = template( '模板路径', 数据 ) 进行字符串的拼接：引入 path模块，使用path模块下的join、__dirname 进行绝对路径拼接；第二个参     数是对象；替换文件中使用 {{属性}} 替换

图解：

1）基本语法

① 模板语法

  标准语法：{{ 数据 }}
  原始语法：<%= 数据 %>

*直接写上属性可实现拼接、可进行简单加减运算、使用三元运算

图解：

② 原文输出

为防止恶意代码，不会解析HTML代码，要解析需要用到原文输出：

  标准语法：{{@ 数据代码 }}
  原始语法：<%- 数据代码 %

图解：

2）条件判断

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

① 标准语法：

  {{if 条件}}... ... {{ /if }}
  {{if v1}}... ... {{else if v2}}... ... {{/if}}

② 原始语法：

  <% if ( value ) { %> ... <% } %>
  <% if ( v1 ) { %> ... <% } else if (v2) { %> ... <% } %>

图解：

3）循环

① 标准语法：

  {{ each target }} 
        {{$ index}} {{$ value}}
  {{ /each }}

② 传统语法：

  <% for ( ) { %> 
        <%= i %><%= target[i] %>
  <% } %>

图解：

4）子模板

使用子模板可以将网站公共区域（头部或底部）抽离到单独的文件中。

  ① 标准语法：{{include ' 模板路径 '}}
  ② 传统语法：<% include ( ' 模板路径 ' ) %>

图解：

5)模板继承

HTML骨架不能使用子模板进行抽离。使用模板继承才能让它们抽离到单独文件中，其他页面模板可以继承骨架文件。

  1）block：预留位置
  {{block ' 名称 ' }} {{/block}}

  2）继承骨架：{{extend ' 文件路径与名称 '}}
  {{block ' 名称 '}} 代码内容 {{ /block }}

图解：

6）模板配置

  1）向模板中导入变量 template.defaults.imports.变量名 = 变量值

        ①下载 dateformat 模板
        ②在 template参数2 对象中使用“ new Date() 创建 原始时间 ”
        ③引入模板、使用‘ template.defaults.imports.自定义名字 = dataFormat（模板名）’的固定语法导入模板变量
        ④在 art 文件中 使用 dateFormat(tiime,时间格式) 方法处理时间
        
  2）设置模板根目录 template.defaults.root = 模板目录

  3）配置模板默认后缀 template.defaults.extname = '后缀'

图解：