链接到其他玉文件

Posted 2023-03-03

【中文标题】链接到其他玉文件

【英文标题】：Linking to other jade files

【发布时间】：2012-04-25 04:35:04

【问题描述】：

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

首先，当我使用 layout.jade 作为模板文件（页眉、正文、页脚）并使用不同的文件在正文中显示信息（参见下面的示例）时，我做得对吗？

代码运行良好，但我不确定这是否是在 Express 中做事的正确方法。如果我应该继续使用这种结构，我如何从内部链接到其他文件（例如，About.jade），例如 index.jade，以显示该文件而不是 index.jade？​​p>

提前致谢！

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...

关于.jade：

// You get it...

【参考方案1】：

我认为您正在寻找的是快速查看渲染路线： 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

【参考方案2】：

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

这样您就可以拥有 header.jade、footer.jade 并将它们包含在您的 about.jade 文件中。这是玉的包含文档： https://github.com/visionmedia/jade#a13

这样，如果您添加例如应该在每个页面上的脚本或样式表标签，您只需更改 header.jade 文件。