模板引擎jade学习

语言参考

标签列表

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, 然后它们的值只是规则的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学习的更多相关文章

nodejs学习（二） ---- express中使用模板引擎jade
系列教程,上一节教程 express+nodejs快速创建一个项目在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...
nodeJs学习-09 模板引擎 jade、ejs
模板引擎: jade -破坏式.侵入式,强依赖:用了之后不能随便用别的引擎 ejs - 温和.非侵入时.弱依赖 jade使用 const jade = require('jade'); var str ...
js 模板引擎 jade使用语法
Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 · 客户端支持 · 超强的可读性 · 灵活易用的缩进 · 块扩展 ...
lavarel模板引擎blade学习
blade 模板学习特点主要的两个优点是:模板继承和区块继承页面布局布局文件(layout.php) + 详情文件 (page.php) 的组合,即一般到具体的组合.在blade文件之中的体现 ...
node.js中的模板引擎jade、handlebars、ejs
使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使 ...
html模板引擎jade的使用
jade语法: #{xxx} //嵌入数据 p= xxx //嵌入数据 p #{xx} //嵌入数据标签 html // 翻译为<html></html> div#test ...
模板引擎Jade详解
有用的符号: | 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别.(就是|的升级版,实现批量) include 表示引用外部文件短杠说明后面跟着的字符只是一段代码(与 ...
nodejs 模板引擎jade的使用
1.test.jade文件 html head style body div.box div#div1 div aaa div(class="aaa left-warp active&quo ...
模板引擎Velocity学习系列-#set指令
#set指令 #set指令用于向一个变量或者对象赋值. 格式: #set($var = value) LHS是一个变量,不要使用特殊字符例如英文句号等,不能用大括号括起来.测试发现#set($user ...

随机推荐

1月21日 Reference Data Type 数据类型，算法基础说明，二分搜索算法。(课程内容)
Reference Datat Types 引用参考数据类型 -> 组合数据类型 Array, Hash和程序员自定义的复合资料类型组合数据的修改: 组合数据类型的变量,不是直接存值,而是存一 ...
Android之MVP模式实现登录和网络数据加载
MVP简介相信大家对 MVC 都是比较熟悉了:M-Model-模型.V-View-视图.C-Controller-控制器,MVP作为MVC的演化版本,也是作为用户界面(用户层)的实现模式,那么类似的 ...
Confluence 6 配置 LDAP 连接池
当 LDAP 连接池被启用后,LDAP 目录服务器将会维护一个连接池同时当必要的时候指派他们.当一个连接关闭后,这个连接将会放回到连接池中供以后进行使用.这种设置将会有效的提高系统性能. 希望配置 L ...
Linux中的yum是什么？如何配置？如何使用？
yum,是Yellow dog Updater Modified的简称,起初是由yellow dog这一发行版的开发者Terra Soft研发,用python写成,那时还叫做yup(yellow do ...
Application 类
Application 类具有用于启动和停止应用程序和线程以及处理 Windows 消息的方法,如下所示: Run 在当前线程上启动应用程序消息循环,并可以选择使某窗体可见. Exit 或 ExitT ...
MyBatis:4
转载:http://www.cnblogs.com/xrq730/p/5289638.html 什么是动态SQL MyBatis的一个强大特性之一通常是它的动态SQL能力.如果你有使用JDBC或其他相 ...
简话Angular 06 Angular自定义指令
一句话: 直接return link函数可以解决大多数问题,无须死扣用法 1. 上源码 (dom操作,事件,css,mode操作全包括了) <h3>Custom directive, wi ...
简话Angular 02 Angular控制器-作用域嵌套
一句话: 就是孩子可以啃老,老子不能动孩子一根毛! * 子控制器有父控制器里变量的所有权限,可以读取,也可以修改. * 父控制器不能读,也不能修改孩子的变量 1. html代码 <div ng- ...
Python的数据类型3元组，集合和字典
首先要讲到的就是元组元组其实拥有列表的一些特性,可以存储不同类型的值,但在某些方面元组又比不上列表定义一个元组,你可以不用加‘ [ ] ’,你只需用逗号隔开即可例如 1 2 3 4 5 6 7 ...
Python Face Recognition 实现人脸识别
一.Face Recognition软件包我们的人脸识别基于face_recognition库.face_recognition基于dlib实现,用深度学习训练数据,模型准确率高达99.38%. 人 ...

模板引擎jade学习

语言参考

doctype

标签

Block 扩展

属性

Boolean 属性

Class 属性

Class 字面名称

ID 字面名称

存文本

Piped Text

内联标签

块标签

代码

非缓存代码

缓存代码

注释

块注释

条件

迭代

Case语句

Case Fall Through

Block 扩展

过滤

混入

包含

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

随机推荐

热门专题