转载

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教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 java-demo Maven教程 springcloud-demo hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 SpringCloud Ant教程 java实例教程 Hazelcast教程 XStream教程 Elastic-Job-Lite 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 使用 Docker 打包和运行 Vue 应用
  2. 2 Dependency Check命令行方式扫描jar包的安全漏洞
  3. 3 maven使用Dependency-Check来扫描安全漏洞
  4. 4 使用sonarqube分析代码质量
  5. 5 使用screw来对比数据库表和字段差异
  6. 6 Spring Boot 实现防盗链功能
  7. 7 在Spring Boot中的实现国际化（i18n）
  8. 8 一个用于 SMB/CIFS 网络的 Java 库-JCIFS
  9. 9 Spring Boot 3.x嵌入MongoDB 进行测试
  10. 10 java如何解析和生成yaml文件？
网站信息
  • 文章总数：82,737 篇
  • 文件总数：284,312 个
  • 标签总数：2,416 个
  • 分类总数：85 个
  • 留言数量：2,559 条
  • 在线人数：622 人
  • 运行天数：4,440天
  • 最后更新：2024年12月23日01点
Loading...

其他链接

关于本站

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

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

问题交流

[HBLOG]公众号 HBLOG HBLOG