art-template

最新推荐文章于 2022-05-01 08:30:56 发布

时前或现

最新推荐文章于 2022-05-01 08:30:56 发布

阅读量287

点赞数

分类专栏：前端入门文章标签： javascript node.js

本文链接：https://blog.youkuaiyun.com/qq501987847/article/details/106600921

版权

前端入门专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何通过npm安装art-template模块，并在JavaScript项目中创建和使用模板。内容涵盖了模块安装、条件判断、循环语句以及模板导入变量的语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用npm安装art-template模块

用命令行进入你的项目目录下，执行以下命令
npm install art-template --save
–save命令将art-template模块导入根目录下的package.json里面项目所需要依赖的模块属性dependencies里面

创建模块

在目录下创建一个art文件，格式如下
art-template有两种语法，标准语法使结构清晰易看懂，原始语法则更易书写逻辑性更强的代码

<!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>
    <!-- 标准语法 -->
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <!-- 可以进行运算 -->
    <p>{{ 1 + 1 }}</p>
    <!-- 逻辑判断 -->
    <p>{{ 1 + 1 == 2 ? 'yes' : 'no' }}</p>
    <!-- 要识别HTML标签则前面加@ -->
    <p>{{@ content }}</p>

    <!-- 原始语法 -->
    <p><%= name %></p>
    <p><%= age %></p>
    <p><%= 1 + 1 %></p>
    <p><%= 1 + 1 != 2 ? 'yes' : 'no' %></p>
    <!-- 原始语法识别HTML标签把=号换成-号 -->
    <p><%- content %></p>

</body>
</html>

在目录下创建一个js文件

// 导入模块
const artTemplate = require("art-template");
// 需要用到绝对路径，用路径拼接，以后方便更改，导入路径模板
const path = require('path');
// __dirname指向该执行js的绝对路径，无论多少级目录
const uPath = path.join(__dirname,'index.art');
// 第一个参数是art文件的路径，第二个参数是一个对象
let html = artTemplate(uPath,{
    name: 'tony',
    age:18,
    content: '<h1>我是识别的HTML标签</h1>'
});
console.log(html);

在命令行目录下执行输出看看

在这里插入图片

条件判断

//标准语法
{{ if age < 18 }}
未成年
{{ else if age >= 18 }}
成年了
{{ /if }}
//原始语法
<% if (age < 18) { %>
未成年
<% } else if (age >= 18) { %>
成年了
<% }%>

循环语句

//标准语法
{{ each array }}
{{$index}}, {{$value}}
{{ /each }}
//原始语法
<% for (let i = 0; i < array.length; i++) { %>
<%= array[i].name %>,<%= array[i].age %>
<% } %>

模板导入变量

固定语法

//导入时间格式模板
const dateFormat = require('dateformat');
//设置模板的根目录，目的是为了导入多个模板文件时避免重复相同代码
template.defaults.root = path.join(__dirname)；
//导入模板变量
artTemplate.defaults.imports.dateF = dateFormat;
//自动在路径中查找01.art文件
//也可以配置一下模板后缀,下面就可以直接写01，会自动查找
artTemplate.defaults.extname = '.art';

const time = artTemplate('01',{
	time: new Date()
});
console.log(time);