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 = '后缀'