NodeJs从零单排第四期

express用来创建框架，接下来我们要选择html的模版引擎。

这里争论最多的就是jade和ejs，熟优熟劣？

都说jade要花学习成本，我看下了各自的代码，如果你会html，jade会很难上手吗？

jade代码会更简洁、优雅。

其实最主要的原因是jade是由express的作者创的，是基于MVC理念的，将结构与表现分离。

我们项目下的views文件夹就是用来存放jade文件的。

jade是express的默认引擎，无须另外安装。

jade -V 查看版本号！

jade的官方网站为：http://jade-lang.com/ ，看文档能明白其语法规则。

我们来用jade创建一个包含导航、尾部、正文表单的页面。

index.jade 是首页，在views下已经存在，直接修改即可。

我们再新建两个文件： nav.jade 和 foot.jade ，用于存放导航和尾部内容。

为什么不放到一个页面呢？通常一个完整的网站导航和尾部都是共用的，所以单独放，养成一个好习惯。

首页的文档结构应该是这样子：

大家看，jade并没有想象的那么难懂吧。

现在我们来设计nav.jade这个页面。

导航打算采用bootstrap这个前端框架，样式多，而且很友好的响应式。

bootstrap我用的也不是很熟，这个东西大家认真看下文档就会使用。

一般做前端都的知道bootstrap，如果你不想用它，自己写样式也是可以的。

这里我直接找了个别人用bootstrap写的响应式导航，然后把html代码改成了jade代码，竟然发现代码精简了许多，条理看起来也清楚许多。

附jade代码如下，看来选择jade是没错的。

.container
  nav(class=['navbar', 'navbar-default'], role='navigation')
    .navbar-header
      button(type='button', class='navbar-toggle', data-toggle='collapse', data-target='#mymenu')
        span(class='sr-only') 切换导航
        span(class='icon-bar')
        span(class='icon-bar')
        span(class='icon-bar')
        span(class='icon-bar')
      a(class='navbar-brand', href='#') FirstApp

    #mymenu(class=['collapse', 'navbar-collapse'])
      ul(class=['nav', 'navbar-nav'])
        li(class='active')
          a(href='#') 首页
        li
          a(href='#') 页一
        li
          a(href='#') 页二
        li
          a(href='#') 页三

然后在index.jade引入bootstrap文件。

doctype html
html
  head
    title 我的第一个nodejs网站
    link(rel='stylesheet', href='http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css')
    script(src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js')
    script(src='http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js')

  body
    include nav.jade

    //- 表单

    include foot.jade

下班啦，下期设计foot.jade和浏览整个页面。