关闭

express默认模版jade

标签: jadeexpressnodejsnpm模板引擎
683人阅读 评论(0) 收藏 举报
分类:

这几天在公司用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






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4709次
    • 积分:163
    • 等级:
    • 排名:千里之外
    • 原创:12篇
    • 转载:0篇
    • 译文:0篇
    • 评论:5条
    最新评论