art-template模板插件

模板基本原理:使用特殊字符进行替换

  1. 首先在文件中预留一个特殊标记,比如~_~
  2. 然后读取文件,进行处理
fs.readFile('路径',(err,data)=>{});//读取该文件
	let content= '';
	data.forEach((item)=>{
		content += `${item}`;//字符串拼接
	})
	
  1. 将data其转为字符串并寻找特殊标记,用内容进行替换替换=> data.tostring().replace('~_~','替换内容');

art-template组件

  1. 建立一个组件
  2. 将组件引入进来
<footer class="container">
  <p>Copyright © 2017p>
footer>

在网页需要的地方引入:

{{include '../_partials/footer.html'}}

引入应该是简单的替换关系

art-template继承

  1. 定义父模板
  2. 继承模板

<html>
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
{{include './header.html'}}

{{block 'content'}} <h1>默认内容h1>{{/block}}

{{block 'content2'}} <h1>默认内容h1>{{/block}}
{{include './footer.html'}}
body>
html>

继承:

{{extend '../_layouts/home.html'}}

{{block 'content'}}
//填写父模板留下的坑
{{/block}}
{{block 'content2'}}
//填写父模板留下的坑
{{/block}}

说明:

  1. 父模板留下许多坑(需要填写的地方),然后继承者通过{{extend ‘./home.html’}}继承父模板,然后再使用留下的坑的标记进行内容填写,没有填写的坑也不会显示,所以做到了继承者写上自己的内容
  2. 那些坑可以是写script和css链接
  3. 本质是替换关系

前端使用art-template

  1. 首先下包 npm install art-template --save

<html>
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
body>
<script src="node_modules/art-template/lib/template-web.js">script>

<script type="text/template" id="tpl">
    hello {{name}}
    今年 {{age}}岁
	我喜欢 :{{each hobbies}} {{$value}}{{/each}}
script>
<script>
    let ret = template('tpl',{
      	name:'Jack',
        age:20,
		hobbies:['打游戏','听音乐']
    });
    console.log(ret);//数据拿到便可以渲染了
script>
html>

说明:
首先是在script标签定义模板,然后为其绑定一个id,并且修改其type属性为text/template,这个值是自定义的,因为script标签里的type属性 只要不是text/javascript,则不会被作为脚本执行,内容也会被显示(display:none).然后再在另一个script里面为其传递数据

node中使用art-template

  1. 新建一个html文件,作为模板
  2. node中读取该文件,并且将其进行数据替换

<html>
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <h3>hello {{name}}h3>
    <h3>今年 {{age}}岁h3>
    <h3>我喜欢 :{{each hobbies}} {{$value}}{{/each}}h3>
body>
html>
let template = require('art-template');
let fs = require('fs');

fs.readFile('./template.html',(err,data)=>{
   if (err){
       return console.log('文件读取失败');
   }
    // template.render('模板字符串',替换对象);
    let ret = template.render(data.toString(),{
        name:'Jack',
        age:20,
        hobbies:['打游戏','听音乐']
    });
    console.log(ret);
});

Expree中使用art-template

  1. 安装两个包 npm i art-template --save express-art-template --save
  2. 配置使用art-template模板引擎 app.engine('html',require('express-art-template')) 前面表示文件后缀是 html时,使用art-template引擎
  3. 在项目中创建一个views文件夹,在该文件夹中放置需要渲染的页面,因为默认会去项目中的views目录中寻找该文件,然后写相对路径即可(约定所有的视图文件放在views目录中),假如要修改默认的views目录->app.set(‘views’,‘默认文件名’)
  4. 使用 res.render('html模板名.html',{模板数据对象});

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