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

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

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

npm install art-template

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

  <script type="text/javascript" src="node_modules/art-template/lib/template-web.js">script>

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

<script type="text/template" id="tp">
    <p>芳名:{{ name }}</p>
    <p>芳龄:{{ age }}</p>
    <p>gender:{{ gender }}</p>
    <p>hobby:{{ each hobbies }} {{ $value }} {{ /each }}</p>
script>

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

<script type="text/javascript">
    let ret = template('tp',{
      name: '小小',
      age: 18,
      gender: 'girl',
      hobbies: [
        'movie',
        'basketball',
        'swimming'
      ]
    });
	console.log(ret);
script>

打印结果:
Node.js-art-template 模板的安装与使用_第1张图片
补充: Nodejs 中安装 web 开发框架 erpress

npm install express

Nodejs 使用 art-template 模板引擎

引入模板引擎 (前提是模板引擎已安装)

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

编辑模板



<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
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);
    });
    

    最终在命令窗口打印的结果:

    
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Documenttitle>
    head>
    <body>
      <p>芳名:小小p>
      <p>芳龄:18p>
      <p>gender:girlp>
      <p>hobbies: movie  basketball  swimming p>
      <script>
        let str = '模板引擎不关心内容!';
      script>
    body>
    html>
    

    注意: 模板引擎不关心内容,只要有 "“插值表达式” 就会进行解析,不管 插值表达式 在什么位置。

art-template 语法

  • 子模版

    • {{ include './header.html' }} 引入公共的头部文件
  • 模板继承

    • {{ extend './layout.html'}} 引入母板文件

    • {{ block 'head' }}{{ /block }} 引入样式文件

    • {{ block 'script' }}{{ /block }} 引入脚本文件

    • {{ block 'content' }}默认内容{{ /block }} 挖坑,留给将要继承该模板的模板去填坑,可写入默认内容

      注意: 最终填坑的内容会被替换到留坑的位置。

  • 示例(以下文件都在同级目录下)

    • header.html(公共头部文件)

      <div>
        <h1>公共的头部!h1>
      div>
      
    • footer.html(公共底部文件)

      <div>
        <h1>公共的底部!h1>
      div>
      
    • layout.html(设计模板骨架)

      
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Documenttitle>
        
        {{ 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 }}
      

      执行结果自行尝试。。。

你可能感兴趣的:(Node.js)