语言参考

标签列表

doctype

关于文档的类型 默认是html

  1. doctype html
  1. <!DOCTYPE html>

简洁文档类型标记

xml
<?xml version="1.0" encoding="utf-8" ?>
transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
basic
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
mobile
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

You can also use your own literal custom doctype:

  1. doctype html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">

标签

默认，每行最开始的（或者在空格之后的（只有空格））代表一个html 标签 ，可以嵌入缩进，创建像html 文档结构的样式。

  1. ul
  2. li Item A
  3. li Item B
  4. li Item C
  1. <ul>
  2.   <li>Item A</li>
  3.   <li>Item B</li>
  4.   <li>Item C</li>
  5. </ul>

jade 也知道那种标签是可以自己关闭的。

  1. img
  1. <img/>

Block 扩展

jade 提供的支持内联的嵌入标签

  1. a: img
  1. <a><img/></a>

属性

标签属性看起来比较像html, 然后它们的值只是规则的javascript.

  1. a(href='google.com') Google
  2. a(class='button', href='google.com') Google
  1. <a href="google.com">Google</a>
  2. <a class="button" href="google.com">Google</a>

普通的javascript扩展也可以使用:

  1. - var authenticated = true
  2. body(class=authenticated?'authed':'anon')
  1. <body class="authed"></body>

Boolean 属性

  1. input(type='checkbox', checked)
  2. input(type='checkbox', checked=true)
  3. input(type='checkbox', checked=false)
  4. input(type='checkbox', checked=true.toString())
  1. <input type="checkbox" checked="checked" />
  2. <input type="checkbox" checked="checked" />
  3. <input type="checkbox" />
  4. <input type="checkbox" checked="true" />
  1. doctype html
  2. input(type='checkbox', checked)
  3. input(type='checkbox', checked=true)
  4. input(type='checkbox', checked=false)
  5. input(type='checkbox', checked=true && 'checked')
  1. <!DOCTYPE html>
  2. <input type="checkbox" checked>
  3. <input type="checkbox" checked>
  4. <input type="checkbox">
  5. <input type="checkbox" checked="checked">

Class 属性

类属性只是简单的字符串、 但是它们可以代表一系列类名, 它们是从javascript中生成的.

  1. - var classes = ['foo', 'bar', 'baz']
  2. a(class=classes)
  3. //- the class attribute may also be repeated to merge arrays
  4. a.bing(class=classes class=['bing'])
  1. <a class="foo bar baz"></a>
  2. <a class="foo bar baz bing"></a>

Class 字面名称

就是html 标签中class 属性的名称

  1. a.button
  1. <a class="button"></a>

默认的标示是div:

  1. .content
  1. <div class="content"></div>

ID 字面名称

就是html 标签中id属性的名称

  1. a#main-link
  1. <a id="main-link"></a>

默认是div

  1. #content
  1. <div id="content"></div>

存文本

Jade提供了三中方式.  、

Piped Text

使用 | 字符

  1. | Plain text can include <strong>html</strong>
  2. p
  3. | It must always be on its own line
  1. Plain text can include <strong>html</strong>
  2. <p>It must always be on its own line</p>

内联标签

  1. p Plain text can include <strong>html</strong>
  1. <p>Plain text can include <strong>html</strong></p>

块标签

使用.  一个较好的例子就是script 和style.  为了这样做，你仅仅使用 . 在一个标签之后（没有空格）

  1. script.
  2.   if (usingJade)
  3.     console.log('you are awesome')
  4.   else
  5.     console.log('use jade')
  1. <script>
  2.   if (usingJade)
  3.     console.log('you are awesome')
  4.   else
  5.     console.log('use jade')
  6. </script>

代码

Jade 可以进行javascript代码的编写.

非缓存代码

Unbuffered 代码以- 开始.

  1. - for (var x = 0; x < 3; x++)
  2. li item
  1. <li>item</li>
  2. <li>item</li>
  3. <li>item</li>

缓存代码

缓存代码以= 开始

  1. p
  2. = 'This code is <escaped>!'
  1. <p>This code is &lt;escaped&gt;!</p>
  1. p= 'This code is' + ' <escaped>!'
  1. <p>This code is &lt;escaped&gt;!</p>

注释

  1. // just some paragraphs
  2. p foo
  3. p bar
  1. <!-- just some paragraphs -->
  2. <p>foo</p>
  3. <p>bar</p>
  1. //- will not output within markup
  2. p foo
  3. p bar
  1. <p>foo</p>
  2. <p>bar</p>

块注释

  1. body
  2. //
  3.     As much text as you want
  4.     can go here.
  1. <body>
  2.   <!--
  3.   As much text as you want
  4.   can go here.
  5.   -->
  6. </body>

条件

进行判断

  1. - var user = { description: 'foo bar baz' }
  2. #user
  3. if user.description
  4. h2 Description
  5. p.description= user.description
  6. else
  7. h1 Description
  8. p.description User has no description
  1. <div id="user">
  2.   <h2>Description</h2>
  3.   <p class="description">foo bar baz</p>
  4. </div>
  1. unless user.isAnonymous
  2. p You're logged in as #{user.name}
  1. if !user.isAnonymous
  2. p You're logged in as #{user.name}

迭代

  1. ul
  2. each val in [1, 2, 3, 4, 5]
  3. li= val
  1. <ul>
  2.   <li>1</li>
  3.   <li>2</li>
  4.   <li>3</li>
  5.   <li>4</li>
  6.   <li>5</li>
  7. </ul>
  1. ul
  2. each val, index in ['zero', 'one', 'two']
  3. li= index + ': ' + val
  1. <ul>
  2.   <li>0: zero</li>
  3.   <li>1: one</li>
  4.   <li>2: two</li>
  5. </ul>
  1. ul
  2. each val, index in {1:'one',2:'two',3:'three'}
  3. li= index + ': ' + val
  1. <ul>
  2.   <li>1: one</li>
  3.   <li>2: two</li>
  4.   <li>3: three</li>
  5. </ul>

Case语句

  1. - var friends = 10
  2. case friends
  3. when 0
  4. p you have no friends
  5. when 1
  6. p you have a friend
  7. default
  8. p you have #{friends} friends
  1. <p>you have 10 friends</p>

Case Fall Through

  1. - var friends = 0
  2. case friends
  3. when 0
  4. when 1
  5. p you have very few
  6. default
  7. p you have #{friends} friends
  1. <p>you have very few friends</p>

Block 扩展

  1. - var friends = 1
  2. case friends
  3. when 0: p you have no friends
  4. when 1: p you have a friend
  5. default: p you have #{friends} friends
  1. <p>you have a friend</p>

过滤

  1. :markdown
  2.   # Markdown
  4. I often like including markdown documents.
  5. script
  6. :coffee
  7.     console.log 'This is coffee script'
  1. <h1>Markdown</h1>
  2. <p>I often like including markdown documents.</p>
  3. <script>console.log('This is coffee script')</script>

混入

  1. //- Declaration
  2. mixin list
  3. ul
  4. li foo
  5. li bar
  6. li baz
  7. //- Use
  8. +list()
  9. +list()
  1. <ul>
  2.   <li>foo</li>
  3.   <li>bar</li>
  4.   <li>baz</li>
  5. </ul>
  6. <ul>
  7.   <li>foo</li>
  8.   <li>bar</li>
  9.   <li>baz</li>
  10. </ul>
  1. mixin pets(pets)
  2. ul.pets
  3. - each pet in pets
  4. li= pet
  5. +pets(['cat', 'dog', 'pig'])
  1. <ul class="pets">
  2.   <li>cat</li>
  3.   <li>dog</li>
  4.   <li>pig</li>
  5. </ul>
  1. mixin article(title)
  2. .article
  3. .article-wrapper
  4. h1= title
  5. if block
  6. block
  7. else
  8. p No content provided
  10. +article('Hello world')
  12. +article('Hello world')
  13. p This is my
  14. p Amazing article
  1. <div class="article">
  2.   <div class="article-wrapper">
  3.     <h1>Hello world</h1>
  4.     <p>No content provided</p>
  5.   </div>
  6. </div>
  8. <div class="article">
  9.   <div class="article-wrapper">
  10.     <h1>Hello world</h1>
  11.     <p>This is my</p>
  12.     <p>Amazing article</p>
  13.   </div>
  14. </div>
  1. mixin link(href, name)
  2. a(class!=attributes.class, href=href)= name
  4. +link('/foo', 'foo')(class="btn")
  1. <a class="btn" href="/foo">foo</a>

包含

  1. // index.jade
  2. doctype html
  3. html
  4. include includes/head
  5. body
  6. h1 My Site
  7. p Welcome to my super lame site.
  8. include includes/foot
  1. // includes/head.jade
  2. head
  3. title My Site
  4. script(src='/javascripts/jquery.js')
  5. script(src='/javascripts/app.js')
  1. // includes/foot.jade
  2. #footer
  3. p Copyright (c) foobar

模板引擎jade学习的更多相关文章

  1. nodejs学习（二） ---- express中使用模板引擎jade

    系列教程,上一节教程  express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...

  2. nodeJs学习-09 模板引擎 jade、ejs

    模板引擎: jade -破坏式.侵入式,强依赖:用了之后不能随便用别的引擎 ejs - 温和.非侵入时.弱依赖 jade使用 const jade = require('jade'); var str ...

  3. js 模板引擎 jade使用语法

    Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 · 客户端支持 · 超强的可读性 · 灵活易用的缩进 · 块扩展 ...

  4. lavarel模板引擎blade学习

    blade 模板学习 特点 主要的两个优点是:模板继承和区块 继承页面布局 布局文件(layout.php) + 详情文件 (page.php) 的组合,即一般到具体的组合.在blade文件之中的体现 ...

  5. node.js中的模板引擎jade、handlebars、ejs

    使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使 ...

  6. html模板引擎jade的使用

    jade语法: #{xxx} //嵌入数据 p= xxx //嵌入数据 p #{xx} //嵌入数据 标签 html // 翻译为<html></html> div#test ...

  7. 模板引擎Jade详解

    有用的符号: | 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别.(就是|的升级版,实现批量) include 表示引用外部文件 短杠说明后面跟着的字符只是一段代码(与 ...

  8. nodejs 模板引擎jade的使用

    1.test.jade文件 html head style body div.box div#div1 div aaa div(class="aaa left-warp active&quo ...

  9. 模板引擎Velocity学习系列-#set指令

    #set指令 #set指令用于向一个变量或者对象赋值. 格式: #set($var = value) LHS是一个变量,不要使用特殊字符例如英文句号等,不能用大括号括起来.测试发现#set($user ...

随机推荐

  1. (GoRails )使用Vue.js制作拖拉list功能(v1-4) gem 'acts_as_list'(自动排列顺序)

    系列视频: use Vue.js to build the drag and drop support for the list themselves the cards that are under ...

  2. 删除php数组中的元素

    删除一个元素,且保持原有索引不变 使用 unset 函数,示例如下: <?php $array = array(0 => "a", 1 => "b&qu ...

  3. ssh The authenticity of host '10.11.26.2 (10.11.26.2)' can't be established

    The authenticity of host '10.11.26.2 (10.11.26.2)' can't be established. ECDSA key fingerprint is SH ...

  4. 新项目中使用的linux命令

    要通过跳板机进入内网之后,访问内网域名 mysql -h xxxxxxx -u u_caojiangjiang -p -P 3306 上传文件: scp -r /Users/qudian/Deskto ...

  5. 高精度减法用string 和 stack

    #include "bits/stdc++.h" using namespace std; int main() { string a,b; while(cin >> ...

  6. ehcache.xml详解

    <?xml version="1.0" encoding="UTF-8"?> <ehcache> <!-- Sets the pa ...

  7. 54. 59. Spiral Matrix

    1. Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral ...

  8. 数据库故障诊断（Troubleshooting）之性能问题导致的数据库严重故障案例之一

    好久不来这里写东西,今天有点时间,来这里写点最近遇到的事情.前段时间,某电信业务用户因某核心生产库最近多次宕机重启,多方人员介入无果后,给我发来了邮件,大概意思就是现在该问题已经造成了比较严重的后果, ...

  9. photoshop cc 智能切图

    这节分享一个photoshop cc 开始有的自动生成图标的方法 psd练习文件 http://pan.baidu.com/s/1pL2dwL1 1 工具:我这里用的是photoshop cc 201 ...

  10. git reset --hard和git revert命令

      git reset --hard和git revert命令   git误操作时可以用git reset –hard 去撤销这次修改, 但是这样做也有问题,可能在之前本地有没有提交的修改也都消失了, ...