在我的 jade 模板中添加导航栏

Question

我正在使用 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

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

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

Answer 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.[=18= 中删除 block navBar 声明]

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

基本上这意味着如果你知道你将在任何地方使用导航栏，你根本不需要一个块，只要你在你的 layout.jade 中声明它并使用 extends layout 在所有其他文件中。仅对页面之间变化的代码使用块。

在我的 jade 模板中添加导航栏

Adding a navbar in my jade template

javascript

templates

node.js

express

pug