express默认模版jade

原创 2015年07月07日 22:44:21

这几天在公司用nodejs做后台的cgi,用到了express框架,其中express的默认模版是jade,而公司是用ejs,但是我对jade也很有兴趣,所以这两天抽了点时间,去了解一下jade。

了解下来发现,对比于ejs,jade还是需要一点学习成本的,但是也有其优点:

1.写起来非常爽,因为不需要写任何闭合标签,只需要正确地缩进排列html元素的层级关系      2.模板可以继承


我选择的是全局安装jade,因为这样可以直接使用它的命令行 : npm install jade -g

要在express里使用jade,只需设置:app.set('view engine','jade');  不过其实express的默认模板引擎就是jade

这货是受haml的启发而成的,haml  用一套语法描述html ,使用缩进排列来解决嵌套问题

jade支持javascript的原生代码


如下面的carmen.jade

doctype html
html
	head
		title  carmen study jade
	body
		div#main
			h1#title.title learn how to use jade
			section(id='con',class='con') 
				p.  
					this is the main content 
					it's the my first web_page about jade 
					let's learn how to use jade together
				a(href="http://blog.csdn.net/wenhebrews" title="carmen's blog" alt="carmen's blog") carmen's blog
				p.author by carmen.xie


写好只需执行命令jade -P  -w carmen.jade 就会自动生成一个carmen.html文件,

-P:输出可读的,不压缩的html

-w:对这个文件状态进行监控,一旦变化,就会实时更新编译

( )里面的是属性

如果要使其生成的html文件里面的文本按格式排列,记得在元素后面加一个小点",",.表示后面的代码是一个完整的代码块,如上面的p.,否则会把元素里的文本错误编译成元素

p后面没有加.

<!DOCTYPE html>
<html>
  <head>
    <title> carmen study jade</title>
  </head>
  <body>
    <div id="main">
      <h1 id="title" class="title">learn how to use jade</h1>
      <section id="con" class="con"> 
        <p> 
          <this>is the main content </this>
          <it>'s the my first web_page about jade </it>
          <let>'s learn how to use jade together</let>
        </p><a href="http://blog.csdn.net/wenhebrews" title="carmen's blog" alt="carmen's blog">carmen's blog</a>
        <p class="author">by carmen.xie</p>
      </section>
    </div>
  </body>
</html>
p后面加了.

<!DOCTYPE html>
<html>
  <head>
    <title> carmen study jade</title>
  </head>
  <body>
    <div id="main">
      <h1 id="title" class="title">learn how to use jade</h1>
      <section id="con" class="con"> 
        <p>
          this is the main content 
          it's the my first web_page about jade 
          let's learn how to use jade together
        </p><a href="http://blog.csdn.net/wenhebrews" title="carmen's blog" alt="carmen's blog">carmen's blog</a>
        <p class="author">by carmen.xie</p>
      </section>
    </div>
  </body>
</html>

文本与标签混排

标签就直接写成闭合标签的形式就行了,或者缩进排列

jade注释

单行注释 // 会被编译到html代码中  非缓冲注释   //- 不会被编译到html代码中


jade里面能声明变量

声明变量 : -var 变量名 = 值

引用变量 : #{变量名}

如下示例:

<pre name="code" class="plain">doctype html
html
	-var author = 'carmen';
	head
		//还可以调用函数处理
		title  #{author.toUpperCase()} study jade
	body
		div#main
			h1#title.title learn how to use jade
			section(id='con',class='con') 
				p.  
					this is the main content 
					it's the my first web_page about jade 
					let's learn how to use jade together
				a(href="http://blog.csdn.net/wenhebrews" title="#{author}'s blog" alt="#{author}'s blog")#{author}'s blog
				p.author by #{author}.xie



编译结果:

<!DOCTYPE html>
<html>
  <head>
    <title> carmen study jade</title>
  </head>
  <body>
    <div id="main">
      <h1 id="title" class="title">learn how to use jade</h1>
      <section id="con" class="con"> 
        <p>
          this is the main content 
          it's the my first web_page about jade 
          let's learn how to use jade together
        </p><a href="http://blog.csdn.net/wenhebrews" title="carmen's blog" alt="carmen's blog">carmen's blog</a>
        <p class="author">by carmen.xie</p>
      </section>
    </div>
  </body>
</html>
如果变量很多的时候,也可以把变量存入一个json文件,如

{
	"author":"carmen"
}

然后调用命令行执行

jade index.jade -P -w -O index.json






版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

nodejs的express自动生成项目框架-2016

nodejs的express自动生成项目框架-2016

nodejs-express4.X框架路由中获取参数值方法

nodejs-express4.X框架路由中获取参数值方法

nodejs连接sqlserver数据库简单封装-mssql模块

一 安装mssql模块 npm install mssql 二 封装连接数据库代码 db.js: /*2016年7月14日17:02:15 QQ: 452076103 意外金喜 mssql模块简...

express不是内部或外部命令,也不是可运行的程序或批处理文件

express不是内部或外部命令,也不是可运行的程序或批处理文件

Nodejs建站3-Blog-摇一摇功能-boostrap-express-mvc-mongod-jade

Nodejs建站3-成果展示核心代码 核心路由 app.get('/',Index.index); app.get('/shake',Index.shake) app.post('/user/b...

《nodejs开发指南》微博实例常见错误汇总express4.x.x+jade

最近刚开始接触nodejs,看到知乎上有人推荐《nodejs开发指南》这本书,看了看讲的也还不错,就开始上手。但是由于出版年份+科技进步太快,导致很多代码出现了版本性问题。没碰到一个问题我就要上网查阅...

node+express+jade+superagent+豆瓣API,实现简单的搜索功能

node+express+jade+superagent+豆瓣API,实现简单的搜索功能配置入口文件(app.js)var express = require('express'); var app ...

学习笔记-NODE.JS, EXPRESS, JADE, AND MONGODB

从上周开始学习node.js相关的资料. 这个正是我想要的. http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ http...

Express---jade模板引擎(二)

安装配置 1 安装: 
npm install pug-cli -g   jade --help   Usage: jade...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)