Jade的使用 - 推酷
Jade的使用
如果你熟悉 Sublime Text 和 Emmet 的组合，那么 Jade 也会是你的菜。 模板引擎 这个术语听起来太过于高大上了，私下里我更喜欢称它们是 HTML 预处理语言，非常类似 Sass 之于 CSS —— 不过相比起 Sass 操纵 CSS 的强大力量，Jade 对 HTML 的影响只能说本本分分，没有什么激进之处，当然，这并不是坏事。
Jade 中省略了大量的尖括号，给我的感觉就是简洁和高效。这里不会讨论各种模板引擎的优劣，技术和工具的好坏向来都是不死不休的伪命题，还是花更多的时间来创造有价值的东西更有意思。
本文主要参考了
，并根据自己的经验缩减了部分内容——求全求精不是本文的目的，希望本文能够让你快速入门。即使做了部分精简，掌握之后也可以应对百分之九十以上的需求。此外，官方文档的各个小节是按字典序排列的，这并不适合第一次接触 Jade 的开发者，所以你懂得，我又给它改了……
古语有云：工欲善其事，必先利其器。利用 npm 安装 Jade 的过程这里就不介绍了，一方面是因为 mac 下安装太简单；另一方面是因为 windows 下给了我太多阴影……所以，这里直接附上
，即开即用。
那年，某位学长来介绍 HTML 入门，上来第一个操作就是复制了这么一串，复制了这么一串……
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
幸好现在是 HTML5 流行的新时代，文档类型精简掉了那个冗长拖沓的尾巴，即使手工编写也不费劲：
&!DOCTYPE html&
Jade 对此做的更彻底：不用尖括号，不用大小写……
doctype html
其他常用类型还有：
doctype xml
doctype transitional
doctype strict
自定义文档类型以及其他类型，可以
标签是 HTML 的核心元素，所以我们就从这里入手。不知道大家有没有接触过 python，如果接触过，那下面就很好理解了；如果没接触过，那么就需要培养一种意识——缩进意识。Jade 和 python 都是对缩进敏感的语法形式。在其他语言中，缩进可能是一种表面功夫，是用来提高可读性的，但在 jade 和 pyhton 中还兼具划分层次结构的作用。这种强制缩进的好处是提高了可读性，省略了一些界定符号（大括号、尖括号……）。
在 Jade 中创建一个列表：
生成的 HTML：
&li&Item A&/li&
&li&Item B&/li&
&li&Item C&/li&
就是这么简单，再也不用顾虑 标签闭合了吗 、 shift 键在哪啊 ，全程无压力高速输出！唯一需要记住的就是用统一的缩进来嵌套标签。
虽然 jade 还提供了另一种嵌套形式，但这里并不推荐。此外，jade 还有关于自闭和标签（ img 等）的介绍，这里也不作介绍。之所以精简掉它们，主要是避免用法混乱导致的错误。建议使用上述创建列表的方法创建其他标签。有关标签的更多信息，请
提示：如果环境已经正确安装，那么大多数情况下的错误都是缩进惹的祸，一定一定要保持一致的缩进格式，建议统一将 tab 键输出为空格，并采用 4 个空格作为标准缩进。
Jade 支持两种注释：单行注释和多行注释。每种注释支持两种模式：输出到源文件和不输出到源文件。
在 Jade 中创建一个单行输出注释和单行不输出注释：
// 这个单行注释会输出到编译后的文件中
p 单行输出注释
//- 这个单行注释不会输出到编译后的文件中
p 单行不输出注释
生成的 HTML：
&!-- 这个单行注释会输出到编译后的文件中--&
&p&单行输出注释&/p&
&p&单行不输出注释&/p&
由上可见，输出和不输出的差别就在于多了一个 - ，谨记！
相比起单行注释，多行注释的内容要在注释符号的下一行，以相同的缩进来编写。多行注释的输出和不输出模式和单行注释相同，需要使用 - 标记：
这个多行注释会输出到编译后的文件中
这个多行注释会输出到编译后的文件中
p 多行输出注释
这个多行注释不会输出到编译后的文件中
这个多行注释不会输出到编译后的文件中
p 多行不输出注释
生成的 HTML：
这个多行注释会输出到编译后的文件中
这个多行注释会输出到编译后的文件中
&p&多行输出注释&/p&
&p&多行不输出注释&/p&
有关注释的更多信息，可以
在 Jade 中填写属性，基本上和 HTML 保持了一致：
input(type='checkbox', checked)
type='checkbox'
name='agreement'
生成的 HTML：
&input type=&checkbox& checked&
&input type=&checkbox& name=&agreement& checked&
但是，你见过可以根据条件设置属性的语法形式吗？这里就有：
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
- var currentUrl = '/about'
a(class={active: currentUrl === '/'} href='/') Home
a(class={active: currentUrl === '/about'} href='/about') About
生成的 HTML：
&body class=&authed&&&/body&
&a href=&/&&Home&/a&&a href=&/about& class=&active&&
对于频繁使用到的类名和 ID 名，Jade 提供了两种字面量：类名字面量和 ID 字面量——非常类似 Emmet 的用法。如果不在字面量前边指定标签名，则默认使用 div :
生成的 HTML：
&div class=&link&&&/div&
&a class=&link&&&/a&
&div id=&button&&&/div&
&a id=&button&&&/a&
另一个常常会被 JavaScript 修改的属性就是 style 。为了更方便地修改该属性，Jade 接收一个类似 JavaScript 对象类型的参数：
a(style={color: 'red', background: 'green'})
生成的 HTML：
&a style=&color:background:green&&&/a&
为了更方便地添加其他自定义属性，jade 特意增加了一个语法格式 &attributes ：
- var attributes = {'data-foo': 'bar'};
div#foo(data-bar=&foo&)&attributes(attributes)
生成的 HTML：
&div id=&foo& data-bar=&foo& data-foo=&bar&&&/div&
Jade 支持三种文本输出方式：单行文本、管道文本和多行文本：
// 单行文本内容直接跟在标签名后面
p 这里是单行文本内容
// 管道文本使用管道符
| 这是一行管道文本，行数无限制
| 这是一行管道文本，行数无限制
| 这是一行管道文本，行数无限制
// 多行文本需要在标签名后添加点号
这是多行文本，注意缩进
这是多行文本，注意缩进
这是多行文本，注意缩进
生成的 HTML：
&!-- 单行文本内容直接跟在标签名后面--&
&p&这里是单行文本内容&/p&
&!-- 管道文本使用管道符--&
这是一行管道文本，行数无限制
这是一行管道文本，行数无限制
这是一行管道文本，行数无限制
&!-- 多行文本需要在标签名后添加点号--&
这是多行文本，注意缩进
这是多行文本，注意缩进
这是多行文本，注意缩进
将 JavaScript 嵌入到 Jade 中，一共有三种方法。第一种方式是使用 - ，代码中的特殊字符不会被转义：
- for (var x = 0; x & 3; x++)
li &a&&/a&
生成的 HTML：
&li&&a&&/a&&/li&
&li&&a&&/a&&/li&
&li&&a&&/a&&/li&
第二种方法是使用 = ，代码中的特殊字符将会被转义：
= 'This code is &escaped&!'
生成的 HTML：
&p&This code is &escaped&!&/p&
第三种方法是使用 != ，代码中的特殊字符不会被转义：
= 'This code is &escaped&!'
生成的 HTML：
&p&This code is &escaped&!&/p&
这是我第二次听说插值的概念，但其实很好理解：使用插值语法，预先指定一个位置，方便以后插入一个新值，简称插值。这段话是我大半夜随性而发，意思到了即可，官方文档里可没有。
Jade 提供了字符串插值和标签插值。其中，字符串插值由于要考虑到安全性问题，所以又分成了转义和不转义两种情况：
// 转义字符串插值 `#{}`
- var theGreat = &&span&escape!&/span&&;
p This will be safe: #{theGreat}
// 不转义字符串插值 `!{}`
- var theGreat = &&span&escape!&/span&&;
p This will be safe: !{theGreat}
// 标签插值
p #[a(href=&&) Jade]
生成的 HTML：
&!-- 转义字符串插值 `#{}`--&
&p&This will be safe: &span&escape!&/span&&/p&
&!-- 不转义字符串插值 `!{}`--&
&p&This will be safe: &span&escape!&/span&&/p&
&!-- 标签插值--&
&p&&a href=&&&Jade&/a&&/p&
说起条件语句，就必须谈到 if ... else if ... else 这个经典的条件判断，它也是 Jade 最基本的条件语句：
- var user = { description: 'foo bar baz' }
- var authorised = false
if user.description
h2 Description
p.description= user.description
else if authorised
h2 Description
p.description.
User has no description,
why not add one...
h1 Description
p.description User has no description
生成的 HTML：
&div id=&user&&
&h2&Description&/h2&
&p class=&description&&foo bar baz&/p&
此外，Jade 还提供了一个 unless 条件语句。如果说 if 可以通过判断 给定条件是否符合要求 来执行下一步，那么 unless 完全是相反的一件事，它会判断 给定条件是否不符合要求 ，如果不符合，就执行下一步。
- var con = false
unless con
p Hello, World
生成的 HTML：
&p&Hello, World&/p&
上面的逻辑结构看起来比生成的 HTML 繁琐多了，但这并不影响它是一种高效的解决方案，尤其是当你复用这段代码的时候。
当需要 if 判断的条件过多时，其他语言会提供类似 switch 的分支判断语句。在 Jade 中，也提供了类似的语法—— case ：
- var friends = 10
case friends
p you have no friends
p you have a friend
p you have #{friends} friends
生成的 HTML：
&p&you have 10 friends&/p&
在 Jade 中并没有提供类似 break 的语法，对于所有的条件默认只有一种输出结果，如果没有符合条件的就输出 defualt 中的内容。但是，有一个特例：
- var friends = 0
case friends
p you have #{friends} friends
生成的 HTML：
&p&you have very 0 friends&/p&
从上面的示例可以看出，当没有可输出内容时，就会执行向下查找可执行语句，一直查找到 default 。
Jade 使用 each 对数组和对象遍历，用法与 JavaScript 大同小异。
// 遍历数组
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
// 遍历对象
each val, index in {1:'one',2:'two',3:'three'}
li= index + ': ' + val
生成的 HTML：
&!-- 遍历数组--&
&li&0: zero&/li&
&li&1: one&/li&
&li&2: two&/li&
&!-- 遍历对象--&
&li&1: one&/li&
&li&2: two&/li&
&li&3: three&/li&
Jade 使用 while 实现循环，用法还是中规中矩的与 JavaScript 相似：
- var n = 0
while n & 4
生成的 HTML：
&li&0&/li&
&li&1&/li&
&li&2&/li&
&li&3&/li&
在 Scss 和 Jade 中，混合宏（mixins）都是举足轻重的语法。混合宏具有复用、解耦、可读、可扩。可维护等等优势。创建混合宏需要使用 mixin 标识符，创建混合宏实例时，需要使用 + 标识符：
//- Declaration
mixin list
生成的 HTML：
&li&foo&/li&
&li&bar&/li&
&li&baz&/li&
&li&foo&/li&
&li&bar&/li&
&li&baz&/li&
上面是最基本的混合宏，此时它还不具有诸多优势，除非我们给它传递参数，才能让它具有非凡活力：
mixin pet(name)
li.pet= name
+pet('cat')
+pet('dog')
+pet('pig')
生成的 HTML：
&li class=&pet&&cat&/li&
&li class=&pet&&dog&/li&
&li class=&pet&&pig&/li&
此外，还可以使用 ... 标识符表示不定数量的参数：
mixin list(id, ...items)
each item in items
+list('my-list', 1, 2, 3, 4)
生成的 HTML：
&ul id=&my-list&&
&li&1&/li&
&li&2&/li&
&li&3&/li&
&li&4&/li&
有时候，我们需要替换混合宏的某个部分，那么就可以使用 block 标识符来占位：
mixin article(title)
.article-wrapper
p No content provided
+article('Hello world')
+article('Hello world')
p This is my
p Amazing article
生成的 HTML：
&div class=&article&&
&div class=&article-wrapper&&
&h1&Hello world&/h1&
&p&No content provided&/p&
&div class=&article&&
&div class=&article-wrapper&&
&h1&Hello world&/h1&
&p&This is my&/p&
&p&Amazing article&/p&
这种可替代语法，进一步提高了 Jade 的灵活性。
最后，我们谈谈有关属性的混合宏，官方文档中列举了两种用法，这里只介绍一种：
mixin link(href, name)
a(href=href)&attributes(attributes)= name
+link('/foo', 'foo')(class=&btn&)
生成的 HTML：
&a href=&/foo& class=&btn&&foo&/a&
上面混合宏中并没有声明 attributes ，是因为 Jade 已经隐式为其引用了所有传递给 &attributes 的参数。
实现高度复用的另一种方式就是将代码片段保存到不同文件中，然后在需要的地方导入这些片段，为此，Jade 提供了 include 指令，下面是一个 index 页面：
//- index.jade
doctype html
include ./includes/head.jade
h1 My Site
p Welcome to my super lame site.
include ./includes/foot.jade
head 代码片段：
//- includes/head.jade
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
footer 代码片段：
//- includes/foot.jade
p Copyright (c) foobar
生成的 HTML：
&!doctype html&
&title&My Site&/title&
&script src='/javascripts/jquery.js'&&/script&
&script src='/javascripts/app.js'&&/script&
&h1&My Site&/h1&
&p&Welcome to my super lame site.&/p&
&div id=&footer&&
&p&Copyright (c) foobar&/p&
Jade 中使用 extends 来继承代码片段，与 include 本本分分地引用代码段不同，继承可以修改代码片段。
首先，在 layout 页面使用 block 标识符，设置一个可修改的代码片段，紧跟 block 标识符之后的是该代码片段的名字：
//- layout.jade
doctype html
block title
title Default title
block content
然后，在 index 页面继承 layout ，并可以根据代码片段的名字修改相关代码：
//- index.jade
extends ./layout.jade
block title
title Article Title
block content
h1 My Article
生成的 HTML：
&!doctype html&
&title&Article Title&/title&
&h1&My Article&/h1&
上述这种继承方式，会抹除原来代码片段的部分，如果想要追加代码片段，可以使用 append 和 prepend 指令。 append 用于在原有代码片段之后追加， prepend 用于在原有代码片段之前追加。一个初始页面：
//- layout.jade
title Layout
block content
使用 append ：
extend layout
block append content
生成的 HTML：
&script src=&/vendor/jquery.js&&&/script&
&script src=&/vendor/caustic.js&&&/script&
&p&Hello&/p&
&p&World&/p&
使用 prepend ：
extend layout
block prepend content
生成的 HTML：
&script src=&/vendor/jquery.js&&&/script&
&script src=&/vendor/caustic.js&&&/script&
&p&World&/p&
&p&Hello&/p&
如果你还没有接触过模板引擎，那么就来试试 Jade 吧，它一定会有让你愉悦的一面。一直有一个梦想：三分钟敲完代码，简洁优美，剩下的人生尽情地去玩……
在校学生，本科计算机专业。狂热地想当一名作家，为色彩和图形营造的视觉张力折服，喜欢调教各类JS库，钟爱CSS，希望未来加入一个社交性质的公司，内心极度肯定“情感”在社交中的决定性地位，立志于此改变社交关系的快速迭代。
如需转载，烦请注明出处：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致在jade中插入js文件，文件内容为源码中的step2但是没有消息 - 开源中国社区
当前访客身份：游客 [
当前位置：
jade代码 html head title Example webrtc.io link(type='text/css', href='stylesheets/rtcstyle.css', rel='stylesheet') script(src='/javascripts/webrtc-ppo.js') body(onload='init()') h1 这里是拨打方页面 #videos video#remoteVideo(autoplay='autoplay') video#localVideo(autoplay='autoplay') br input#over.btn(type='button', value='挂断') js console.log('这里是webrtc-ppo.js'); navigator.getUserMedia = navigator.getUserMedia|| navigator.webkitGetUserMedia||navigator.mozGetUserM var constraints = {audio: true, video: true}; var localVideo = document.getElementById("localVideo"); function successCallback(stream) { window.stream = // stream available to console //var video = document.querySelector("video"); //video.src = window.URL.createObjectURL(stream); //video.play(); localVideo.src = URL.createObjectURL(stream); } function errorCallback(error){ console.log("getUserMedia error: ", error); } getUserMedia(constraints, successCallback, errorCallback); 摄像头也不会打开，但是控制台显示已经get到js文件
共有1个答案
<span class="a_vote_num" id="a_vote_num_
可以关于webrtc的视频 &，大家可以参考的&，这个网站专门发布一些WebRTC的视频资料，国内外的都有，大家可以去取取经
更多开发者职位上
有什么技术问题吗？
类似的话题【新手】jade如何使用jquery UI - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
下载下来的安装包需要复制到哪个文件夹下？
代码又需要如何引用和编写呢？
好吧 我自己回答了
在head中导入
link(rel=‘stylesheet’, href=’/stylesheets/jquery-ui.css’)
script(src=’/javascripts/jquery-2.1.1.min.js’)
script(src=’/javascripts/jquery-ui.min.js’)
jquery的文件放在public对应的文件夹下。
使用（修改button的样式）：
$(function() {$( “button” ).button().click(function( event ) {event.preventDefault();});});
缩进错误真让人蛋疼
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的问题：(javascript)jade如何在一行里头写两个并列的标签？？
描述:RT比如这样的&span&&/span&&a&&/a&解决方案1:#parallel_tag
span this is a span tag
a(href='///q/6908')
|jade如何在一行里头写两个并列的标签
这样应当就可以了吧？我试了一下（http://naltatis.github.io/jade-syntax-docs/），生成的HTML代码如下：&div&&span&this is a span tag&/span&&a href="///q/6908"&&/a&jade如何在一行里头写两个并列的标签&/div&解决方案2:好像不可以的解决方案3:jade不是这么写的，你可以看看这个教程//Jade/解决方案4:jade 不支持这种写法吧。。。解决方案5:// Jade
div: p: span: label Hello Jade
&label&Hello Jade&/label&&/span&&/p&
&/div&参考链接: Block Expansion解决方案6:body
|&span&H&/span&&a&i&/a&jade 本身支持 html , 如果实在特殊情况就直接写 Html 吧.
以上介绍了“(javascript)jade如何在一行里头写两个并列的标签？？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1031463.html
上一篇： 下一篇：}