Nodejs Jade 模板引擎学习笔记

Nodejs Jade 模板引擎学习笔记

###Jade 模板引擎

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

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

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

HTML

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

Jade

span.abc span content

其中，.abc和span中间的空格不能省略，省略则无法进行解析。

嵌套关系则由缩进决定，如：

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，陆续都要写一些文章进行记录，供自己日后进行查阅。


7 回复

Nodejs Jade 模板引擎学习笔记

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

Jade 模板引擎简介

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

基础语法

简化标签与内容

在HTML中，开始标签+内容+结束标签的模式，被改造成开始标签+空格+内容的模式，如：

HTML

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

Jade

span.abc span content

其中，.abc和span中间的空格不能省略，否则无法进行解析。

缩进表示嵌套

嵌套关系则由缩进决定，如：

HTML

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

Jade

div
	p
		content

或

div
	p content
类和ID

类和ID可以直接跟在标签后面，如：

div.aClass.bClass#idOfDiv
注释

Jade支持单行注释，使用//进行注释。

//- This is a comment

文件包含与继承

Jade作为模板语言，支持文件的包含(include)和继承(extends)。

文件包含

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等，计划陆续写一些文章进行记录，供自己日后查阅。


楼主搞grunt么？

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

div div div div div

到时候你再看看jade

感觉和z-coding类似

p
	h2
		span hello

编译出来成了

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

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

untitled2.png untitled3.png

Node.js Jade 模板引擎学习笔记

Jade 模板引擎简介

Jade 是一种简洁高效的 HTML 模板引擎，旨在提高前端开发效率。它通过特殊的语法来简化 HTML 的编写方式。

基本语法

Jade 中的空格、换行、缩进都是有意义的，它们用来定义标签之间的嵌套关系。例如：

HTML

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

Jade

span.abc span content

嵌套关系通过缩进来表示：

HTML

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

Jade

div
	p
		content

或者更简洁的方式：

div
	p content

类和 ID 可以直接跟在标签后面：

div.aClass.bClass#idOfDiv

注释与多行语法

注释可以使用 // 来表示：

// 这是一条单行注释

文件包含与继承

Jade 支持两种主要的文件管理方式：包含（include）和继承（extends）。

包含示例

假设有一个主文件 index.jade 和两个子文件 header.jade 和 footer.jade，你可以这样包含它们：

index.jade

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

继承示例

extends 用于定义一个基础模板，然后通过 block 关键字替换部分内容：

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

总结

Jade 的语法简洁且高效，include 更适合简单的片段插入，而 extends 则适用于更复杂的模板结构。通过掌握这些基本用法，可以显著提升你的前端开发效率。

希望这些示例和解释能帮助你更好地理解和使用 Jade 模板引擎。

回到顶部