连接其他Jade文件

Question

我正在尝试理解Express和Jade的工作原理。

首先，当我使用layout.jade作为模板文件（包含头部、正文和底部），并使用不同的文件来展示正文中的信息时，我是否做得正确（请参见以下示例）？

代码正常运行，但是我不确定这是否是在Express中正确操作的方式。如果我应该继续使用这种结构，如何在index.jade中内部链接到其他文件（例如About.jade）以显示该文件而不是index.jade呢？

提前感谢！

layout.jade：

!!! 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js')
    script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js')
    script(type='text/javascript', src='/javascripts/external.js')

  // Header
  header#header

  // Navigation
  nav#nav
    // Navigation code (ul, li etc)...

  // Sidebar
  aside#sidebar
    // Sidebar code...

  // Body
  body!= body

index.jade:

!!! 5
html
  head
    title= title

    section#wrapper
      img.imageStyle(src = '/images/test1.png')
      // And so on...

About.jade:

关于 About.jade：

// You get it...

- holyredbeard

Answer 1

我认为你正在寻找的是Express中的视图渲染路由： http://expressjs.com/en/guide/using-template-engines.html 因此，你可以设置如下内容：

app.get('/', function(req, res){
  res.render('index.jade', { title: 'index' });
});

app.get('/about', function(req, res){
  res.render('about.jade', { title: 'about' });
});

要从一个链接到另一个，一旦你配置了正确的路由，你只需要这样做：

a(href='/') index

a(href='/about') about

更新 另外，在索引中不需要重复这个。

!!! 5
html
  head
    title= title

- Eve Freeman

Answer 2

除了Wes Freeman所写的内容之外，您还可以在Jade文件中包含其他Jade模板。

这样，您就可以在about.jade文件中使用您的header.jade和footer.jade。以下是Jade的include文档： https://github.com/visionmedia/jade#a13 这样，如果您添加了例如脚本或样式表标签，而这些标签应出现在每个页面上，您只需更改header.jade文件即可。

- toxinlabs