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






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

在Express中使用模板引擎

定义模板引擎var app = express(); app.set('views', './views'); // 指定模板文件存放位置 app.set('view engine', 'jade...

Express修改模板引擎

在《Mac下express的安装和新建项目》我们新建项目使用的是:express --view=ejs 项目名其中的view=ejs表明我们模板引擎是ejs。默认是jade。 但是我们要修改成htm...

Nodejs-Express框架API文档及Jade文档

  • 2014年04月29日 16:49
  • 134KB
  • 下载

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

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

express(jade或ejs)如何实现上传图片到服务器并在客户端展示(在客户端可以删除)

详细代码见:https://github.com/marujun/imageUpload 使用ejs编写不使用jade查看上面链接GitHub 关键点: 如果expr...

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开发指南》这本书,看了看讲的也还不错,就开始上手。但是由于出版年份+科技进步太快,导致很多代码出现了版本性问题。没碰到一个问题我就要上网查阅...
  • viana37
  • viana37
  • 2016年05月14日 13:07
  • 622

学习笔记-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...
  • bwf_erg
  • bwf_erg
  • 2016年11月18日 09:09
  • 126

从零开始构建部署上线Node.js+Express+Bootstrap+Jade响应式网站应用---RSPT丨留学生活第一站(一)

- 创建一个Express应用 - 使用npm和package.json管理应用依赖 - 调整Express工程结构到MVC架构 - Route和Controller概念分离 - 创建新...
  • Tong_T
  • Tong_T
  • 2017年06月16日 02:07
  • 581
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:express默认模版jade
举报原因:
原因补充:

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