Jade 模板引擎使用

头像
Aomine
    阅读 6 分钟
    4

    貌似jade很火，转来看看

    在 Express 中调用 jade 模板引擎

    var express = require('express');
var http = require('http');
var app = express();
app.set('view engine', 'jade'); // 设置模板引擎
app.set('views', __dirname);  // 设置模板相对路径(相对当前目录)

app.get('/', function(req, res) {
    res.render('test'); // 调用当前路径下的 test.jade 模板
})

var server = http.createServer(app);
server.listen(3002);
console.log('server started on http://127.0.0.1:3002/');

    test.jade

    p hello jade

    其上的 jade 模板会被解析成

    <p>hello jade</p>

    虽然平常我们修改 node.js 代码之后需要重启来查看变化，但是 jade 引擎不在此列，因为是动态加载的，所以我们修改完 jade 文件之后可以直接刷新网页来查看效果的。

    如果文本比较长可以使用

    p
  | foo bar baz
  | rawr rawr

    或者

    p.
  foo bar baz
  rawr rawr

    两种情况都可以处理为

    <p>foo bar baz rawr rawr</p>

    jade 变量调用

    jade 的变量调用有 3 种方式

    1. #{表达式}
    2. =表达式
    3. !=表达式

    注意：- 开头在 jade 种属于服务端执行的代码

    - console.log('hello'); // 这段代码在服务端执行
- var s = 'hello world' // 在服务端空间中定义变量
p #{s}
p= s

    会被渲染成为

    <p>hello world</p>
<p>hello world</p>

    以下代码效果相同

    - var s = 'world'
p hello #{s}
p= 'hello' + s

    方式1可以自由的嵌入各个地方

    方式2返回的是表达式的值

    = 与 != 雷同，据说前者会编码字符串（如 <stdio.h> 变成 &lt;stdio.h&gt;），后者不会，不过博主没试出来不知道什么情况。

    除了直接在 jade 模板中定义变量，更常见的应用是在 express 中调用 res.render 方法的时候将变量一起传递进模板的空间中，例如这样：

    res.render(test, {
    s: 'hello world'
});

    调用模板的时候，在 jade 模板中也可以如上方那样直接调用 s 这个变量

    if 判断

    方式1

    - var user = { description: '我喜欢猫' }
- if (user.description)
    h2 描述
    p.description= user.description
- else
    h1 描述
    p.description 用户无描述

    结果：

    <div id="user">
  <h2>描述</h2>
  <p class="description">我喜欢猫</p>
</div>

    方式2

    上述的方式有种省略写法

    - var user = { description: '我喜欢猫' }
#user
  if user.description
    h2 描述
    p.description= user.description
  else
    h1 描述
    p.description 用户无描述

    方式3

    使用 Unless 类似于 if 后的表达式加上了 ! 取反

    - var user = { name: 'Alan', isVip: false }
unless user.isVip
  p 亲爱的 #{user.name} 您并不是 VIP

    结果

    <p>亲爱的 Alan 您并不是 VIP</p>

    注意这个 unless 是 jade 提供的关键字，不是运行的 js 代码

    循环

    for 循环

    - var array = [1,2,3]
ul
  - for (var i = 0; i < array.length; ++i) {
    li hello #{array[i]}
  - }

    结果

    <ul>
    <li>hello 1</li>
    <li>hello 2</li>
    <li>hello 3</li>
</ul>

    each

    同样的 jade 对于循环液提供了省略 “-” 减号的写法

    ul
  each val, index in ['西瓜', '苹果', '梨子']
    li= index + ': ' + val

    结果

    <ul>
  <li>0: 西瓜</li>
  <li>1: 苹果</li>
  <li>2: 梨子</li>
</ul>

    该方法同样适用于 json 数据

    ul
  each val, index in {1:'苹果',2:'梨子',3:'乔布斯'}
    li= index + ': ' + val

    结果：

    <ul>
  <li>1: 苹果</li>
  <li>2: 梨子</li>
  <li>3: 乔布斯</li>
</ul>

    Case

    类似 switch 里面的结果，不过这里的 case 不支持case 穿透，如果 case 穿透的话会报错。

    - var friends = 10
case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

    结果：

    <p>you have 10 friends</p>

    简略写法：

    - var friends = 1
case friends
  when 0: p you have no friends
  when 1: p you have a friend
  default: p you have #{friends} friends

    结果：

    <p>you have a friend</p>

    在模板中调用其他语言

    markdown
  # Markdown 标题
  这里使用的是 MarkDown 格式
script
  :coffee
    console.log '这里是 coffee script'

    结果：

    <h1>Markdown 标题</h1>
<p>这里使用的是 MarkDown 格式</p>
<script>console.log('这里是 coffee script')</script>

    可重用的 jade 块 (Mixins)

    //- 申明可重用的块
mixin list
  ul
    li foo
    li bar
    li baz

//- 调用
+list()
+list()

    结果：

    <ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

    你也可以给这个重用块制定参数

    mixin pets(pets)
  ul.pets
    - each pet in pets
      li= pet

+pets(['cat', 'dog', 'pig'])

    结果：

    <ul class="pets">
  <li>cat</li>
  <li>dog</li>
  <li>pig</li>
</ul>

    Mixins 同时也支持在外部传入 jade 块

    mixin article(title)
  .article
    .article-wrapper
      h1= title
      //- block 为 jade 关键字代表外部传入的块
      if block
        block
      else
        p 该文章没有内容

+article('Hello world')

+article('Hello Jade')
  p 这里是外部传入的块
  p 再写两句

    结果：

    <div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
    <p>该文章没有内容</p>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello Jade</h1>
    <p>这里是外部传入的块</p>
    <p>再写两句</p>
  </div>
</div>

    Mixins 同时也可以从外部获取属性。

    mixin link(href, name)
  a(class!=attributes.class, href=href)= name

+link('/foo', 'foo')(class="btn")

    结果：

    <a href="/foo" class="btn">foo</a>

    模板包含 (Includes)

    你可以使用 Includes 在模板中包含其他模板的内容。就像 PHP 里的 include 一样。

    index.jade

    doctype html
html
  include includes/head
body
  h1 我的网站
  p 欢迎来到我的网站。
  include includes/foot

    includes/head.jade

    doctype html
html
  include includes/head
body
  h1 我的网站
  p 欢迎来到我的网站。
  include includes/foot

    includes/foot.jade

    #footer
  p Copyright (c) foobar

    调用 index.jade 的结果：

    <!doctype html>
<html>
  <head>
    <title>我的网站</title>
    <script src='/javascripts/jquery.js'></script>
    <script src='/javascripts/app.js'></script>
  </head>
  <body>
    <h1>我的网站</h1>
    <p>欢迎来到我的网站。</p>
    <div id="footer">
      <p>Copyright (c) foobar</p>
    </div>
  </body>
</html>

    模板引用 (Extends)

    就绝

    layout.jade

    doctype html
html
  head
    title 我的网站
    meta(http-equiv="Content-Type",content="text/html; charset=utf-8")
    link(type="text/css",rel="stylesheet",href="/css/style.css")
    script(src="/js/lib/jquery-1.8.0.min.js",type="text/javascript")
  body
    block content

    article.jade

    //- extends 拓展调用 layout.jade
extends ../layout
block content
  h1 文章列表
  p 习近平忆贾大山 李克强:将启动新核电项目
  p 朴槿惠:"岁月号"船长等人弃船行为等同于杀人
  p 普京疑换肤：眼袋黑眼圈全无 领导人整容疑云
  p 世界最大兔子重45斤长逾1米 1年吃2万元食物

    res.render('article') 的结果：

    <html>
  <head>
    <title>我的网站</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <link type="text/css" rel="stylesheet" href="/css/style.css"></head>
    <script src="/js/lib/jquery-1.8.0.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>文章列表</h1>
    <p>习近平忆贾大山 李克强:将启动新核电项目</p>
    <p>朴槿惠:"岁月号"船长等人弃船行为等同于杀人</p>
    <p>普京疑换肤：眼袋黑眼圈全无 领导人整容疑云</p>
    <p>世界最大兔子重45斤长逾1米 1年吃2万元食物</p>
  </body>
</html>

    原文

    jade模板引擎
    Aomine
    2.2k 声望102 粉丝

    喜欢web开发，初学阶段，希望未来能成为厉害的工程师~

    « 上一篇
    前端价值之所在
    下一篇 »
    原生JavaScript事件详解

    引用和评论

    推荐阅读
    头像
    [Docker 官方文档] 理解 Docker

    Aomine赞 6阅读 12.7k

    0 条评论
    得票最新