Jade（Pug） 模板引擎使用文档

其他 2018-06-23 00:38:45 阅读次数: 2

本篇内容

  • 在 Express 中调用 jade 模板引擎
  • jade 变量调用
  • if 判断
  • 循环
  • Case 选择
  • 在模板中调用其他语言
  • 可重用的 jade 块 (Mixins)
  • 模板包含 (Includes)
  • 模板引用 (Extends)

在 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    //<p>hello jade</p>

如果文本比较长可以使用

p
  | foo bar baz
  | rawr rawr
  
//或

p.
  foo bar baz
  rawr rawr
  
//结果为
<p>foo bar baz rawr rawr</p>

标签和属性

传统的HTML标签写尖括号很麻烦，Jade里可以省略尖括号，直接写标签名。标签间的嵌套关系用换行加空格来实现。紧接在标签名后加上.xx或#xx，就能给标签添加css类名和id

doctype html
html
  head
  body
    h1.titleClass#titleID My First Jade Page

//编译出来的结果
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1 id="titleID" class="titleClass">My First Jade Page</h1>
  </body>
</html>

标签属性的正统写法应该是写入()括号内，多个属性用逗号隔开（css类名和id也可以写入()括号内）

a(href='http://www.adoctors.cn, target='_blank') 我的主页

//编译出来的结果
<a href="http://www.adoctors.cn" target="_blank">我的主页</a>

HTML里最常用的标签就是div了，所以Jade提供了第二种简化写法，如果不写标签名默认就是div：

.divClass#divID 我是一个div

//编译出来的结果
<div id="divID" class="divClass">我是一个div</div>

这里注意一下 =默认会转义内容

p= 'Welcome to wandoujia fe, we want <b>you</b>'
//转换为
<p>Welcome to wandoujia fe, we want &lt;b&gt;you&lt;/b&gt;</p>

如果不想被转义的，在=前面添加!

p!= 'Welcome to wandoujia fe, we want <b>you</b>'
//转换为
<p>Welcome to wandoujia fe, we want <b>you</b></p>

jade 变量调用

  • {表达式}

  • =表达式
  • !=表达式

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

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

//或

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

会被渲染成为

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

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

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

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

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

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

变量中的特殊字符会被转义，如：

- var name = '<script></script>' 
| #{name}

//结果
&lt;script&gt;&lt;/script&gt;

如要得到不转义的，用!替换#来调用

- var name = '<script></script>' 
| !{name}

//结果
<script></script>

|其实就是管道，一般也可以定义一段文本

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：（方式1的简写）

- var user = { description: '我喜欢猫' }
#user
  if user.description
    h2 描述
    p.description= user.description
  else
    h1 描述
    p.description 用户无描述
    
    
    
//方式3：
使用 Unless 类似于 if 后的表达式加上了 ! 取反

//unless 是 jade 提供的关键字

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

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

循环

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

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


//或

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

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

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

在模板中调用其他语言

: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

head
  title 我的网站
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

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)

通过 Extends 可以引用外部的 jade 块，感觉比 include 要好用

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中使用js

script
  | window.onload =function(){
  |    var box =123;
  | };
 解析后为：
 <script>
    window.onload =function(){
        var box =123;
    }
</script>
更方便的方法：
script.      //加一个点号，所有的下一级内容都是原样输出
   window.onload =function(){
      var box =123;
   };
另一种方法：通过引入方式来
include a.js  //引入a.js文件,格式为字符串，引用路径不加‘’

注意不要空格和tab混用

中文文档：https://pug.bootcss.com/api/getting-started.html

猜你喜欢

转载自www.cnblogs.com/adoctors/p/9216008.html
pug
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022