HTML模板引擎:Jade

最近在项目开发中,除了尝试使用GraphQL搭建后端服务接口,还应用到了jade模板引擎,一种更加高性能简洁易懂的模板引擎。良好的代码组织(变量、函数、引用)、较少的代码是吸引我的两个优势。

Jade是什么?

Jade是一款高性能简洁易懂的模板引擎,是Haml的Javascript实现,在服务端(NodeJS)及客户端均有支持。

安装

npm install -g jade

用法

Harp 的 Asset Pipeline 用起来相当简单。所有的预编译都是静默完成,不需要任何设置。只要将你的文件命名成 .jade 后缀,而不是 .html,Harp 网页服务器会把它当作一个 .html 文件。

基本规则

缩进代表嵌套

每行以第一个空格为“分割符”之前的字符串(这部分暂称为 “tag-string”)编译为一个 html tag(以下简称 tag ),此空格之后的所有字符都原封不动的装进这个 tag 里

使用css里的 .class 和 #id 的语法,直接用这两种语法开头的话可以省略 div

html attribute 可以写在括号“()”里跟在 tag-string 后面,此时括号内的空格不会被前述的第二条规则计算为“分割符”

| 处在行首,表示该行不做编译处理

基本语法

行结束标志:

缩进代表嵌套

标签:标签就是一个简单的单词

html

渲染为: 

<html></html>

标签ID、类:采用跟css语法类似的方式

div#container content  //ID
.container content   //类
span#container.inner content

渲染为:

<div id="container">content</div>
    <div class="container">content</div>
    <span id="container" class="inner">content</span>

标签文本:只需要简单的把内容放在标签之后

单行注释:单行注释和JavaScript里是一样的,通过"//"来开始,并且必须单独一行;不输出的注释,加一个短横线就行了:

// just some paragraphs
p foo
p bar

 渲染为:

// just some paragraphs
    p foo
    p bar

块注释:

body
        //
        #content
            h1 Example

渲染为:

<body>
        <!--
        <div id="content">
            <h1>Example</h1>
        </div>
        -->
    </body>

属性:使用'(' 和 ')' 作为属性分隔符

img(src="#{assets}images/logo.png",alt="logo")

渲染为:

<img src="/static/assets/images/logo.png" alt="logo">

Case

定义变量,并根据变量值进行条件渲染。

html
    body
        - friends = 10
        case friends
            when 0
                p you have no friends
            when 1
                p you have a friend
            default
                p you have #{friends} friends

渲染为:

<html>
    <body>
        <p>you have 10 friends</p>
    </body>
</html>

循环

尽管已经支持 JavaScript 原生代码,Jade 还是支持了一些特殊的标签,它们可以让模板更加易于理解,其中之一就是each, 这种形式:

html
    body
        - var items = ["one", "two", "three"]
        ul
            each item in items
                li= item

渲染为:

<html>
    <body>
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
    </body>
</html>

条件语句

Jade 条件语句和使用了(-) 前缀的 JavaScript 语句是一致的,然后它允许你不使用圆括号,这样会看上去对设计师更友好一点,同时要在心里记住这个表达式渲染出的是常规 JavaScript:

for user in users
  if user.role == 'admin'
    p #{user.name} is an admin
  else
    p= user.name

模板继承

Jade 支持通过 block 和 extends 关键字来实现模板继承。 一个块就是一个 Jade 的 block ,它将在子模板中实现,同时是支持递归的。

Jade 块如果没有内容,Jade 会添加默认内容,下面的代码默认会输出 block scripts, block content, 和 block foot。

首先新建一个布局文件:layout.jade

//- layout.jade
doctype html
html(ng-app="webApp")
  head
    meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0")
    title Blockcloud
    link(rel='stylesheet', href='//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700')
  body
    block content

下面是继承layout来进行通用错误提示页:

extends layout

block content
  h1= message
  h2= error.status
  pre #{error.stack}

包含

includes 允许静态包含一段 Jade, 或者别的存放在单个文件中的东西比如 CSS, 常见的例子是包含头部和页脚。

include include/config.jade
doctype html
html
	head
		title Home
		include include/head.jade
	body.home
		.wrapper.center.has_slider
			include include/header.jade
			.main
			include include/footer.jade

include/config.jade:对应为路径和文件

- const style_name = "default";
- const assets = "/static/assets/";
- const images = "/static/assets/images/manager/"

include/head.jade:页头对应路径和文件

link(rel="profile", href="http://www.tip.center")
link(rel="stylesheet", type="text/css", media="all", href="#{assets}css/jquery-ui.css")
link(rel="stylesheet", type="text/css", media="all", href="#{assets}css/service.css")
script(src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js")
script(src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js")
script(type="text/javascript", src="#{assets}js/common.js")
meta(name="viewport", content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0")

过滤器

支持markdown。必须是安装了 markdown-js 或者 node-discount

#安装markdown-js
npm install -g markdown-js

#或者安装node-discount
npm install -g node-discount

例如:

:markdown
    ### Hello Markdown!

渲染后:

<h3>Hello Markdown!</h3>