Node.js-art-template 模板的安装与使用

朱雀 2021-12-04 01:59 177阅读 0赞

#### JS 中 art-template 模板的简单使用 ####

在需要使用模板的目录下安装 [`art-template`][art-template] 模板

> npm install art-template

在需要使用的 html 文件中引入模板文件

编辑模板 ，为模板设置 id 方便使用

向模板中插入数据，通过 id 使用模板

打印结果：  
![在这里插入图片描述][20191220205637972.png]  
**补充：** Nodejs 中安装 web 开发框架 erpress

> npm install express

#### Nodejs 使用 art-template 模板引擎 ####

引入模板引擎 （前提是模板引擎已安装）

const template = reuqire('art-template');

编辑模板

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <p>芳名:{
       { name }}</p>
      <p>芳龄:{
       { age }}</p>
      <p>gender:{
       { gender }}</p>
      <p>hobbies:{
       { each hobbies }} {
       { $value }} {
       { /each }}</p>
      <script> // 模板引擎不关心内容，会对 { {content}} 进行解析。 let str = '{ { content }}'; </script>
    </body>
    </html>

编译模板渲染结果

`template.render(source, data, options)` 编译并返回渲染结果。

参数：

*  `source` 模板字符串（字符串类型）
 *  `data` 对象，写入模板的数据（原始数据）
    
        // 读取模板文件
        fs.readFile('./art-template.html', function (err, data) { 
          if (err) { 
            return console.log('文件读取失败！');
          }
          // 将模板文件中的内容转为字符串
          data = data.toString();
          // 对模板进行编译并存储结果
          let tpl = template.render(data,{ 
            name: '小小',
            age: 18,
            gender: 'girl',
            hobbies: [
              'movie',
              'basketball',
              'swimming'
            ]},
            content: '模板引擎不关心内容！'
          );
          // 输出结果
          console.log(tpl);
        });
    
    最终在**命令窗口**打印的结果：
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Document</title>
        </head>
        <body>
          <p>芳名:小小</p>
          <p>芳龄:18</p>
          <p>gender:girl</p>
          <p>hobbies: movie  basketball  swimming </p>
          <script> let str = '模板引擎不关心内容！'; </script>
        </body>
        </html>
    
    **注意：** 模板引擎不关心内容，只要有 "“插值表达式” 就会进行解析，不管 插值表达式 在什么位置。

#### art-template 语法 ####

*  子模版
    
     *  `{ { include './header.html' }}` 引入公共的头部文件
 *  模板继承
    
     *  `{ { extend './layout.html'}}` 引入母板文件
     *  `{ { block 'head' }}<link rel="stylesheet" type="text/css" href="./public/css/test.css">{ { /block }}` 引入样式文件
     *  `{ { block 'script' }}<script type="text/javascript" src = "./public/js/test.js"></script>{ { /block }}` 引入脚本文件
     *  `{ { block 'content' }}默认内容{ { /block }}` 挖坑，留给将要继承该模板的模板去填坑，可写入默认内容
        
        **注意：** 最终填坑的内容会被替换到留坑的位置。
 *  示例（以下文件都在同级目录下）
    
     *  header.html（公共头部文件）
        
            <div>
              <h1>公共的头部！</h1>
            </div>
     *  footer.html（公共底部文件）
        
            <div>
              <h1>公共的底部！</h1>
            </div>
     *  layout.html（设计模板骨架）
        
            <!DOCTYPE html>
            <html lang="en">
            <head>
              <meta charset="UTF-8">
              <title>Document</title>
              
              {
                   { block 'head' }}{
                   { /block }}
            </head>
            <body>
                 
            {
                   { include './header.html' }}
              
            {
                   { block 'content' }}
                <h1>默认内容</h1>
              {
                   { /block }}
              
              {
                   { include './footer.html' }}
              
              {
                   { block 'script' }}{
                   { /block }}
            </body>
            </html>
     *  list.html（内容部分）
        
            <ul>
              <li>北京姑娘</li>
              <li>天津姑娘</li>
              <li>上海姑娘</li>
              <li>广州姑娘</li>
              <li>深圳姑娘</li>
            </ul>
     *  index.html（使用母板）
        
            // 首先引入母板页
            {
                   {extend './layout.html'}}
            
            {
                   { block 'head' }}
              <link rel="stylesheet" type="text/css" href="../public/css/test.css">
            {
                   { /block }}
            
            {
                   { block 'content' }}
              
              {
                   { include './list.html' }}
            {
                   { /block }}
            
            
            {
                   { block 'script' }}
            <script type="text/javascript" src="../public/js/test.js"></script>
            {
                   { /block }}
        
        执行结果自行尝试。。。

[art-template]: https://aui.github.io/art-template/zh-cn/
[20191220205637972.png]: /images/20211203/b74d74bef2fb4744901fd0d9524e1317.png