jade （pug）

深藏阁楼爱情的钟 2022-09-28 13:05 197阅读 0赞

资料： [https://segmentfault.com/a/1190000006198621\#articleHeader10][https_segmentfault.com_a_1190000006198621_articleHeader10]

【jade】

编译：jade name.jade 编译成压缩后的html

jade -P name.jade 有缩进

jade -P -w name.jade 实时编译

语法：

1.子标签相对于父标签，缩进两个空格，标签与内容缩进一个空格

2.添加class，id 可在标签后直接添加例如（h1.class\#id <==><h1 class = "class" id = "id"></h1>）div可省略标签名（.class\#id <==> <div class="class" id="id"></div>）;

对于其他属性，在标签后的括号内写明即可（a(href = "http://www.baidu.com") <==> <a href="http://www.baidu.com"></a>）

3.对于大段文本，可以在标签后紧贴'.'(注意是紧贴，否则'.'也会被当成文本)，然后另起一行输入正常的文本（可以有html成对的标签）。（或：'|'表示换行，嵌套标签写法遵循jade语法规律 ）

4.注释：

单行注释：// <==>

非缓冲注释：//- 不会编译到html

块注释：//-

p balabala~~ 注释上层即注释上层包含的全部标签内容

IE注释：

5.变量赋值与替换：

jade name.jade -P -w --obj "\{'course':'hello'\}" (命令行传值)

jade name.jade -P -w -O name.json (json文件传值)

\- var course = "jade" (文档声明变量，优先级最高)

变量替换：\#\{course.toUpperCase()\}

6.转义与非转义：

转义（不保留变量中原始标签）： \#\{变量名\} 或者 标签名= 变量名（p= 变量名）

非转义（保留变量中原始标签） ：!\{变量名\} 或者 标签名!= 变量名(p!= 变量名)

对于\#\{\}或者!\{\}通过反斜线'\\'表示（\\\#\{something\} <==> \#\{something\}）

input(value=data)，当data无值是为空

7.循环语句：

while循环：

\- var n = 0

while(n < 4)

li= n++

for循环：

\- var course = \{ course: 'jade',level: 'high'\}

\- for （var k in course）

p= course\[k\]

each循环：

\- each value,key in course

p \#\{key\}: \#\{value\}

遍历数组：

\- var courses = \['node','jade','express'\]

each item in courses

p= item

嵌套循环：

\- var sections = \[\{id: 1,items:\['a','b'\]\},\{id: 2,items:\['c','d'\]\}\]

each section in sections.length > 0?sections : \[\{id: 0,items:\['none'\]\}\]

dt= section.id

each item in section.items

dd= item

8.条件语句：

if-else：

if 表达式

....

else if 表达式

.....

else

......

unless：

unless 表达式（表达式值为false执行）

.......

case-when（类似于switch-case）：

case 变量

when 'balabala~' : .......

...

default

.....

9.mixin

普通mixin：

声明： mixin name

p jade study

调用：+name

带参数的mixin：

声明：

mixin study(name,courses)

p \#\{name\}

ul.courses

each course in courses

li= course

调用：

\+study('Ivan',\['jade','node','js'\])

嵌套的mixin：

声明：

mixin group(student)

h4 \#\{student.name\}

\+study(student.name,studeng.courses)

调用：

\+group(\{name: 'Ivan',courses: \['jade','node','js'\]\})

mixin内联代码块：

声明：

mixin team(name)

h4 \#\{name\}

if block //如果有代码块

block

else

p no block

调用：

\+team('clayja')

p Good job!

mixin传递属性：

声明（单一属性）：

mixin attr(name)

p(class!=attributes.class) \#\{name\} //这里传递的是class属性

//attributes已经转义，所以应该使用！=避免二次转义编译后:

调用：

\+attr('attr')(class='magic')

声明（多属性）：

mixin attrs(name)

p&attributes(attributes) \#\{name\}

调用：

\+attrs('attrs')(class='attrClass',id='attrId')

mixin参数个数不确定：

声明：

mixin magic(name, ...items)

ul(class='\#\{name\}')

each item in items

li= item

调用：

\+magic('magic','jade','node','js')

10.模板继承：

layout.jade

doctype html

<html>

head

include head

body

block desc

p desc from layout

block content //声明

</html>

index.jade

extends layout.jade //相对路径

block content

//当前文件声明的同名block将覆盖extends继承的

11.模板包含：

include filename（可以是jade、html）

12.filters(配合其他插件使用，如less，coffee，markdown)

语法：

:markdown或:less或:coffee

但不能传动态数据。

13.runtime

。。。。

14.html2jade:

[https_segmentfault.com_a_1190000006198621_articleHeader10]: https://segmentfault.com/a/1190000006198621#articleHeader10

jade （pug）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 express jade_使用Express和Jade滚动自己的RSS feed

相关 Vue 中使用Pug

相关 php配合jade使用,Node.js使用jade模板引擎步骤详解

相关 jade （pug）

相关 jade模板引擎（二）

相关 jade模板引擎（一）

相关 pug--HTML模板引擎安装编译

相关 Jade笔记

相关 jade

相关 NodeJS简易博客系统（一）Jade/Pug模板引擎入门