当前位置:Gxlcms > html代码 > 学习Jade_html/css_WEB-ITnose

学习Jade_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:27人阅读

优秀的模板引擎 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.htmlhanks.xyz

welcome to hanks.xyz

%

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

$ jade -P index.jade

html:

      hanks.xyz        

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

人气教程排行