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

由 匿名 (未验证) 提交于 2019-12-03 00:32:02
  • 在 Express 中调用 jade 模板引擎
  • jade 变量调用
  • if 判断
  • 循环
  • Case 选择
  • 在模板中调用其他语言
  • 可重用的 jade 块 (Mixins)
  • 模板包含 (Includes)
  • 模板引用 (Extends)
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 中属于服务端执行的代码

- 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>

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

//方式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> 
//- 申明可重用的块 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 在模板中包含其他模板的内容。就像 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 可以引用外部的 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>
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

原文：https://www.cnblogs.com/adoctors/p/9216008.html

标签
jade
html代码
html语言
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!