Jade学习笔记1

发表于   |   分类于   |  

什么是Jade

Jade是一种网页模板渲染的引擎，通过一些简单的方式就可以自动渲染成为html的样式，不必每次都去写一堆尖括号标签。
我感觉和markdown有点类似呢……虽然两个东西区别蛮大的，markdown类似于一种标记语言，书写文字的时候可以直接通过一些符号来实现相应的格式，而不是通过鼠标去工具栏那边点啊点，而且排版还很漂亮，实时预览。Jade也是使用一些标签，然后Jade引擎会自动翻译成html的语言。

Jade使用一些标签来标记如何生成HTML，Jade模板文件看起来很不像HTML文件，但它的模板文件小而整洁。Jade是一款高性能简洁易懂的模板引擎，Jade是Haml的Javascript实现，在服务端（NodeJS）及客户端均有支持。

1
2
3
4
5
//Jade
div#container
//after Jade render
<div id="container></div>

Jade的安装

首先要安装nodejs和npm

  • nodejs
  • 装nodejs的时候会自动给安装好npm
    npm：nodejs package manager，js的包管理器，上面很多很多现成的包，需要的时候只要一条命令就可以去下载下来使用，也可以往上面上传。

通过npm安装Jade

$ npm install -g Jade
输入Jade version，若显示版本则代表安装成功

使用Jade

  1. 随便写一个demo.Jade 

    1
    2
    3
    4
    5
    6
    doctype html
    html
        head
            title hello Jade
        body
        h2 hello Jade!

  2. cd到目录下，编译运行
    Jade demo.Jade
    显示编译完成，回到目录下，会发现多了个demo.html文件，查看源代码

    1
    2
    3
    4
    5
    6
    7
    8
    <!DOCTYPE html>
    <html>
      <head>
        <title>hello Jade</title>
      </head>
      <body></body>
      <h2>hello Jade!</h2>
    </html>

  3. 上面这种方式，每次修改都要重新编译，太麻烦。使用
    Jade -P -w demo.Jade
    会自动给每一次的修改编译，修改完只需要保存一下，然后就可以去页面上预览

参考