Question

我想要一个导航栏，它不是硬编码的，而是从控制器中获取其项目。我的问题是，我不想在每个页面控制器中设置导航栏项目，而只是在一个文件中设置它们并将它们用于具有相同布局的所有页面。所以这是我的layout.jade

doctype 5
html(lang='en')
  head
    meta(charset='UTF-8')
    meta(name='viewport', content='width=device-width')
    title= '™DreamTechnologies'
    block css
      link(rel='stylesheet', href='/components/bootstrap/dist/css/bootstrap.min.css')
      include styles.css
    block js
      script(src='http://localhost:35729/livereload.js')
  body
    nav.navbar.navbar-inverse(role="navigation")
      .container-fluid
        .navbar-header
          a.navbar-brand(href="/")
            |HOME
        .collapse.navbar-collapse
          ul.nav.navbar-nav
            each item in navitems
              li
                a(href=item.link)
                  =item.content
    div.page-header
      h1
        =title       
    block content

我的问题是如何解析这些navitems，所以我在每一页上都有它们。现在我只想在每个控制器中使用它：

exports.index = function(req, res){
    res.render('home/index', {
        title: '™DreamTechnologies',
        navitems: [
            {link: 'this', content: 'that'},
            {link: 'secondLink', content: 'secondContent'}
        ]
    });
};

当然，如果我只在这里写，我只在主页上导航...

Answer 1

您可以使用app.locals将常用数据传递给所有模板。来自documentation：

app.locals

应用程序局部变量提供给应用程序中呈现的所有模板。这对于为模板提供辅助函数以及应用级数据非常有用。

app.locals对象是JavaScript Object。添加到其中的属性将作为应用程序中的局部变量公开。

您可以通过以下方式将其合并到您的网站中：

app.locals.navitems = [
  {link: 'this', content: 'that'},
  {link: 'secondLink', content: 'secondContent'}
];

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

app.get('/about', function(req, res) {
  res.render('home/about', {
    title: '™DreamTechnologies - About'
  });
});

navitems变量现在可用于使用res.render生成的所有模板。

布局玉导航栏

1 个答案:

`app.locals`