模板引擎之-jade

##### 首先我们安装jade模板引擎并编译
`npm install jade --global`
在项目文件夹下创建一个`index.jade`文件,并且写入
```
doctype
html
head
title imooc jade study
body
h1 imooc jade study

```
然后在命令行下执行`jade -P index.jade `参数大写P表示格式化的编译jade文件。
##### 一、基础篇
1、标签
直接写一个标签名就可以了,标签里面的内容只需要在标签后空一个格写文本。
2、属性
所有的属性都可以写在小括号()里面,并且类名和id名可以用简写的方法.classname和#id
3、注释
单行注释:// ,多行注释,非缓存注释也就是不会编译到html代码中: //- ,块注释也是用: //-,但是需要将这个符号放在需要注释的代码块上方。
4、声明变量和数据传递
`-var course = ‘jade‘`通过`#{course}`拿到变量,并且可以对变量进行运算`#{course.toUpperCase()}` 一般来说都是从后台传递或者json文件传递数据。

##### 二、进阶篇(流程控制)
1、for
```
- var mooc ={course:‘jade‘,level:‘high‘}
- for(var k in mooc)
p=mooc[k]
```
结果是
```
<p>jade</p>
<p>high</p>
```
2、each ,可以遍历对象也可以遍历数组,也可以嵌套循环
```
- var classes = [‘jade‘,‘node‘,‘express‘]
each k in classes
p=k
```
结果是
```
<p>jade</p>
<p>node</p>
<p>express</p>
```
3、 while
```
- var n = 0
ul
while n <= 4
li= n++
```
结果是
```
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
```
4、if-else

##### 三、高级
1、mixin
首先定义一个名为study的mixin,然后再用+mixin名使用。
```
mixin study(name,course)
p #{name}
ul
each item in course
li=item
+study(‘luo‘,[‘jade‘,‘node‘])
```
结果是
```
<p>luo</p>
<ul class="course">
<li>jade</li>
<li>node</li>
</ul>
```
2、虽然mixin可以让我们的代码减少重复,但是只能在单个文件中使用,所以jade又提供了**继承**的方法解决子文件和父文件之间的代码复用的问题。
使用block关键字,表示需要复用的代码块
```
block des
p no no no no
block des
```
结果是
```
<p>no no no no </p>
<p>no no no no </p>
```
使用extend关键字可以实现继承,通常可以将header和footer的部分放在一个文件中,其他文件继承它们。
3、模板的包含
使用的是**include**关键字,它可以引入静态html和css文件和jade文件。如果后缀名有html或者css就不会对引入的文件进行编译,而是直接引入。

时间: 2024-10-24 14:01:42

模板引擎之-jade的相关文章

[js高手之路]Node.js模板引擎教程-jade速学与实战1

环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade的命令行用法 一.在项目目录下新建index.jade文件 inde.jade代码: 1 doctype html 2 html 3 head 4 meta(charset='utf-8') 5 title 6 body 7 h3 欢迎学习jade 语法规则: 1, 标签按照html的缩进格式写 2

pug模板引擎(原jade)

前面的话 为什么要引入pug,pug有什么特别之处呢?有一些嵌套层次较深的页面,可能会出现巢状嵌套,如下图所示 在后期维护和修改时,一不小心少了一个尖括号,或者某个标签的开始和闭合没有对应上,就会导致DOM结构的混乱甚至是错误.所以,有人发明了HAML,它最大的特色就是使用缩进排列来代替成对标签.受HAML的启发,pug进行了javascript的实现. Pug原名不叫Pug,是大名鼎鼎的jade,后来由于商标的原因,改为Pug,哈巴狗.其实只是换个名字,语法都与jade一样.丑话说在前面,Pu

[js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用

一.block 模块复用 把需要复用的模块用block定义 block后面跟上模块的名字,引用一次block 内容就会被复用一次 编译之后的结果: 二,继承模板(extends) 在实际开发中,网站的头部,尾部一般都是公用的,我们可以通过jade的模板继承( extends ) 功能,把公共部分抽象出来,然后让不同的页面继承这些公共部分, 而且继承过来之后还可以重写 新建一个layout.jade模板 这是一个公共的模板,如果我们的首页需要这个公共模板,同时首页需要修改这个公共模板的布局部分(

[js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义

一.转义与非转义 jade模板文件代码: 1 doctype html 2 html 3 head 4 meta(charset='utf-8') 5 title jade学习-by ghostwu 6 body 7 h3 转义与非转义 8 - var userName = 'ghostwu' 9 - var str = '<script>alert("ghostwu");</script>' 10 div #{userName} 11 div #{str} 1

[js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin

强大的mixin mixin类似于函数的功能,可以达到模块复用的效果 mixin show: 定义一个类似函数的功能,名字叫show,里面的就是他的内容 +show: 调用show,每调用一次执行一次里面的内容 编译之后的结果: mixin也可以传递参数 编译之后的结果: mixin支持嵌套调用 编译之后的结果: mixin支持传递模块 编译之后的结果: mixin还可以传递属性 编译之后的结果: mixin支持传递不定参数 编译之后

Jade模板引擎学习(一)安装及基本语法

Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持. 一.功能 客户端支持  超强的可读性 灵活易用的缩进 块扩展 代码默认经过编码处理以增强安全性 编译及运行时的上下文错误报告 命令行编译支持 HTML5模式 可选的内存缓存 联合动态和静态标记类 利用过滤器解析树的处理 支持 Express 利用each透明的循环objects,arrays甚至不可枚举对象 块注释 不需要标记前缀 AST过滤器  过滤器  ... 二

js 模板引擎 jade使用语法

Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 · 客户端支持 · 超强的可读性 · 灵活易用的缩进 · 块扩展 · 代码默认经过编码处理以增强安全性 · 编译及运行时的上下文错误报告 · 命令行编译支持 · HTML5模式(使用!!!5文档类型) · 可选的内存缓存 · 联合动态和静态标记类 · 利用过滤器解析树的处理 · 支持 Express JS · 利用each透明的循环objects,arrays甚

Jade模板引擎入门教程

Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认经过编码处理以增强安全性 编译及运行时的上下文错误报告 命令行编译支持 HTML5模式(使用!!!5文档类型) 可选的内存缓存 联合动态和静态标记类 利用过滤器解析树的处理 支持 Express JS 利用each透明的循环objects,arrays甚至不可枚举对象 块注释 不需要标记前缀 AST过滤器

在Expressjs4.0中使用dustjs模板引擎

引言 dustjs是一款js模板,最早由个人开发维护,后来由linkin接手,发展的更加迅速,说实话js模板这块有很多选择,都非常优秀,和paypal的选择一样,最终我使用dustjs作为我的首选模板语言.dustjs中文的文档非常少,所以在国内的使用不是很多,这里几篇博文有对dustjs语法基本的介绍Dust.js语法简介(一),Dust.js语法简介(二),Dust.js语法简介(三) express4.0 默认的模板引擎是jade,jade 刚刚开始用的时候感觉像python,有严格的语法