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模版快速搭建

之前刚开始使用nodejs做项目很是迷茫,很多不会用,不知道怎么用。走了挺多弯路,看了很多人的博文,还有同事的帮忙。所以现在分享下快速搭建express模板的工作经验。...
  • qq_16863555
  • qq_16863555
  • 2016年12月10日 13:16
  • 61

express默认模版jade

公司用node的express框架时,模板引擎都是用ejs,而express 的默认模板引擎是jade,我觉得有必要去了解一下...
  • wenhebrews
  • wenhebrews
  • 2015年07月07日 22:44
  • 919

Node.js模板引擎的深入探讨

每次当我想用 node.js 来写一个 web 相关项目的时候,我总是会陷入无比的纠结,原因是 JavaScript 生态圈里的模板引擎实在太多了,但那么多却实在找不出一个接近完美的,所谓完美的概念就...
  • xiaohubeiplus
  • xiaohubeiplus
  • 2016年04月17日 21:02
  • 5394

Express4.X版本修改默认模板jade为ejs并且试用html为视图模板后缀名

通过npm安装Express4.x版本之后发现默认的视图模板是jade的,如果想使用ejs模板的话先通过npm安装ejs npm install ejs 然后打开app.js文件,把里面的...
  • ansu2009
  • ansu2009
  • 2016年11月11日 11:47
  • 2860

nodejs+express生成的模板引擎jade改为html

在写项目时,使用express 项目名生成的应用程序默认是以jade为模板引擎的,但是我们似乎更偏向于html,所以将jade改为html是必须的。首先在app.js中的部分内容如下,app.use(...
  • csdn_zsdf
  • csdn_zsdf
  • 2017年06月22日 14:01
  • 1891

nodejs express template (模版)的使用 (ejs + express)

var app=require("express").createServer(); app.set("view engine","ejs");
  • macyang
  • macyang
  • 2013年04月23日 21:38
  • 28695

让node js express 支html模板

导 var ejs = require('ejs'); app.engine('.html', ejs.__express); app.set('view engine', 'html');
  • JBBOY
  • JBBOY
  • 2014年07月03日 17:16
  • 8209

nodejs使用express创建ejs变成jade的解决办法!

最近在看《Node.js从入门到精通》,看到使用nodejs进行web开发的时候,准备创建ejs项目遇到问题了!!!         使用express -t ejs microblog创建出来的居然...
  • q36835109
  • q36835109
  • 2016年07月28日 16:49
  • 1651

Express使用html模板

express默认使用jade模板,可以配置让其支持使用ejs或html模板。   1. 安装ejs    在项目根目录安装ejs. npm install ejs 2、引入ejs...
  • xiangran8023
  • xiangran8023
  • 2017年03月09日 15:51
  • 257

nodejs express 加载html模板

在nodejs中如使用express框架,她默认的是ejs和jade渲染模板。由于我在使用的时候觉得她的代码书写方式很不爽还是想用html的形式去书写,于是我找了使用了html模板。 直接上代码,主...
  • jokeHello
  • jokeHello
  • 2014年03月17日 22:36
  • 1578
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:express默认模版jade
举报原因:
原因补充:

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