转载

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语法

文本

对于小段文本，可以把简单内容直接放在标签之后：

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>

原文 http://www.dengzhr.com/frontend/node-js/854

正文到此结束

所属分类：编程技术

本文标签： js 代码参数编译配置解析 http https NSA 插件目录安装 HTML src ip CSS list cat 空间 build node UI key 注释开发 cmd jquery 遍历
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

Jade使用笔记

安装

在Sublime Text开发的配置

Jade语法高亮显示：

Jade编译为HTML：

Jade语法

标签

文本

注释

属性

可执行代码

循环

条件判断

if判断：

case判断：

模板继承

包含

Mixins

变量调用

{表达式}

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流