语言参考

标签列表

doctype

关于文档的类型 默认是html

doctype html
<!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:

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

标签

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

ul
li Item A
li Item B
li Item C
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>

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

img
<img/>

Block 扩展

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

a: img
<a><img/></a>

属性

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

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

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

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

Boolean 属性

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

Class 属性

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

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

Class 字面名称

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

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

默认的标示是div:

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

ID 字面名称

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

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

默认是div

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

存文本

Jade提供了三中方式.  、

Piped Text

使用 | 字符

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

内联标签

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

块标签

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

script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
<script>
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
</script>

代码

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

非缓存代码

Unbuffered 代码以- 开始.

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

缓存代码

缓存代码以= 开始

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

注释

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

块注释

body
//
As much text as you want
can go here.
<body>
<!--
As much text as you want
can go here.
-->
</body>

条件

进行判断

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

迭代

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

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
<p>you have 10 friends</p>

Case Fall Through

- var friends = 0
case friends
when 0
when 1
p you have very few
default
p you have #{friends} friends
<p>you have very few friends</p>

Block 扩展

- 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 a friend</p>

过滤

:markdown
# Markdown I often like including markdown documents.
script
:coffee
console.log 'This is coffee script'
<h1>Markdown</h1>
<p>I often like including markdown documents.</p>
<script>console.log('This is coffee script')</script>

混入

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

包含

// index.jade
doctype html
html
include includes/head
body
h1 My Site
p Welcome to my super lame site.
include includes/foot
// includes/head.jade
head
title My Site
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
// includes/foot.jade
#footer
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. android沉浸状态栏和顶部状态栏背景色的设置

    法一: 现在很多应用都引用了沉浸式状态栏,如QQ,效果下图: 这样的效果很酷炫,其实设置很简单. 不过要说明的是,这种效果只能在API19以及以上版本中才能够做到. 如果想让界面Activity中实现 ...

  2. Android出现declaration of org.apache.http.message.BasicLineFormatter appears in /system/framework/

    这是由于使用了CloseableHttpClient造成的,把 CloseableHttpClient httpclient = HttpClients.createDefault(); Closea ...

  3. 最小生成树(模板 prim)

    Description 省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可).现得到城镇道路统计表, 表中列出了任意两城镇间修建道路 ...

  4. CSS——标准盒子模型

    在写网页的时候一般都先用Div把网页的框架搭好(用不同的背景颜色来区分不同的Div块),然后填充每一个Div,最后把每个Div的背景颜色去掉 <html> <head> < ...

  5. React Js 之JSX

    React使用JSX作为模板替换JavaScript,它不是必须的,但是它是推荐使用.原因如下: 1.它比传统的JavaScript更快,因为编译代码的时候,JSX做了相应的优化 2.它是类型安全的, ...

  6. LTrim、RTrim 和 Trim 函数

    返回不带前导空格 (LTrim).后续空格 (RTrim) 或前导与后续空格 (Trim) 的字符串副本. LTrim(string) RTrim(string) Trim(string) strin ...

  7. [转]VirtualBox中的网络连接方式详解

    如果出现主机无法ping通虚拟机的情况,请首先确认虚拟机防火墙已关闭. 一.NAT模式 特点: 1.如果主机可以上网,虚拟机可以上网 2.虚拟机之间不能ping通 3.虚拟机可以ping通主机(此时p ...

  8. docker(一)安装和必要的配置。

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  9. Flask初级(五)flash在模板中使用继承,模板的模板

    Project name :Flask_Plan templates:templates static:static 继续上一篇文章. 我们不希望每个页面都写一遍引入js,css,导航条……………… ...

  10. python 安装包查看

    pip freeze可以查看已经安装的python软件包和版本 pip list 也可以