Jade 模板引擎学习笔记
发布于 10 年前 作者 szhousun 43649 次浏览 最后一次编辑是 8 年前 来自 分享

###Jade 模板引擎

最近在学习NodeJS相关的知识,因此接触了Jade模板,对其中的语法和思想总结如下。

从实际意义上来说,Jade是为了提高前端开发人员的效率而产生的。Jade中,空格、换行、缩进都是有意义的,由这些决定了标签和内容的嵌套关系。

典型地,在HTML中,开始标签+内容+结束标签的模式,被改造成开始标签+空格+内容的模式,如:

HTML

<span class="abc">span content</span>

Jade

span.abc span content

其中,.abcspan中间的空格不能省略,省略则无法进行解析。

嵌套关系则由缩进决定,如:

HTML

<div><p>content</p></div>

Jade

div
	p
		content

div
	p content

类和ID则直接跟在标签后面,如:

div.aClass.bClass.#idOfDiv

注释支持单行//进行注释。还有更多语法上的说明,可以在使用时参考此处

作为模板语言,Jade支持文件的包含include和扩展extends的,分别说明:include比较符合正常思维,什么地方缺某部分包含进来即可;extend则使用先给出整体,再替换局部的模式。

include的例子:

//- index.jade
doctype html
html
	include ./layout/header.jade
	body
	h1 include demo
	p content
	include ./layout/footer.jade

extends的例子

//- layout.jade
doctype html
html
	head
		block title
		title Default Title
	body
		block content


//- index.jade
extends ./layout/layout.jade

//- 进行替换
block title
	title New Title

block content
	h1 extends demo
	p content

个人觉得include比较符合人的习惯,extends则更适合进行模板化的开发。

最近在学很多东西,Git、NodeJS、express、gulp、Jade,陆续都要写一些文章进行记录,供自己日后进行查阅。

15 回复

楼主搞grunt么?

赶脚grunt还是没办法绕过去的。。。

@kingapple grunt 看了一些,感觉gulp用起来比较简单

@szhousun 不准备学grunt了?

div div div div div

到时候你再看看jade

@kingapple 学还是要学的

@tulayang 这种情况不多吧,也不符合语义化标签,你是想说这个缩进恶心还是什么问题?没太理解

@szhousun

你没写过功能多的组件,就不会多,你去扒开苹果、谷歌、facebook看看这情况多不多

@tulayang 甩个链接看下?

@szhousun

这还要找链接么,这些网站随便点个页面进去,firebug看下html

@tulayang 那你甩个吧,而且你还没说这种情况有什么问题

@szhousun 知道grunt init么?怎么把所有模板一次都下载过来?

感觉和z-coding类似

@kingapple 第一眼看成楼主搞gay吗?罪过罪过

p
	h2
		span hello

编译出来成了

<p></p>
<h2><span>hello</span></h2>

发现 p h 这类行内元素不能互相嵌套.

untitled2.png untitled3.png

回到顶部