学习 Jade

优秀的模板引擎 Jade ，减少写代码，提高可读性，提高生活质量。。。

为什么需要 Jade ？

减少写代码，提高可读性，提高生活质量。。。

html

这一层一层的。。。

图片

看 jade 的这个拼接。

Jade 优点：

  • 超强的可读性
  • 灵活的缩进
  • 块扩展
  • 代码默认经过编码处理以增强安全性
  • 编译及运行时的上下文错误报告
  • 命令行的编译支持
  • HTML5 模式
  • 可选的内存缓存
  • 利用过滤器解析树的处理

后面说的什么鬼其实我也不懂，但是最大优点: 超强的可读性，提升开发效率。

需要 Node.js 环境， 没有装的可以参考Mac 上配置 Node.js 环境

安装 Jade

1
2
# 通过 npm 安装 jade
$ npm install jade -g

开始使用

创建 index.jade 文件

index.jade

1
2
3
4
5
6
doctype html
html
  head
    title hanks.xyz
  body
    p welcome to hanks.xyz

就是这么简单，下面开始将 jade 文件渲染为 html 文件

1
$ jade index.jade

html:

1
<!DOCTYPE html><html><head><title>hanks.xyz</title></head><body><p>welcome to hanks.xyz</p></body></html>%

可以看到渲染出来的 index.html 文件是经过压缩过的。我们可以加速 -P 参数格式化渲染的 index.html

1
$ jade -P index.jade

html:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>hanks.xyz</title>
  </head>
  <body>
    <p>welcome to hanks.xyz</p>
  </body>
</html>

还可以加上 -w 参数监听 jade 文件的变化，自动渲染刷新 html 文件

1
$ jade -P -w index.jade

动态渲染

基本语法

标签

默认，每行开始的第一个单词代表一个标签，可以是自定义的标签
jade:

1
2
3
p welcome to hanks.xyz
h1 h1 标题
h2 h2 标题

html:

1
2
3
<p>welcome to hanks.xyz</p>
<h1>h1 标题</h1>
<h2>h2 标题</h2>

使用缩进代表标签嵌套关系

jade:

1
2
3
4
5
6
div.title
  h1 title2
  p  something
div
  div
    div.info(name="hanks")

html:

1
2
3
4
5
6
7
8
9
<div class="title">
  <h1>title2</h1>
  <p> something</p>
</div>
<div>
  <div>
    <div name="hanks" class="info"></div>
  </div>
</div>

class 和 id

jade:

1
2
3
4
h1.title
h2#title
#t_id
#t_id.title

html:

1
2
3
4
<h1 class="title"></h1>
<h2 id="title"></h2>
<div id="t_id"></div>
<div id="t_id" class="title"></div>

### 属性

jade:

1
2
a(herf="https://hanks.xyz") hanks.xyz
input#username(name="username",type="text",vaule="jade")

html:

1
2
<a herf="https://hanks.xyz">hanks.xyz</a>
<input id="username" name="username" type="text" vaule="jade">

Plain Text

jade:

1
2
3
4
p.
  1.aa
  2.vv
  3.cc

html:

1
2
3
4
5
<p>
  1.aa
  2.vv
  3.cc
</p>

注意 p 标签后面紧跟着一个 .

jade:

1
2
3
4
5
6
7
8
9
p.
  1.aa<strong>AA</strong>
  2.vv
  3.cc
p
  | 1.aa
  strong AA
  | 2.vv
  | 3.cc

html:

1
2
3
4
5
6
7
8
<p>
  1.aa<strong>AA</strong>
  2.vv
  3.cc
</p>
<p>1.aa<strong>AA</strong>2.vv
  3.cc
</p>

注释

jade:

1
2
3
4
5
6
div
  // h1 单行注释，输出到源文件
  //- h3 非缓冲注释
  //
    这是一个
    多行注释

html:

1
2
3
4
5
6
7
<div>
  <!-- h1 单行注释，输出到源文件-->
  <!--
  这是一个
  多行注释
  -->
</div>

jade 使用双斜线 //进行单行注释；
如果不想让注释的内容显示到生成的 html 代码中，可以在双斜线 // 后跟一个单横线-；
双斜线 // 后面的注释内容换行并缩进可进行块级注释

参考文章：
Jade中文教程
慕课网视频-带你学习Jade模板引擎

文章来自： https://hanks.pub