学习 Jade_html/css_WEB-ITnose

优秀的模板引擎 Jade ，超强可读性，提升开发效率。

为什么需要 Jade ？

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

这一层一层的。。。

看 jade 的这个拼接。

Jade 优点：

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

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

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

安装 Jade

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

开始使用

创建 index.jade 文件

index.jade

doctype htmlhtml  head    title hanks.xyz  body    p welcome to hanks.xyz

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

$ jade index.jade  rendered index.html$ cat index.html
welcome to hanks.xyz
%

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

$ jade -P index.jade

html:

  
welcome to hanks.xyz
  

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

$ jade -P -w index.jade

基本语法

标签

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

jade:

p welcome to hanks.xyzh1 h1 标题h2 h2 标题

html:

welcome to hanks.xyz
h1 标题
h2 标题

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

jade:

div.title  h1 title2  p  somethingdiv  div    div.info(name="hanks")

html:

  
title2
  
 something
  
      

class 和 id

jade:

h1.titleh2#title#t_id#t_id.title

html:

### 属性

jade:

a(herf="http://hanks.xyz") hanks.xyzinput#username(name="username",type="text",vaule="jade")

html:

hanks.xyz

Plain Text

jade:

p.  1.aa  2.vv  3.cc

html:

  1.aa  2.vv  3.cc

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

jade:

p.  1.aaAA  2.vv  3.ccp  | 1.aa strong AA | 2.vv | 3.cc

html:

  1.aaAA  2.vv  3.cc
1.aaAA2.vv  3.cc

注释

jade:

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

html:

jade 使用双斜线 // 进行单行注释；

如果不想让注释的内容显示到生成的 html 代码中，可以在双斜线 // 后跟一个单横线 - ；

双斜线 // 后面的注释内容换行并缩进可进行块级注释

参考文章：

Jade中文教程

慕课网视频-带你学习Jade模板引擎

文章来自：http://hanks.xyz