express默认模版jade

最新推荐文章于 2023-12-06 17:29:26 发布

wenhebrews

最新推荐文章于 2023-12-06 17:29:26 发布

阅读量1.3k

点赞数

分类专栏： nodejs 文章标签： jade express nodejs npm 模板引擎

本文链接：https://blog.youkuaiyun.com/wenhebrews/article/details/46795489

版权

nodejs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了作者在使用Express框架时接触Jade模板引擎的过程。相较于ejs，Jade的学习成本稍高，但其特色在于简洁的缩进语法和模板继承功能。通过全局安装Jade并设置Express的视图引擎，可以方便地使用Jade。此外，文章还提及了Jade的特性，如自动生成HTML、文本与标签的混排、注释方式以及变量声明和引用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天在公司用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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/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文件，如