node模板引擎的使用

最新推荐文章于 2024-07-25 14:20:25 发布

yabalaxi

最新推荐文章于 2024-07-25 14:20:25 发布

阅读量240

点赞数 1

分类专栏： node.js 文章标签： node.js

本文链接：https://blog.csdn.net/Aaa_Liao/article/details/106216568

版权

node.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

node

模板引擎：

模板引擎就是用来合成字符串的
art-template第三方模块，是腾讯公司开发的，模板的解析速度是比较快的
- 安装：npm i art-template
- 导入：const template = require('art-template')
- 调用：const htmlStr = template('模板文件的绝对路径', { 数据键值对 })
- 模板文件可以用两对花括号来引用数据对象中的属性：{{ 数据键名 }}
我们不一定必须用.art的文件后缀，也可以用.html的文件

范例：

JS：

const template = require('art-template')
const path = require('path')

const htmlStr = template(path.join(__dirname, 'views', 'index.html'), {
  name: 'zs',
  age: 18
})

console.log(htmlStr)

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <span>姓名：{{ name }}</span>
  <br>
  <span>年龄：{{ age }}</span>
</body>

</html>

模板语法-输出：

标准语法（推荐，和后面的高级框架一致）：{{ 数据 }}
原始语法：<%= 数据 %>
注意：如果包含了html，默认是会转义输出的，想要原文输出，就要写成这个样子：
- 标准语法：{{@ 数据 }}
- 原始语法：<%- 数据 %>
建议：由于标准语法在功能性上没有原始语法强大，但是为了和后面的高级框架语法保持一致，所以我们能用标准语法的搞定的就用标准语法，实在搞不定再用原始语法

模板语法-条件判断：

标准语法：

{{ if age > 18  }}
	your code...
{{ else if age < 15 }}
	your code...
{{ else }}
 	your code...
{{ /if }}

注意：结尾的{{ /if }} 不能写成{{ / if }}

原始语法：

<% if (age > 18) { %>
  your code...
<% } else if (age < 15) { %>
  your code...
<% } else { %>
  your code...
<% } %>

模板语法-循环：

标准语法：

{{each arr }}
	下标：{{ $index }}
	值：{{ $value }}
{{/each}}
  
// 或者，给$value和$index起别名（推荐），好处就是在多层循环时，可以区分变量
  
{{each arr v i  }}
  下标：{{ i }}
  值：{{ v }}
{{/each}}

注意：只能用一种方式，不能混着用，起别名时，第一个参数是值，第二个参数才是索引

原始语法：

<% for (var i = 0; i < arr.length; i ++) { %>
  下标：<%= i %>
  值：<%= arr[i] %>
<% } %>

从上面两种语法可以发现，标准语法从代码结构上看，更简单清晰一些
补充说明：模板语法是不可以被HTML的注释标签干掉的，模板引擎还是会解析

模板语法-子模板：

作用：可以抽离公共的代码，单独放到一个文件中统一维护
标准语法：{{ include '子模板路径' }}
原始语法：<% include('子模板路径') %>

模板语法-继承：

作用：定义一些公用的基础结构，挖坑，然后让其他子模板来继承，填坑

父模板（layout.html）：用来定义基础骨架，挖坑

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {{block 'head' }}{{/block}}
</head>

<body>
  {{block 'body' }}{{/block}}
</body>

</html>

子模板（list.html）：用来填坑

{{extend './common/layout.html' }}

{{block 'head' }}
<title>我的标题</title>
{{/block}}

{{block 'body'}}
<div>我的身体</div>
{{/block}}

模板语法-导入模板变量：

作用：可以将外部的数据导入至模板语法中被支持
语法：template.defaults.imports.变量名 = 值

范例：日期格式化，借助第三方模块dateformat：

安装模块：npm i dateformat

const template = require('art-template')
const dateformat = require('dateformat')
template.defaults.imports.dateformat = dateformat
// 在模板中就可以使用这个dateformat函数了，比如：{{ dateformat(time, 'yyyy-mm-dd HH:MM:ss') }}

模板语法-模板配置：

配置模板根目录：template.defaults.root = '模板根目录'
配置模板默认后缀：template.defaults.extname = '.后缀名'
- 注意：在渲染模板文件的时候，如果你写了后缀，那么还是会以你写的为准，如果没写，那么就用配置的默认后缀
我们配置根目录和默认后缀，不仅仅只是为了写起来方便，最主要的是为了方便日后维护

yabalaxi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node模板引擎的使用

node 笔记6模板语法-输出：标准语法（推荐，和后面的高级框架一致）：{{ 数据 }}原始语法：<%= 数据 %>注意：如果包含了html，默认是会转义输出的，想要原文输出，就要写成这个样子：标准语法：{{@ 数据 }}原始语法：<%- 数据 %>建议：由于标准语法在功能性上没有原始语法强大，但是为了和后面的高级框架语法保持一致，所以我们能用标准语法的搞定的就用标准语法，实在搞不定再用原始语法模板语法-条件判断：标准语法：{{ if age &gt
复制链接

扫一扫

专栏目录