art-template

骑猪看日落 2023-06-23 07:53 2阅读 0赞

#### 模板语法概述 ####

art-template 支持两种模板语法：标准语法和原始语法；标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。

标准语法使用 `{ { 数据 }}` 表示，也称之为小胡子语法；原始语法使用 `<%= 数据 %>` 表示；在模板语法中不仅可以显示数据，也可以书写合理的 js 表达式最终会显示处理后的结果。

#### 渲染模板 ####

**[template(filename, content)][template_filename_ content]**：根据模板名渲染模板；返回值为渲染后的 html 字符串（具体情况可以看官方文档）

参数：

*  `filename` 需要渲染的 HTML 模板文件路径，或 HTML 代码段的 id
 *  `content` 需要渲染的数据，其值为一个对象，用于给模板中的插值表达式传递数据；如果没有需要渲染的数据可以设置为一个空对象 `{}`

举个例子：

template.html 根据 id 渲染模板

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script src="node_modules/art-template/lib/template-web.js"></script>
      </head>
      <body>
          
        <script type="text/template" id="tp"> <p>芳名:{ { name }}</p> <p>芳龄:<%= age %></p> <p>gender:<%= gender %></p> <p>hobby:{ { each hobbies }} { { $value }} { { /each }}</p> </script>
    
        <script type="text/javascript"> // 渲染模板 var ret = template('tp', { name: '小小', age: 18, gender: 'girl', hobbies: ['movie', 'basketball', 'swimming'] }) // 打印 console.log(ret) </script>
      </body>
    </html>

![在这里插入图片描述][20191218093912719.png]

根据路径渲染模板

artTemplate.html

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
      </head>
      <body>
          <p>芳名:{
       { name }}</p>
          <p>芳龄:{
       { age }}</p>
          <p>gender:{
       { gender }}</p>
          <p>hobby:{
       { each hobbies }} {
       { $value }} {
       { /each }}</p>
      </body>
    </html>

artTemplate.js

// 引入相关模块
    const path = require('path')
    const template = require('art-template')
    // 根据路径渲染模板
    let data = template(path.join(__dirname, './artTemplate.html'), { 
      name: '小小',
      age: 18,
      gender: 'girl',
      hobbies: ['movie', 'basketball', 'swimming']
    })
    // 打印渲染后的数据
    console.log(data)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

#### 模板语法 ####

###### 原文输出 ######

如果数据中携带了 HTML 标签，art-template 为了安全考虑默认不会解析数据中的标签，会对标签进行转义处理；通过指定的语法也可以让标签具有语义（解析标签，原文输出）

标准语法：`{ {@ 数据 }}` （@ 符要紧跟在左花括号之后）

原始语法：`<%- 数据 %>`

###### 条件判断 ######

标准语法：

`if` 表示条件判断的开始；`/if` 表示条件判断结束

// 单条件判断
    { { if 条件}} 需要显示的内容 { { /if}}
    // 多条件判断
    { { if 条件}} ... { { else if 条件}} ... { { /if}}

原始语法：

原始语法中的写法与原生 js 条件判断语句相同，只是 js 代码段用 `<% %>` 包裹了起来

// 单条件
    <% if (value) {  %> 需要显示的内容 <% } %>
    // 多条件
    <% if (val1) {  %> ... <% } else if (val2) {  %> ... <% } %>

###### 循环 ######

标准语法：

`each` 表示循环代码的开始，`/each` 表示循环代码的结束

// target 可以是数组或对象
    { {  each target}}
      // 当前项的索引 
      { {  $index }}
      // 当前项的值
      { {  $value }}
    { {  /each }}

默认 `$index` 为当前项的索引，`$value` 为当前项的值，`$index` 与 `$value` 也可以自定义为别的名称：

// target 后的第一个变量表示当前项的值，第二个变量为索引
    { {  each target val key}}
      // 当前项的索引 
      { {  key }}
      // 当前项的值
      { {  val }}
    { {  /each }}

原始语法：

原始语法与原生的 js 代码相同

<% for(var i = 0; i < target.length; i++){  %>
      // 索引
      <%= i %>
      // 当前索引对应的值
      <%= target[i] %>
    <% } %>

#### 子模版 ####

使用子模版可以将网站中的公共区块（比如：公共头部、公共底部）抽离到单独的文件中然后在需要的页面中引入这个模板文件。

标准语法：

{ { include '模板文件路径'}}
    { { include '模板文件路径' data}}

原始语法：

<% include('模板文件路径') %>
    <% include('模板文件路径', data) %>

#### 模板继承 ####

模板继承可以将一些 HTML 骨架抽离到单独的文件中，其他页面模板可以继承这个骨架文件，并骨架中填入相关的内容。

标准语法：

// extend 引入创建的骨架文件
    { { extend '骨架模板路径'}}
    // block 在模板中预留一个坑；也可以通过 block 向骨架中的指定位置填入内容
    { { block '骨架中预留位置的名称'}} 用于替换默认内容 { { /block}}

原始语法：

<% extend('骨架模板的路径') %>
    <% block('骨架中预留位置的名称', function(){  %> ... <% }) %>

#### 模板配置 ####

###### 模板变量 ######

向模板中导入变量需要使用固定的语法：

template.defaults.imports.变量名 = 变量值

导入完成后就可以在模板中使用了，可以直接通过变量名使用，也可以通过 `$imports` 调用

###### 设置模板根路径 ######

语法：

template.defaults.root = '模板目录'

设置完成模板根目录后，在进行渲染模板时直接使用模板文件名即可，不需要再添加路径了，内部会自动添加。

###### 设置模板后缀 ######

语法：

template.defaults.extname = '.后缀名'

设置模板默认的后缀名后可以在渲染模板时直接写入模板的名称不需要添加后缀名了，内部会自动拼接。

[template_filename_ content]: http://aui.github.io/art-template/zh-cn/docs/api.html#template-filename-content
[20191218093912719.png]: https://img-blog.csdnimg.cn/20191218093912719.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191218094402656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70