html模板引擎jade的使用
jade语法:
#{xxx} //嵌入数据
p= xxx //嵌入数据
p #{xx} //嵌入数据
标签 html // 翻译为<html></html>
div#test // <div id="test"></div>
div.bb-dd // <div class="bb-dd"></div>
div#bb.aa.cc //也可以的,类似emmet的语法
#content
.item
// <div id="content"><div class="item"></div></div>
p 啊噢！ // <p>啊噢！</p>
p
| foo bar baz
| rawr rawr
| go jade go
//输出大段文本内容 <p>foo bar baz rawr.....</p>
输出 #{}转义 p \#{something} // <p>#{something}</p>
输出 \ 使用\\
//不转义执行script
- var html = "<script>console.log('oo'); $(function(){console.log('ye');});</script>"
| !{html}
//执行js
script
| console.log('yy');
| console.log('dd');
或者
script.
console.log('aa');
console.log('bb');
console.log('cc');
function add(a,b){
return a+b;
}
add(1,3);
//引入css文件
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='/jquery.js')
注释：
//just some paragraphs 单行注释 解释渲染为 <!-- just some paragraphs -->
不输出到最终html文件的注释
//- will not output within markup
//条件输出 注意缩进
- var friends = 10
case friends
when 0
p 没有盆友
when 1
p 你有1个盆友
when default
p 你有#{friends}个盆友
//或者这样
- var arr = 0
case friends
when 0: p 没有盆友
when 1: p 你有1个盆友
//元素多个属性
input(name='user[name]' autofocus='autofocus')
//或者用逗号 input(type="checkbox", checked)
a标签
a(href='/user/' + user.id)= user.name
或者 a(href='/user/#{user.id}')= user.name
class 属性是一个特殊的属性，你可以直接传递一个数组，比如 bodyClasses = ['user', 'authenticated'] :
body(class=bodyClasses)
文档类型
!!! 5 或者 !!! html 或者 doctype html
执行代码 ,逻辑控制
jade支持三种类型的可执行代码
1. 前缀 -， 这是不会被输出的
- var foo = 'bar';
- for (var key in obj) //条件或循环
p= obj[key]
- if (foo)
ul
li yay
li foo
li worked
- else
p oh no! didnt work
- if (items.length)
ul
- items.forEach(function(item){
li= item
- })
2.前缀一个= 返回一个值
- var foo = 'bar'
= foo
h1= foo
// = 输出的代码默认是转义的,如果想直接输出不转义的值可以使用 !=
if, else if, else, until, while, unless 它们是普通的javascript代码
同时 Jade 还是支持了一些特殊的标签，它们可以让模板更加易于理解，其中之一就是 each
循环：
语法 each VAL[, KEY] in OBJ
- var items = ["one", "two", "three"]
each item in items
li= item
//带上索引
each item, i in items
li #{item}: #{i}
键值对
- var obj = { foo: 'bar' }
each val, key in obj
li #{key}: #{val}
- var foo = {one:11,two:22,three:33}
each val,key in foo
p #{key}
span #{val}
for user in users
for role in user.roles
li= role
条件语句:
for user in users
if user.role == 'admin'
p #{user.name} is an admin
else
p= user.name
for user in users
- if (user.role == 'admin')
p #{user.name} is an admin
- else
p= user.name
模板继承：
block xxx 在子模板中实现
子模板中继承时 使用 extends xxx 指定
实现block时默认会替换block 块
也可以使用
block append 或 block prepend 在块的前面或者后面追加
包含 使用 include xxx/xx
比如:
./layout.jade
./includes/
./head.jade
./tail.jade
此时layout.jade
html
include includes/head
body
h1 My Site
p Welcome to my super amazing site.
include includes/foot
或者给定后缀扩展名
html
head
//- css and js have simple filters that wrap them in
<style> and <script> tags, respectively
include stylesheet.css
html模板引擎jade的使用的更多相关文章
- js 模板引擎 jade使用语法
Jade是一款高性能简洁易懂的模板引擎,Jade是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持. 功能 · 客户端支持 · 超强的可读性 · 灵活易用的缩进 · 块扩展 ...
- node.js中的模板引擎jade、handlebars、ejs
使用node.js的Express脚手架生成项目默认是jade模板引擎,jade引擎实在是太难用了,这么难用还敢设为默认的模板引擎,过分了啊!用handlebars模板引擎写还说的过去,但笔者更愿意使 ...
- nodejs学习（二） ---- express中使用模板引擎jade
系列教程,上一节教程 express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...
- nodeJs学习-09 模板引擎 jade、ejs
模板引擎: jade -破坏式.侵入式,强依赖:用了之后不能随便用别的引擎 ejs - 温和.非侵入时.弱依赖 jade使用 const jade = require('jade'); var str ...
- 模板引擎Jade详解
有用的符号: | 竖杠后的字符会被原样输出 · 点表示下一级的所有字符都会被原样输出,不再被识别.(就是|的升级版,实现批量) include 表示引用外部文件 短杠说明后面跟着的字符只是一段代码(与 ...
- nodejs 模板引擎jade的使用
1.test.jade文件 html head style body div.box div#div1 div aaa div(class="aaa left-warp active&quo ...
- 模板引擎jade学习
语言参考 标签列表 doctype Tags Block Expansion Attributes Boolean Attributes Class Attributes Class Literal ...
- nodejs 模板引擎jade的简单使用(2)
1.jade html head style body div.box div#div1 div aaa div(class="aaa left-warp active") div ...
- nodejs 模板引擎jade的简单使用
1.jade html head style script body div ul li li jade1.js var jade=require('jade'); var str=jade.rend ...
随机推荐
- 安装python虚拟运行环境，linux下轻松切换python2和python3
一.查询系统采用的python版本 $ python --version Python 3.7.3 系统采用的python版本为3.7.3 以下查询py3和py2的目录: $ which python ...
- python-5模块
1-使用模块 import sys def test(): args = sys.argv if len(args)==1: print("hello word") elif le ...
- Java-JNA使用心得2
自5月初第一次尝试使用Java封装调用C的dll之后,已经先后经历了3次小项目了. 上月末是最近的一次项目实际,任务来的急时间又少,还好在加班加点后还是完成了任务,并把第二次没有实现的功能给实现了(C ...
- mybatis 关联查询实现一对多
场景:最近接到一个项目是查询管理人集合 同时每一个管理人还存在多个出资人 要查询一个管理人列表 每个管理人又包含了出资人列表 采用mybatis关联查询实现返回数据. 实现方式: 1 .在实体 ...
- 如何使用API创建OpenStack虚拟机？
在安装时OpenStack会加载配置信息.有不同的虚拟机模板而且与在Amazon EC2以及其他平台上看到的完全一样.这些配置是内存.vCPU.磁盘容量等的组合,定义了虚拟机的大小及容量.可以使用如下 ...
- PowerDesigner常用功能总结
1.PowerDesigner设计表时显示注释列Comment 选中准备编辑的表,[右键]->[Properties]->[Columns]->[Customize Columns ...
- 从事IT业一个8年老兵转行前的自我总结1——初爻
现在,本人已离开这个呆了8年的软件行业了.回想自己从半路出家,从实施开始做起,最终在一家外企做项目经理PM结束了自己的软件职业生涯.从一张白纸的自学开始,做过项目实施,客户培训,拿过需求,开发,架构设 ...
- AS3项目基础框架搭建分享robotlegs2 + starling1.3 + feathers1.1
这个框架和我之前使用robotlegs1版本的大体相同,今天要写一个新的聊天软件就把之前的框架升级到了2.0并且把代码整理了一下. 使用适配器模式使得starling的DisplayObject和fl ...
- 《Cracking the Coding Interview》——第18章：难题——题目2
2014-04-29 00:59 题目:设计一个洗牌算法,效率尽量快点,必须等概率. 解法:每次随机抽一张牌出来,最后都抽完了,也就洗好了.时间复杂度O(n^2),请看代码. 代码: // 18.2 ...
- 《Cracking the Coding Interview》——第2章：链表——题目4
2014-03-18 02:27 题目:将一个单链表按照一个值X分为两部分,小于X的部分放在大于等于X的部分之前. 解法:按照值和X的大小,分链表为两条链表,然后连起来成一条. 代码: // 2.4 ...