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

Posted 2021-04-01

我正在使用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文件中放入块内容的内容。我如何解决它？

答案

当您在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，就根本不需要块。仅对从页面更改的代码使用块。