Jade语法文档翻译（zh-cn）及长期使用的总结

前言

Jade模板引擎中文文档在线阅读；及一些技巧的分享

英文文档

我是直接fork

Jade Syntax Documentation

个人翻译的版本：

Jade 中文文档 — 在线阅读

jade

doctype html
html(lang="zh-cn")
head
//- meta声明
block head-meta
meta(charset='utf-8')
link(rel="Shortcut Icon" href="/favicon.ico")
meta(name="renderer" content="webkit")
meta(name="force-rendering" content="webkit")
meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")
meta(name="viewport", content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0")
//- 标题声明
block head-area-title
title #{title}
//- 头部script执行
block head-area-script
//- 引入CSS区域
block head-area-baisc-css
block head-area-extra-css
body
//- 顶部区域
block body-area-header
include header.jade

//- 中间区域
block body-area-container
include container.jade
//- 尾部区域
block body-area-footer
include footer.jade
//- 引入脚本或者脚本写入区域
block body-area-basic-script
//- 引入requirejs
script(src='/js/lib/require.min.js', type='text/javascript' ,charset="utf-8")
script(src='/js/require_config.js', type='text/javascript' ,charset="utf-8")
script(src='/js/seller/basic.js', type='text/javascript' ,charset="utf-8")
if ENV_DEVELOPMENT
script(src="http://localhost:35729/livereload.js")
block body-area-extra-script

//- 传说中的分割线~~~~~~~~~~~~~~~~~~~~~~~~这里只是演示，所以写在一起，实际中各自分离再来继承的！！！
//- 继承的方式很简单，就这么一个关键字extends .. 一个页面内最多只能继承一个模板！！！！

//- Demo1 ,摘自部分项目中的 ------------------------------------------------------------------------
extends ../index_layout/layout.jade

//- 复写头部样式，只要复写了就会清除从模板继承的默认值
block head-area-baisc-css
link(rel='stylesheet', charset='utf-8', href='/css/lib/tick/flipclock.css')
link(rel='stylesheet', charset='utf-8', href='/css/seller/indexMall/index.css')

//- 覆盖额外JS区域
block body-area-extra-script
script(src='/js/seller/indexMall/index.js', charset='utf-8')

//- 顶部区域 ， include是动态引入一个文件，这样可以很方便的把控部分区域的DOM结构分离，让复用最大化；这里我也是尽可能的把一些区域的DOM抽离成一个jade来引入~~~
block body-area-header
include ../index_layout/site-nav.jade

//- 中间区域
block body-area-container
#container
section.slider
ul.main-slider
li.slide-item
a(href="javasacript:;")
img(src="/images/layout/demo/lunhuan1.jpg")
li.slide-item
a(href="javasacript:;")
img(src="/images/layout/demo/lunhuan2.jpg")
li.slide-item
a(href="javasacript:;")
img(src="/images/layout/demo/lunhuan3.jpg")

//- Demo2 --------------------------------------------------------------------------------

extends ../layout/layout.jade
//- 商品参数默认设置

//- ....省略.....
block body-area-contents
h3.tab-hightlight 参数设置
.goods-param-content-wrapper
form(id="", method="", action="")
h4 物流设置
each val , index in ship
.input-wrapper.shipping
if(val.shipping)
input.beautify-checkbox(type="checkbox",id="#{val.smid}" data-default='checked',checked)
else
input.beautify-checkbox(type="checkbox",id="#{val.smid}" data-default='')
label(for="#{val.smid}")
span(style="display:inline-block; width:70px;text-align:left") #{val.shipping}:
input(type="text" value='#{val.fare.value}',data-type='#{val.smid}' data-default='#{val.fare.value}')
| 元
if(index==0)
span.tips-color (不填写为默认运费)
else
span.tips-color (不填写为默认0元)
h4 售后保障信息
.input-wrapper
span 发票：
input(type="radio",class="beautify-radio",name="invoice",id="n-invoice" value='n' checked='checked')
label(for="n-invoice")
span 无
input(type="radio",class="beautify-radio",name="invoice",id="y-invoice" value='y')
label(for="y-invoice")
span 有 
span 需要消费者提供商品价格的
input(type="text",placeholder="0-100")
| %为税率。

input.memberdiscount(type="text",value="#{getGlobSettings.discount.value}",data-default="#{getGlobSettings.discount.value}")
| 折
span.font-small 如：会员价格为95折,输入95即可
.input-wrapper
if(getGlobSettings.reduce_inventory_strategy._value == 0)
span 库存计数：
input.beautify-radio(type="radio",name="inventory",id="c-inventory" checked="checked",value='0',data-default='1')
label(for="c-inventory")
span 拍下减库存
input.beautify-radio(type="radio",name="inventory",id="p-inventory",value='1',data-default='0')
label(for="p-inventory")
span 付款减库存
//- ....省略.....

.input-wrapper
| 分享推广提成：分享商品链接而成功成交的订单，分享人将获利商品价格的
input.commission(type="text",value="#{getGlobSettings.share_percent.value}",data-default="#{getGlobSettings.share_percent.value}")
|%
p.font-small 以上信息为商品参数的全局默认设置,提交成功后，将适用于将要发布的新商品，同时我连网支持对商品的参数进行单个及批量的修改
//- ....省略.....

总结

Jade一开始用挺恶心的，但是写习惯了感觉还可以；跟sass和stylus的写法基本一致（靠缩进排版的）
jade配合express来拿node数据，我感觉很不错，大部分可以直接在jade直接遍历判断渲染；嘎嘎嘎