模板引擎jade学习
语言参考
标签列表
- doctype
- Tags
- Attributes
- Plain Text
- Code
- Comments
- Conditionals
- Iteration
- Case
- Filters
- Mixins
- Includes
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 linePlain 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 <escaped>!</p>
p= 'This code is' + ' <escaped>!'<p>This code is <escaped>!</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 ...
随机推荐
- 4-14-17 JavaScript知识点总结（包括JOSN, ajax等，来源w3c）
JavaScript 也称 ECMAScript as "JavaScript" It is designed to run as a scripting language in ...
- Jersey 2.x 从Maven Archetype 创建一个新项目
创建 Jersey 工程需要使用 Apache 的 Maven 软件工程和管理工具.所有的Jersey产品模块都可以在 Maven中央库 中找到.这样的话 Jersey 可以非常容易和其他基于 Mav ...
- Confluence 6 使用 LDAP 授权连接一个内部目录 - 拷贝用户到登录
在登录时拷贝用户(Copy User on Login) 这个选项在用户尝试登录的时候将会被触发.如果这个选择框被选择的话,当用户使用 LDAP 授权的用户名和密码登录系统的时候,用户将会在内部目录自 ...
- Enduring Exodus CodeForces - 655C (二分)
链接 大意: n个房间, 1为占用, 0为未占用, John要将k头奶牛和自己分进k+1个空房间, 求John距最远的奶牛距离的最小值 这种简单题卡了20min.... 显然对于固定的k+1个房间, ...
- 基于binlog的增量备份
1.1 增量备份简介 增量备份是指在一次全备份或上一次增量备份后,以后每次的备份只需备份与前一次相比增加或者被修改的文件.这就意味着,第一次增量备份的对象是进行全备后所产生的增加和修改的文件:第二次增 ...
- python-day39--mysql基本操作
1.修改密码: mysqladmin -uroot password 123 2.忘记密码如何修改密码: 1.干掉data目录---> 重新初始化 (不推荐,所有授权信息全部丢失!!!) 2 ...
- python 抓取搜狗微信出现的问题，求大神解决
爬取到的data不是想要获取文章页面的源码,而是跳转到验证码的页面的源码.我网上查了一下是由于访问过于频繁导致的,我也加了time.sleep和改了请求头但还是显示不了,求大神支招,除了识别验证码的方 ...
- 巧妙利用SVN 实现复制需要部署的文件。
http://blog.csdn.net/xiaoding133/article/details/39252357 http://blog.csdn.net/sinat_29173167/articl ...
- java redis client jedis 测试
package cn.byref.demo1; import java.util.HashMap; import java.util.List; import java.util.Map; impor ...
- @RequiresPermissions ,@RequiresUser , @RequiresGuest ,@RequiresRoles 解释
转载地址:https://blog.csdn.net/AinUser/article/details/64920968?locationNum=1&fps=1 @RequiresPermiss ...