Jade使用笔记
安装
npm install jade
在Sublime Text开发的配置
Jade语法高亮显示：
Jade代码高亮显示需要安装的插件有： Jade ；
Jade编译为HTML：
首先需要全局安装Jade模块：
npm install jade --global
然后，通过 Package Control 安装 Jade Build 插件。
使用时，在菜单 Tools > Build System 中，确认勾选了 Automatic 或 Jade 。在 .jade 文件中按 Ctrl+B (Mac: Cmd+B) 执行编译即可。如果编译成功，则会在同级目录下生成 .html 文件。
推荐通过 Package Control 安装 SublimeOnSaveBuild
，参考 https://sublime.wbond.net/packages/SublimeOnSaveBuild
进行配置，将 jade 添加到 filename_filter
中，这样每次保存文件即可以自动执行编译。
Jade语法
标签
Jade：
html
渲染后变成： <html></html>
。
Jade：
div#foo.bar.baz
渲染后变成： <div id="foo"></div><div class="bar"></div>
。
文本
对于小段文本，可以把简单内容直接放在标签之后：
p wahoo!
渲染后： <p>wahoo!</p>
。
对于大段文本，可以在每一行文本的前面加上” | “：
p | foo bar baz | rawr rawr | super cool | go jade go
渲染后为： <p>foo bar baz rawr rawr super cool go jade go</p>
。
对于大段文本，还可以选择以” . “：
p.
foo asdf
asdf
asdfasdfaf
asdf
asd
渲染后：
<p>
foo asdf
asdf
asdfasdfaf
asdf
asd
</p>
这和带一个空格的 ‘.’ 不一样。带空格的 ” . ” 会被Jade的解析器忽略，当作一个普通的文字:
p .
渲染为： <p>.</p>
。
注释
单行注释有以下三种：
// 单行注释 <!-- 单行注释 --> //- 不输出的单行注释
属性
Jade支持使用 “(” 和 “)” 作为属性分隔符。
a(href='/login', title='View login page') Login
渲染为： <a href="/login" title="View login page">Login</a>
。
当一个值是 undefined 或者 null 属性不会被加上。如：
div(something=null)
渲染为： <div></div>
。
可执行代码
Jade目前支持三种类型的可执行代码。第一种是前缀 – ， 这是不会被输出的：
- var foo = 'bar';
-var items = [1, 2, 3, 4]
- if (items.length)
ul
- items.forEach(function(item){
li= item
- })
渲染为：
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
使用 = 输出转义的代码：
- var foo = 'bar' = foo h1= foo
输出： bar<h1>bar</h1>
。
循环
遍历数组：
-var items = ["one", "two", "three"]
each item, i in items
li #{item}: #{i}
渲染为：
<li>one: 0</li> <li>two: 1</li> <li>three: 2</li>
遍历对象：
-var obj = { foo: 'bar', name: "hello" }
each val, key in obj
li #{key}: #{val}
渲染为：
<li>foo: bar</li> <li>name: hello</li>
也可以使用for循环：
-var users = { bob: {roles: "1", custom: "2"}, jeny: {roles: "2"} }
for user in users
for role in user.roles
li= role
渲染为： <li>1</li><li>2</li>
。
条件判断
if判断：
-var users = { bob: {role: "admin", name: "bob"}, jeny: {role: "custom", name: "jeny"} }
for user in users
- if (user.role == 'admin')
p #{user.name} is an admin
- else
p= user.name
渲染为：
<p>bob is an admin</p> <p>jeny</p>
case判断：
- var friends = 10
case friends
when 0
p you have no friends
when 1
p you have a friend
default
p you have #{friends} friends
或：
- var friends = 1
case friends
when 0: p you have no friends
when 1: p you have a friend
default: p you have #{friends} friends
均渲染为：
<p>you have 10 friends</p>
模板继承
Jade支持通过 block 和 extends 关键字来实现模板继承。
在父模板中，使用 block 定义占位符，如下：
layout.jade:
html
head
h1 My Site - #{title}
block scripts
script(src='/jquery.js')
body
block content
block foot
#footer
p some footer content
在子模板中，直接使用extends定义它的父模板。父模板可以选择带.jade扩展名或者不带。
child.jade：
extends layout
block scripts
script(src='/jquery.js')
script(src='/pets.js')
block content
h1= title
each pet in pets
include pet
其中，child.jade渲染为：
<html>
<head>
<h1>My Site - </h1>
<script src="/jquery.js"></script>
<script src="/pets.js"></script>
</head>
<body>
<h2>pet</h2>
<h2>pet</h2>
<h2>pet</h2>
<h2>pet</h2>
<div id="footer"></div>
<p>some footer content</p>
</body>
</html>
包含
Includes 允许你静态包含一段Jade，或者别的存放在单个文件中的东西比如css, html。
如：
html
include head.jade
body
h1 My Site
p Welcome to my super amazing site.
include foot.jade
Mixins
mixin list
ul
li foo
li bar
li baz
h2 Groceries
+list
+list
渲染为：
<h2>Groceries</h2> <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul>
带参数的mixin：
mixin pets(pets)
ul.pets
each pet in pets
li= pet
mixin profile(user)
.user
h2= user.name
mixin pets(user.pets)
-var user = {name: "bob", pets: ["cat", "dog", "pig"]}
+profile(user)
渲染为：
<div class="user"> <h2>bob</h2> <ul class="pets"></ul> <li>cat</li> <li>dog</li> <li>pig</li> </div>
变量调用
jade 的变量调用有 3 种方式：
-
{表达式}
- =表达式 // 会对字符进行转义
- !=表达式 // 不会对字符进行转义
- var s = 'hello world' // 在服务端空间中定义变量
p #{s}
p= s
渲染为：
<p>hello world</p> <p>hello world</p>
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
