一、结合express的基本使用

// npm下载express/art-template/express-art-tempalte,并且加载
var express=require('express');
var path=require('path');
var app=express();
// 配置(express-art-template是express来整合art-templatedao的,虽然不用加载art-template,但是也必须安装)
app.engine('html',require('express-art-template'));
//这是默认设置,需要设置其他的路径可以在这设置
app.set('views',path.join(__dirname,'./views/'));
// 请求和响应
app.get('/',function(req,res){
//express为response相应对象提供了一个方法render('html模板名',{模板数据}),默认是不可以使用的,配置模板引擎以后就可以使用
//第一个参数不能写路径,express默认会去项目中的views目录找index.html(约定视图文件放在views目录)
res.render('index.html',{
name:'张三'
})
});
// 绑定端口
app.listen(3000,function(){
console.log('server is running...')
});

二、include的使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{{include './header.html'}}
{{name}}
{{include './footer.html'}}
</body>
</html>

三、extend的使用

①添加新文件layout.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 引入公共头部 -->
{{include './header.html'}}
<!-- 使用模板继承 -->
{{block 'content'}}
<h1>默认内容</h1>
{{/block}}
<!-- 引入公共尾部 -->
{{include './footer.html'}}
</body>
</html>

②同时修改index.html,在index.html继承

③在index.html里可以修改默认内容(填坑)

{{extend './layout.html'}}
{{block 'content'}}
<div>
<h3>可以在这里修改默认的内容</h3>
</div>
{{/block}}

art-template模板引擎高级使用的更多相关文章

  1. Django基础,Day10 - template 模板引擎与路径设置

    作为一个Web框架,Django需要一个方便的方式来生成动态的HTML.最常见的方法依赖于模板.模板包含所需的HTML输出的静态部分以及一些特殊的语法描述如何插入动态内容. Django框架后端默认支 ...

  2. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  3. VTemplate模板引擎的使用--高级篇

    VTemplate模板引擎的使用--高级篇 在网站中,经常会有某个栏目的数据在多个页面同时使用到.比如新闻网站或电子商务网站的栏目列表,几乎在很多页面都会显示栏目导航.对于这种多个页面同时使用到的“数 ...

  4. 如何选择Javascript模板引擎(javascript template engine)?

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  5. jquery template.js前端模板引擎

    作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...

  6. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

  7. 腾讯模板引擎template

    template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板  script id="tpl" type="text/ ...

  8. 500 Lines or Less: A Template Engine(模板引擎)

    介绍: 多数项目都是包含很多的逻辑处理,只有少部分的文字文本处理.编程语言非常擅长这类项目.但是有一些项目只包含了少量的逻辑处理,大量的文本数据处理.对于这些任务,我们期望有一个工具能够很好的处理这些 ...

  9. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

随机推荐

  1. mysql连接不释放

    环境: 持久层:JPA 数据库连接池:druid 数据库中间件:Mycat 数据库:Mysql 报错: Unable to acquire JDBC Connection 排查步骤: 方法一: 1.d ...

  2. 配置安全web服务

    为站点 http://system1.group8.example.com 配置TLS加密: 1.一个已签名证书从 http://server.group8.example.com/pub/tls/c ...

  3. Linux RedHat7.0_64位系统中安装Oracle_11g_R2

    步骤一: 当然是安装rhel7操作系统啦(废话),建议在安装过程中系统软件类型选择最后一项[Server with GUI].其他的默认一般即可. 步骤二:在初装完成的系统中无法像Windows那样直 ...

  4. 4.将验证添加到 ASP.NET Core Razor 页面

    向 Movie 模型添加了验证逻辑. 每当用户创建或编辑电影时,都会强制执行验证规则. 1.打开Movie.cs文件.DataAnnotations命名空间提供了一组内置的验证属性,这些属性以声明方式 ...

  5. MVC中常用的返回值方法

    我们上边所看到的Action都是return View();我们可以看作这个返回值用于解析一个aspx文件.而它的返回类型是ActionResult如 public ActionResult Inde ...

  6. Raft选举算法

    目标:分布式集群中,选举Leader,保持数据一致性   集群中每个节点都有三种状态: Follower:纯小弟 Candidate:候选人.我原来是小弟,但我现在想当老大 Leader:老大 集群状 ...

  7. 对比分析HashMap、LinkedHashMap、TreeMap

    HashMap的原理 :简单地说,HashMap 在底层将 key-value 当成一个整体进行处理,这个整体就是一个 Entry 对象.HashMap 底层采用一个 Entry[] 数组来保存所有的 ...

  8. pandas-15 df['one_col'].apply()方法的用法

    pandas-15 df['one_col'].apply()方法的用法 apply有点像map的用法,可以传入一个函数. 如:df['A'].apply(str.upper) import nump ...

  9. 十大Intellij IDEA快捷键(附IDEA快捷键详细列表及使用技巧)

    十大Intellij IDEA快捷键(附IDEA快捷键详细列表及使用技巧) Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论.每个人都有自己的最爱, ...

  10. 【转】StackTraceElement获取方法调用栈的信息

    本文链接:https://blog.csdn.net/hp910315/article/details/52702199 一.什么是StackTrace StackTrace(堆栈轨迹)存放的就是方法 ...