Node.js 使用jade模板引擎的示例(2)

这都是属于“标签=表达式”这种调用方式,这种方式通常用在一行jade代码的开始,也就是标签开始的地方。而“#{表达式}”这种方式的好处是可以插入到jade模板文件的任意地方。比如:

p Hello, #{ip} p You're the #{counter} visitor.

我们也可以将“h1= title”修改为“h1 #{title}”,效果一样。

jade引擎简介

jade使用一些标签来标记如何生成HTML,jade模板文件看起来很不像HTML文件,但它的模板文件小而整洁。使用jade,需要了解它都支持哪些标签,这个可以直接去看jade-lang,那里最详细也最权威,我们这里只介绍index.jade文件用到的那些标签。

关于jade,有两篇文章不错,可以看看,https://cnodejs.org/topic/5368adc5cf738dd6090060f2https://www.jb51.net/article/139936.htm,后面这篇文章是网友根号三写的一个关于jade的系列文章的开篇,整个系列里的文章都值得一看。

HTML文档的开始通常是文档声明,对应到jade模板文件里,就是doctype html。还有其它的文档类型,比如xml,可以写作doctype xml。更多请参考

jade有很多标签,用于生成HTML对应的标签。比如html对应,head对应,body对应,p对应,title对应,这也是我们的index.jade用到的所有标签了。通常我们在HTML里使用的标签写法,去掉尖括号就成了jade里可用的标签,比如对应jade里的div。

HTML标签往往可以设置name、id、class等属性,在jade里,是通过tag(attr=value)这种形式表示的。比如div(class=”view-container”),又比如input(type=”checkbox”)。

关于jade标签,这篇文章https://www.jb51.net/article/139942.htm说得很好,请参考。

测试jade模板文件

一开始用jade模板,记不全它的标签,也经常不知道自己的写的模板文件生成的html文档是否正确。还好安装jade后,有一个命令行工具jade,可以用来验证模板文件。

jade的用法如下:jade [options] [dir|file …]

jade命令有很多选项,可以执行“jade -h”查看。要验证模板文件,最简单的办法就是使用jade工具生成为html文档。命令如下:

jade xxx.jade

执行上面的命令,就会在当前目录下生成一个与模板文件同名的html文档。不过格式很难读,完全是一坨屎挤在一起。加上 -P(–pretty) 就好了。这样:

jade -P xxx.jade

比如我们有这么一个使用了AngularJS的模板文件scope_template.jade,内容如下:

doctype html html(ng-app="myApp") head title= title link(rel='stylesheet', href='https://www.jb51.net/stylesheets/style.css') body div(ng-controller="SimpleTemplate") | ValueA: input(type="number" ng-model="valueA") br | ValueB: input(type="number" ng-model="valueB") br br | Expression Value: {{valueA + valueB}} br br input(type="button" ng-click="addValues(valueA, valueB)" value="Click to Add Values {{valueA}} & {{valueB}}") br | Clicked Value: {{valueC}} br script(src="https://www.jb51.net/javascripts/angular-1.4.3.min.js") script(src="https://www.jb51.net/javascripts/scope_template.js")

运行“jade -P scope_template.jade”命令会生成scope_template.html文件,内容如下:

<!DOCTYPE html> <html ng-app="myApp"> <head> <title></title> <link href="https://www.jb51.net/stylesheets/style.css" > </head> <body> <div ng-controller="SimpleTemplate">ValueA: <input type="number" ng-model="valueA"><br>ValueB: <input type="number" ng-model="valueB"><br><br>Expression Value: {{valueA + valueB}}<br><br> <input type="button" ng-click="addValues(valueA, valueB)" value="Click to Add Values {{valueA}} &amp; {{valueB}}"><br>Clicked Value: {{valueC}}<br> </div> <script src="https://www.jb51.net/javascripts/angular-1.4.3.min.js"></script> <script src="https://www.jb51.net/javascripts/scope_template.js"></script> </body> </html>

需要提一下,我们既可以用jade编写完整的HTML文档,也可以编写符合HTML语法的局部模板。比如下面的jade文件:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c441afd9d6201a8d849bb0ca287c9e54.html