导航栏不会出现在哈巴狗中

Question

我是初学者，正试图将我的导航栏永久放置在基本布局中。我正在使用 youtube 但是因为我正在学习后端并且根据我的课程，无论网站中链接页面的更改如何，导航栏都应该显示为永久性但它不起作用。

基本布局文件

doctype html
html
  head
    title DevilisHere
    block scripts
    block style

  Body
    block content
            nav#navbar
                    div#container
                        img(src = "../static/bg.png")
                            ul
                                li #[a(href = "/") Home]
                                li #[a(href = "/") Devil] 
                                li #[a(href = "/") Devils Address]
                                li #[a(href = "/") Contact Devil]
                    div#logotag
                        h6  DevilIsHere
           
    block foot
        footer.foot
            h3.headline Copyright © 2020 DevilisHere | All Rights Reserved

主页文件//

extends layout.pug

block scripts
    script(src="../static/index.js")

block style
       style
        include ../static/navbar.css
        include ../static/section1.css 
        include ../static/section2.css
        include ../static/section3.css 
        include ../static/footer.css

block content   
        section#firstSection
            div.heading1 
                p.headline Welcome to Devils Mansion
            div.tag2 
                p Come Prepared To Die

        section#secondSection
            p.headline.head2 Opt For a Remembrable Death.
            div.heading2 
                div.card
                    h3.headline.cardhead Specialised in Peaceful Death 
                    img(src= "../static/sec21.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                div.card
                    h3.headline.cardhead Have killed Billions
                    img(src= "../static/sec22.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                div.card
                    h3.headline.cardhead Experienced in Breaking Bones
                    img(src= "../static/sec23.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                div.card
                    h3.headline.cardhead Extra Caution with Body Art
                    img(src= "../static/sec24.jpg")
                    div.para 
                        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id debitis soluta neque ducimus ad. Repudiandae error rerum recusandae dolore temporibus!
                

        section#thirdSection
            h3.headline.logohead You can Submit Your Death Requests Here.
            div.logosection
                div.logo 
                    img(src= "../static/logo1.png")
                div.logo 
                    img(src= "../static/logo2.png")
                div.logo 
                    img(src= "../static/logo3.png")
                div.logo 
                    img(src= "../static/logo4.png")
                div.logo 
                    img(src= "../static/logo5.png")
                div.logo 
                    img(src= "../static/logo1.png")
                div.logo 
                    img(src= "../static/logo2.png")
                div.logo 
                    img(src= "../static/logo3.png")
                div.logo 
                    img(src= "../static/logo4.png")
                div.logo 
                    img(src= "../static/logo5.png")

在上面的代码中，当在浏览器中加载文件时，即使导航栏处于基本布局中，导航栏也不会显示。

Answer 1

请参阅有关 Template Inheritance 的文档。

nav#navbar为默认内容。

...
Body
    block content
            nav#navbar
...

但是它被section#firstSection

覆盖了

...
block content   
        section#firstSection
...

重组并放置 nav#navbar 作为 block content 的兄弟姐妹：

doctype html
html
head
    title DevilisHere
    block scripts
    block style

Body
    
    nav#navbar
        div#container
            img(src = "../static/bg.png")
                ul
                    li #[a(href = "/") Home]
                    li #[a(href = "/") Devil] 
                    li #[a(href = "/") Devils Address]
                    li #[a(href = "/") Contact Devil]
        div#logotag
            h6  DevilIsHere

    block content
        
    block foot
        footer.foot
            h3.headline Copyright © 2020 DevilisHere | All Rights Reserved

导航栏不会出现在哈巴狗中

Navbar is not coming in pug

html

css

backend

pug