转载

Jade快速入门

Jade是Node的一个模板引擎，借鉴了Haml，语法上和Haml有很多类似之处，Jade的主要优势为HTML元素同事渲染闭合和开始标签，当然也会添加符号<>和< />。

标签

一行开头的任何文本都会被默认解释称HTML标签，标签后的文本和空格会被解析成内联的HTML，即元素的文本内容：

  1. body
  2. div
  3. h1 Hello node
  4. p jade语法
  5. div
  6. footer &copy;App

上述模板会被解析成：

  1. <body>
  2. <div>
  3. <h1>Hello node</h1>
  4. <p>jade 语法</p>
  5. </div>
  6. <div>
  7. <footer>&nbsp;App</footer>
  8. </div>
  9. </body>

变量/数据

传给Jade模板的数据称为 locals 。有输出一个变量，使用等号 = :

  1. h1= title
  2. p= body
  3. //传递的locals
  4. {
  5. title:'数据1',
  6. body: 'body变量'
  7. }

输出地HTML:

  1. <h1>数据1</h1>
  2. <p>body变量</p>

如果要在文本中读取变量的值，则通过 #{name} 语法实现：

  1. - var title = 'node.js'
  2. p I am studying #{title}.

在模板编译时变量的值会被处理，因此，不要在可执行的Javascript(-)使用。

属性

属性紧跟在标签的名字之后，用括号括起来，格式是 name=value ，多个属性用逗号分开：

  1. div(id='content', class='main')
  2. a(href='http://www.ido321.com', title='我的博客') 博客地址
  3. form(action='/login')
  4. button(type='submit')
  5. div(class='hero') Learn Node

输出地HTML为：

  1. <div id="content" class="main">
  2. <a href="http://www.ido321.com">博客地址</a>
  3. <form action="/login">
  4. <button type='submit'></button>
  5. </form>
  6. <div class="hero">Learn Node</div>
  7. </div>

属性值可以用 locals 中的变量代替，符号 | 允许在新的一行中写HTML中的内容，即 该符号之后的那行内容会变成文本内容 ：

  1. a(href=url, data-active=isActive)
  2. label
  3. input(type='checkbox',checked=isChecked)
  4. | yes/no
  6. //locals数据
  7. {
  8. url: '/login',
  9. isActive:true,
  10. isChecked:false
  11. }

输出地HTML为：

  1. <a href="/login" data-active='true'></a>
  2. <label>
  3. <input type='checkbox' />yes/no
  4. </label>

可以输出多行文本内容：

  1. div
  2. | 文本1
  3. | 文本2

字面量

在Jade中，如果没有写标签名，则默认是 div ，因而，可以直接在元素后写类和id来生成元素：

  1. div#center
  2. p.lead.test
  3. | web app
  4. #side.pull-right
  5. span.contact.span4
  6. a(href="/contact") contact me

输出地HTML为：

  1. <div id="center">
  2. <p class="lead test">
  3. web app
  4. <div id="side" class="pull-right"></div>
  5. <span class="contact span4">
  6. <a href="/contact">contact me</a>
  7. </span>
  8. </p>
  9. </div>

Script和Style块

使用 . ，可以直接在模板中输入Javascript和Style：

  1. script.
  2. console.log('hello');
  3. setTimeout(function(){
  4. console.log('script');
  5. },1000);

被编译后，输出内容为：

  1. <script>
  2. console.log('hello');
  3. setTimeout(function(){
  4. console.log('script');
  5. },1000);
  6. </script>

Javascript

上述是通过 script 标签嵌入js，如果要在模板编译时使用Javascript，可以使用符号 - 、 = 和 != ：

  1. - var arr=['<a>','<b>','<c>']
  2. ul
  3. - for(var i =0;i < arr.length' i++)
  4. li
  5. span= i
  6. span!= "unescaped: " + arr[i] + "vs. "
  7. span= "escaped: " + arr[i]

输出地HTML内容：

  1. <ul>
  2. <li>
  3. <span>0</span><span>unescaped:<a>vs.</span><span>escaped:&lt;a&gt
  4. </li>
  5. <li>
  6. <span>1</span><span>unescaped:<b>vs.</span><span>escaped:&lt;b&gt
  7. </li>
  8. <li>
  9. <span>2</span><span>unescaped:<c>vs.</span><span>escaped:&lt;c&gt
  10. </li>
  11. </ul>

还可以加入注释。如果要输出注释，则使用 // ，如果不输出注释，则使用 //- :

  1. // 输出注释
  2. p 上面是注释
  3. //- 不输出注释
  4. div 上面注释没有输出

对应输出地HTML内容是:

  1. <!-- 输出注释-->
  2. <p>上面是注释</p>
  3. <div>上面注释没有输出</div>

if和unless

通过符号 - 能在模板中嵌入js，还有一种不需要前缀 - 和括号的简洁写法：

  1. - var user = {}
  2. - user.admin = Math.random() > 0.5
  3. if user.admin
  4. button(class = "test") 这是按钮
  5. else
  6. | 文本

unless 的判断则和 if 相反。

each

改语句用于迭代数组或对象，比 for 更简洁的语法：

  1. - var language = ['php', 'node', 'java'];
  2. div
  3. each value, index in language
  4. p= index + '. ' + value

输出地HTML为:

  1. <div>
  2. <p>0. php</p>
  3. <p>1. node</p>
  4. <p>2. java</p>
  5. </div>

case

有多个选择区分时，可以用 case 实现：

  1. - var coins = Math.round(Math.random() * 10)
  2. case coins
  3. when 0
  4. p You hava no money
  5. when 1
  6. p You have a coin
  7. default
  8. p You hava #{coins} coins

函数mixin

mixin 是带参数，并产生一些HTML的函数。声明的语法是 mixin name(param1, param2...) ，用法是 +name(data) ：

  1. mixin row(items)
  2. tr
  3. each item, index in items
  4. td= item
  5. mixin table(tableData)
  6. table
  7. each row, index in tableData
  8. +row(row)
  9. - var node = [{name: "express"}, {name: 'hapi'}, {name: "derby"}]
  10. +table(node)

输出地HTML为：

  1. <table>
  2. <tr>
  3. <td>express</td>
  4. </tr>
  5. <tr>
  6. <td>hapi</td>
  7. </tr>
  8. <tr>
  9. <td>derby</td>
  10. </tr>
  11. </table>

include

include 是自顶向下的方法，用于引入其他的Jade模板，实现模板的复用，语法： include /path/filename 。

比如，在A文件中：

  1. include ./includes/header

不用给模板名字和路径加上单引号和双引号，支持相对路径：

  1. //从父目录开始查找
  2. include ../xxx

extend

extend 是自底向上的方法，包含的文件决定它要替换主文件的哪一个部分，语法： extend filename 和 block filename 。

在文件A中:

  1. block header
  2. p default text
  3. block content
  4. p Loading....
  5. block footer
  6. p copyright

在文件B中：

  1. extend A
  2. block header
  3. p 这是文件B
  4. block content
  5. .main-content
正文到此结束
所属分类： 编程技术

热门推荐

相关文章

阿里云首购8折
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Java设计模式 Jenkins进阶系列 openfire参考指南 HBase教程 Maven教程 hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 Ant教程 java实例教程 SpringCloud Elastic-Job-Lite XStream教程 深入浅出MyBatis Hazelcast教程 ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 springcloud-demo JPA教程 ActiveMQ中文指南 Java内存模型 java-demo dubbo教程 Linux入门视频教程
近期评论
  1. 1 Spring Cloud Circuit Breaker快速入门Demo
  2. 2 Spring Cloud Bus快速入门Demo
  3. 3 Spring Cloud Config快速入门Demo
  4. 4 Spring Cloud Function快速入门Demo
  5. 5 SSPanel-Uim搭建教程 2023年全新定制版主题-解决老版本命令失效问题
  6. 6 Spring Boot集成Milvus和deeplearning4j实现图搜图功能
  7. 7 Spring Boot集成Aviator实现参数校验
  8. 8 ACME自动申请免费的通配符https域名证书
  9. 9 wordpress 数据库和文件优化
  10. 10 CentOS安装Docker与Docker-Compose
网站信息
  • 文章总数：82,696 篇
  • 文件总数：284,257 个
  • 标签总数：2,380 个
  • 分类总数：84 个
  • 留言数量：2,560 条
  • 在线人数：650 人
  • 运行天数：4,392天
  • 最后更新：2024年11月05日22点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG