在我的玉模板中添加导航栏答案

【问题标题】：Adding a navbar in my jade template在我的玉模板中添加导航栏
【发布时间】：2016-07-21 13:48:30
【问题描述】：

我正在使用 nodejs、express 和 bootstrap。

所以这似乎是一个非常笼统的问题，但我无法在任何地方找到我正在寻找的确切内容。我有一个 layout.jade 文件和一个 index.jade 文件，我在 index.jade 文件中使用我的布局。问题是，我的导航栏无法显示...这是我的代码：

layout.jade

doctype html
html
  head
    title= title

    block styles

        link(rel='stylesheet', href='/stylesheets/static/bootstrap.css')

  body

    block navBar
        div.container
            ul.col-md-12.row
                a(href="#")
                    li.col-md-3.col-md-offset-1 Register
                a(href="#")
                    li.col-md-3 Login
                a(href="#")
                    li.col-md-3 About Chatbox
    block content

index.jade

extends layout

block append styles

    link(rel='stylesheet', href='/stylesheets/homePage/style.css')

block navBar     

block content

    div.box
        h1.col-md-4.col-md-offset-4 Chatbox

我对这里的模板有什么不了解的地方？我假设块部分下的任何内容都将插入到页面中，并且由于块内容不在导航栏内，我可以像在导航栏下一样添加到内容中。

唯一显示的是我在 index.jade 文件中放入块内容的内容。我该如何解决？

【问题讨论】：

标签： javascript node.js templates express pug

【解决方案1】：

当您在 index.jade 文件中写入 extends layout 时，这意味着 layout.jade 文件中的所有内容都将被包含在内。

当您想要根据正在呈现的文件更改代码时，使用块。在这种情况下，您是说在 layout.jade 中 block navBar 应该包含：

div.container
            ul.col-md-12.row
                a(href="#")
                    li.col-md-3.col-md-offset-1 Register
                a(href="#")
                    li.col-md-3 Login
                a(href="#")
                    li.col-md-3 About Chatbox

然后在 index.jade 中再次定义 block navBar 并覆盖 layout.jade 中的定义。由于block navBar 在您的 index.jade 中没有任何内容，因此不会呈现任何内容，您只需从 index.jade 中删除 block navBar 声明即可。

block navBar     
  //nothing here means you are telling it to be empty.
block content

基本上，这意味着如果您知道要在任何地方使用导航栏，只要您在 layout.jade 中声明它并在所有其他文件中使用 extends layout，就根本不需要块.仅对逐页更改的代码使用块。

【讨论】：