html - 布局 Jade 导航栏

Question

我想要一个导航栏，它不是硬编码的，而是从 Controller 获取其项目。但我的问题是，我不想在每个页面 Controller 中设置导航栏项目，而只想在一个文件中设置导航栏项目，并将它们用于具有相同布局的所有页面。这是我的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

我的问题是如何解析这些 navitem，所以我在每个页面上都有它们。现在我只是在每个 Controller 中使用它:

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

Application local variables are provided to all templates rendered within the application. This is useful for providing helper functions to templates, as well as app-level data.

The app.locals object is a JavaScript Object. The properties added to it will be exposed as local variables within the application.

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

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 生成的所有模板。 .