用jade来编写HTML

Jade 是Node的模板引擎,可以用它来快速地编写HTML代码。在NPM下用命令npm install jade进行安装。本文大部分内容翻译自官网http://jade-lang.com/。


其他后台非Node的项目需要编写HTML的也可以用Jade先写好再导出HTML

下面来看看Jade提供了哪些有利于快速编写HTML的特性


1.属性

标签的属性看上去和HTML比较类似,例如

a(href='google.com') Google

将会生成

Google


另外,可以在Jade中定义一些JS的变量用来做判定,像这样

- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')

要注意的是,var前面的"-"号不能漏,否则的话,这一行也会被解析成一个标签


在解析的过程中,如果不需要把属性中的特殊符号解析,要这样写

div(unescaped!="")

那么代码就会被解析为


大于号和小于号不会被解析城HTML符号,使用时要注意防止跨域脚本带来的安全问题


可以用数组标识一组类名,应用于标签上

-var classes = ['foo','bar','baz']

a(class=classes)

将生成



另外,应用单个类可以直接这样写(类似于emmet插件)

a.button

如果不写标签将默认生成div

类似的,id可以用#表示

如,a#main-link


2.条件

同样可以将变量用于条件判断,官网给出了这样一个例子

- 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

同样的也支持if else

根据条件会解析出相应的语句。这个功能对于不是用Node.js作为后台开发的项目用处不大。


3.代码

Jade允许在模板中些Javascipt代码,代码分为这三种类型

1)不缓存的代码(Unbuffered Code)

-for ( var x = 0; x < 3; x++)

 li item

这段以-开头的代码会被立刻解析输出


2)有缓存的代码(Buffered Code)

有缓存的代码以=开头,将先计算=号右边的表达式再进行解析,如

p= 'This code is' + ' !'

就相当于解析

p='This code is !'


3)不转码的缓存代码(Unescaped Buffered Code)

以"!="开头,属性或者标签内的内容若包含特殊符号将不会被转码,所以还是要注意跨域脚本的安全问题


同样可以定义变量用于填充属性或内容

- var user = {name: 'Forbes Lindesay'}
p Welcome #{user.name}
p Welcome !{user.name}

上面的语法表示的是转码的解析,

Welcome <strong>Forbes Lindesay</strong>

下面的则是不转码

Welcome Forbes Lindesay



4.模板继承

对于写原生HTML的同学来说,这是非常实用的功能,可以代替以往的复制粘贴过程。

先在模板文件中写好框架

//- layout.jade

doctype html

html

head

block title

title Default title

body

block content

然后在继承的jade文件中只需要实现这两个block即可

//- index.jade

extends ./layout.jade

block title

title Article Title

block content

h1 My Article


支持多级继承。

在模板中可以添加默认内容,如果实现了block将会覆盖

可以用block append 或block prepend在模板位置的前或后添加一些代码

block append head
  script(src='/vendor/three.js')
  script(src='/game.js')


5.包含

可以将一个jade文件作为一个模块,用其他jade文件包含

例如

//- includes/head.jade
head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

//- index.jade
doctype html
html
  include ./includes/head.jade
  body
    h1 My Site
    p Welcome to my super lame site.
    include ./includes/foot.jade

//- includes/foot.jade
#footer
  p Copyright (c) foobar

这样就能模块化编写HTML了。



你可能感兴趣的:(web)