学习 Jade_html/css_WEB-ITnose-tutoriel HTML-php.cn

学习 Jade_html/css_WEB-ITnose

WBOY

Libérer： 2016-06-21 08:52:41

original

1724 Les gens l'ont consulté

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

为什么需要 Jade ？

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

这一层一层的。。。

看 jade 的这个拼接。

Jade 优点：

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

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

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

安装 Jade

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

Copier après la connexion

开始使用

创建 index.jade 文件

index.jade

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

Copier après la connexion

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

$ jade index.jade  rendered index.html$ cat index.html<!DOCTYPE html><html><head><title>hanks.xyz</title></head><body><p>welcome to hanks.xyz</p></body></html>%

Copier après la connexion

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

$ jade -P index.jade

Copier après la connexion

html:

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

Copier après la connexion

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

$ jade -P -w index.jade

Copier après la connexion

基本语法

class 和 id

jade:

h1.titleh2#title#t_id#t_id.title

Copier après la connexion

html:

<h1 class="title"></h1><h2 id="title"></h2><div id="t_id"></div><div id="t_id" class="title"></div>

Copier après la connexion

### 属性

jade:

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

Copier après la connexion

html:

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

Copier après la connexion

Plain Text

jade:

p.  1.aa  2.vv  3.cc

Copier après la connexion

html:

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

Copier après la connexion

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

jade:

p.  1.aa<strong>AA</strong>  2.vv  3.ccp  | 1.aa strong AA | 2.vv | 3.cc

Copier après la connexion

html:

<p>  1.aa<strong>AA</strong>  2.vv  3.cc</p><p>1.aa<strong>AA</strong>2.vv  3.cc</p>

Copier après la connexion

注释

jade:

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

Copier après la connexion

html:

<div>  <!-- h1 单行注释，输出到源文件-->  <!-- 这是一个 多行注释 --></div>

Copier après la connexion

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

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

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

参考文章：

Jade中文教程

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

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