什么是jade？

jade是一个模板引擎，是变体的HTML。

模板引擎就是一个库，用来解释素具渲染视图的框架，也可以叫做HTML的预处理语言。

jade是Node.js的一个模板引擎，他的语法借鉴了Haml（一个叫做Ham的人写的html的简写语言）

有2个很好的学习资源：

naltatis：http://naltatis.github.io/jade-syntax-docs/

官方文档：http://jade-lang.com/

naltatis，一个在线编辑jade模板的工具，只需在左边写jade，右边就会自动解析成HTML，强烈推荐

很方便！！！

Jade 中省略了大量的尖括号，给我的感觉就是简洁和高效。这里不会讨论各种模板引擎的优劣，技术和工具的好坏向来都是不死不休的伪命题，还是花更多的时间来创造有价值的东西更有意思。

test.jade

p hello jade

　　其上的 jade 模板会被解析成对应的html

<p>hello jade</p>

　　

Jade的特点是语法简洁、简单易学、支持嵌入代码、支持多重继承。通过本文的学习，你将能快速掌握Jade的基本用法及一些小技巧。

相对于HTML，Jade中的元素（Element）标记（Tag）没有用“<>”包围，其属性（Attribute）是用“()”括起来的。

另外，你可能已经注意到了，Jade的元素没有相对应的“开始标记”和“结束标记”。Jade是用“缩进”来描述元素的从属关系（与Python的语法相似）。

若你使用过HBuilder，你会发现jade的语法非常的亲切，因为他使用#代替id，使用.代替类型，和HBuilder的快速生成html标签的操作一样，很方便啊！

DOCTYPE

HTML本质上是XML，在HTML文件的起始位置需定义doctype。

doctype html  --> <!DOCTYPE html>

标签

jade的主要优势是为HTML元素同时渲染闭合和开始标签，自动添加<>和</>，节省了大量键盘输入，标签空格后的文本会被解析成内联的HTML

Jade是用“缩进”来描述元素的从属关系（与Python的语法相似）。

基本用法

demo1.jade

doctype html

html

  head

    title my jade template

  body

    h1 Hello #{name}

    h2 hello demo1

locals

{"name": "Bob"}

上面的模板会输出

<!DOCTYPE html>

<html>

  <head>

    <title>my jade template</title>

  </head>

  <body>

    <h1>Hello Bob</h1>

    <h2>hello demo1</h2>

  </body>

</html>

　　

还有，#代表id，.（点号）代表类，这些语法用过HBuild而的人，会感觉到亲切，简洁

#content

  .block

    input#bar.foo1.foo2

输出

<div id="content">

  <div class="block">

    <input id="bar" class="foo1 foo2"/>

  </div>

</div>

　　

变量

传给jade模板的数据成为locals，输出变量使用#{变量名}，或者=等号

demo2.jade

h1=title

p=body

locals

{"title": "jade is very good.","body":"this is a test demo2"}

输出

<h1>jade is very good.</h1>

<p>this is a test demo2</p>

　　

属性

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

文本

通过符号 | 可以输出原始文本

if语句

如何在jade模板上加业务逻辑

if res.length==10

    h1= title+"标题"

else

    h1=res.join(',')

除了if之外，还有unless，他表示不或者！

case语句

each和for语句

JavaScript

如何写前端js代码

script(type='text/javascript').

  $(document).ready(function () {

    alert('前端代码');

  })

引用前端的js文件

script(src='/javascripts/jquery-1.10.2.js')

CSS

如何写前端css代码

style.

      html,body{

        background-color: #00B7FF;

        margin:0;

        padding:0;

        border:0;

      }

　　引入css样式文件和样式

 link(rel='stylesheet', href='/stylesheets/style.css')

注释

单行注释和 JavaScript 里是一样的，通过 // 来开始，并且必须单独一行：

// just some paragraphs

p foo

p bar

渲染为：

<!-- just some paragraphs -->

<p>foo</p>

<p>bar</p>

函数mixin

可重用的 jade 块 (Mixins)

模板包含 (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 世界最大兔子重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>世界最大兔子重45斤长逾1米 1年吃2万元食物</p>

  </body>

</html>

Jade支持继承，即一个Jade模板继承自另一个Jade模板：

在上例中，layout.jade 文件是父模板，index.jade 是子模板，它继承自 layout.jade。

在父模板中，用关键字“block”定义可在子模板中替换的块，每个“block”有一个名字，在子模板中，同样用关键字“block”跟上该名字定义需在该“block”中填充的内容。

Jade支持多重继承，即子模板也可以是其它模板的父模板。

　　

在模板中调用其他语言

:markdown

  # Markdown 标题

  这里使用的是 MarkDown 格式

script

  :coffee

    console.log '这里是 coffee script'

　　

结果：

<h1>Markdown 标题</h1>

<p>这里使用的是 MarkDown 格式</p>

<script>console.log('这里是 coffee script')</script>

　　



未完待续！！！


参考文章：


jade中文社区：http://www.nooong.com/docs/jade_chinese.htm


CNode技术社区：https://cnodejs.org/topic/5368adc5cf738dd6090060f2


naltatis：http://naltatis.github.io/jade-syntax-docs/
												


											
Jade——变体的HTML的更多相关文章
	

    
								
  1. 自然语言19.1_Lemmatizing with NLTK（单词变体还原）
		
    QQ:231469242 欢迎喜欢nltk朋友交流 https://www.pythonprogramming.net/lemmatizing-nltk-tutorial/?completed=/na ...
    
		
    2. 
						
  2. 【Visual Lisp】变体与安全数组
		
    (vlax-make-variant) ;;创建一个未初始化的变体 ;;01.整型值变体(setq myvar (vlax-make-variant 10)) ;;创建整型值变体,返回 #<va ...
    
		
    3. 
						
  3. labview 变体数据类型
		
    变体数据类型是LabVIEW中多种数据类型的容器.将其它数据转换为变体时,变体将存储数据和数据的原始类型,保证日后可将变体数据反向转换. 例如,如将字符串数据转换为变体,变体将存储字符串的文本,以及说 ...
    
		
    4. 
						
  4. Bootstrap 标签的变体 实例样式
		
    Bootstrap 标签样式,代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签的 ...
    
		
    5. 
						
  5. Odoo / PS Cloud12版本中，产品变体功能如何使用
		
    场景: 产品:陶瓷马克杯 产品颜色变体:红色.蓝色.白色 产品尺寸变体:10CM.12CM.15CM 每个变体都有不同价格维度 odoo / PS Cloud 专业实施开发 EMAIL:1715860 ...
    
		
    6. 
						
  6. 二叉查找树及B-树、B+树、B*树变体
		
    动态查找树主要有二叉查找树(Binary Search Tree),平衡二叉查找树(Balanced Binary Search Tree), 红黑树 (Red-Black Tree ), 都是典型的 ...
    
		
    7. 
						
  7. (转) 干货 | 图解LSTM神经网络架构及其11种变体（附论文）
		
    干货 | 图解LSTM神经网络架构及其11种变体(附论文) 2016-10-02 机器之心 选自FastML 作者:Zygmunt Z. 机器之心编译  参与:老红.李亚洲 就像雨季后非洲大草原许多野 ...
    
		
    8. 
						
  8. 完全图解RNN、RNN变体、Seq2Seq、Attention机制
		
    完全图解RNN.RNN变体.Seq2Seq.Attention机制 本文主要是利用图片的形式,详细地介绍了经典的RNN.RNN几个重要变体,以及Seq2Seq模型.Attention机制.希望这篇文章 ...
    
		
    9. 
						
  9. Delphi 变体数组 Dataset Locate 查找定位
		
    Format 函数 Delphi 支持“开参数”和动态数组,变体数组,使用时的语法类似 Delphi 中的集合:采用两个方括号把不同类型的变量括起来(这太方便了啊),也可以采用声明一个 TVarRec ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. jQuery截取字符串、日期字符串转Date、获取html中的纯文本
			
    jQuery截取字符串.日期字符串转Date.获取html中的纯文本. var com = com || {}; (function ($, com) { /* * 截取字符串 * @param st ...
    
			
    2. 
						
  2. Nginx+IIS部署负载均衡的常见问题
			
    windows 下配置 Nginx 常见问题 一.  Nginx配置 找到 conf 目录里的 nginx.conf 文件,配置Nginx #user nobody; #指定nginx进程数 work ...
    
			
    3. 
						
  3. Oracle树结构查询按层级排序
			
    SQL代码: SELECT t.* FROM pt_org_info t START CONNECT BY t.par_id = PRIOR t.id ORDER SIBLINGS BY t.id;  ...
    
			
    4. 
						
  4. Hibernate一级缓存测试分析
			
    Hibernate 一级缓存测试分析 Hibernate的一级缓存就是指Session缓存,此Session非http的session会话技术,可以理解为JDBC的Connection,连接会话,Se ...
    
			
    5. 
						
  5. NET项目发布到IIS上报错：HTTP 错误 403.14
			
    NET项目发布到IIS上报错:HTTP 错误 404.0 - Not Found 原因:由于本机开发环境是Net4.5,所以虽然创建项目时选择的是net framework4.5的,但是webconf ...
    
			
    6. 
						
  6. django系列5.4--ORM中执行原生SQL语句, Python脚本中调用django环境
			
    ORM执行原生sql语句 在模型查询API不够用的情况下,我们还可以使用原始的SQL语句进行查询. Django 提供两种方法使用原始SQL进行查询:一种是使用raw()方法,进行原始SQL查询并返回 ...
    
			
    7. 
						
  7. Webstorm 的 Tab 键怎样调整缩进值？ 调节成缩进成2个空格或者4个空格
			
    原文:https://blog.csdn.net/niexia_/article/details/78280569 需求:因为用了eslint,对代码格式很严格.统一用空格.而用tab方式会省事很多. ...
    
			
    8. 
						
  8. class字节码结构（一）（字节码结构和字节常量池的结构）
			
    <Java虚拟机原理图解> 1.1.class文件基本组织结构 关于变量的几个叫法: 局部变量/全局变量:很好区分根据所在位置. 类变量:静态的全局变量. 类常量:全局的final修饰的变 ...
    
			
    9. 
						
  9. Android中获取正在运行的服务-------ActivityManager.RunningServiceInfo的使用
			
    关于PackageManager和ActivityManager的使用 ,自己也写了一些DEMO 了,基本上写的线路参考了Settings模块下的 应用程序,大家如果真正的有所兴趣,建议大家看看源码, ...
    
			
    10. 
						
  10. 《JAVA与模式》之建造模式
			
    在阎宏博士的<JAVA与模式>一书中开头是这样描述建造(Builder)模式的: 建造模式是对象的创建模式.建造模式可以将一个产品的内部表象(internal representation ...
    
			
    11.