Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
373 views
in Technique[技术] by (71.8m points)

html - Navbar is not coming in pug

I am a beginner and trying to put my navbar as permanent in base layout. I am using youtube for it but as I am learning back end and according to my course, the navbar should appear as permanent irrespective of the changes in the linked pages in the site but it is not working.It is looking like this.

Base Layout File

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

Home File //

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")

In the above code Navbar is not showing when loading the file in browser even the navbar is being in the base layout.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

See the docs about Template Inheritance.

nav#navbar is a default content.

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

But it's getting over written by section#firstSection

...
block content   
        section#firstSection
...

Restructure and place nav#navbar as a sibling of 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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...