第三章 Jade进阶

3-1Jade-模板的继承

我们在开发过程中经常会遇到重复的代码块或者文本，比如
重复代码块（extends）：公共的头部，底部；
重复的文本（block）:相同的一段文本内容

//layout.jade
doctype html
head
    title common file
body
    block content //这个地方是引入代码块
</html>

//index.jade
extends layout //将公共文件引入进来
block content //公共文件下面的代码块
    h3 这篇文章讲述的是jade的继承（extends block）
    ul
        block descLi
            li hello everyone
        li hello world
        li hello sunnyFan
        block descLi
        block descLi

编译后的html：

<!DOCTYPE html>
<head>
  <title>common file</title>
</head>
<body>
  <h3>这篇文章讲述的是jade的继承（extends block）</h3>
  <ul>
    <li>hello everyone</li>
    <li>hello world</li>
    <li>hello sunnyFan</li>
    <li>hello everyone</li>
    <li>hello everyone</li>
  </ul>
</body></html>

3-2 Jade-模板的包含

包含（include）:可以将html、style、head部分、script等等当成一个整个文件引入到页面中

//head.jade
meta(charset="utf-8")
title common file

//layout.jade
doctype html
head
   include head //这个地方引入head.jade
body
    block content
</html>

//style.jade
style.
    h3 {
        color: red
    }
//index-content.html
<div>
    this paragraph from index-content.html
</div>


//index.jade
extends layout    
block content
    include style //这个地方引入style样式
    h3 这篇文章讲述的是jade的继承（extends block）
    include index-content.html //这个地方引入html代码块
    ul
        block descLi
            li hello everyone
        li hello world
        li hello sunnyFan
        block descLi
        block descLi

编译后的结果是：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>common file</title>
</head>
<body>
  <style>
    h3 {
        color: red
    }
  </style>
  <h3>这篇文章讲述的是jade的继承（extends block）</h3><div>
    this paragraph from index-content.html
</div>
  <ul>
    <li>hello everyone</li>
    <li>hello world</li>
    <li>hello sunnyFan</li>
    <li>hello everyone</li>
    <li>hello everyone</li>
  </ul>
</body></html>

效果图

3-3render及renderFile方法

Jade Api

1.初始化一个package.json文件

npm init

2.安装jade相关api依赖包 jade(pug)

npm install jade  --save

因为我npm版本可能比较高，还有就是pug是jade的升级版，所以在安装的过程提示我建议我安装
pug

npm install pug --save

3.jade(pug) api的一些相关操作

var http = require('http')
var pug = require('pug')//jade or pug

http.createServer(function (req, res) {
  res.writeHead(200, {
    'Content-Type': 'text/html'
  })

  //1.pug.compile
  // var fn = pug.compile('div #{course}',{})
  // var html = fn({course:'pug'})

  //2.pug.render
  // var html = pug.render('div #{course}',{course:'pug render'}) 

  //3.pug.renderFile
  var html = pug.renderFile('index.jade', { course: 'pug renderFile', pretty: true })

  res.end(html)

}).listen(3030, '127.0.0.1')
console.log('server running at 127.0.0.1:3030')

3-4filters

1.安装依赖

npm install coffeescript less markdown --save

3-1Jade-模板的继承

3-2 Jade-模板的包含

3-3render及renderFile方法

3-4filters

猜你喜欢