Search code examples
javascriptexpresspug

How to Call Multiple File .pug in expressjs?


I want to call several .pug files so that it runs dynamically. But I get an error.

res.render('layout');
res.render('body');
res.render('footer');

Does anyone know how to overcome this? I can't call multiple .pug files


Solution

  • You call it using your pug files (NOT with your route files, but your pug files)

    header.pug

    nav.nav-top
        ul
            li.menu-item
                a(href='/').menu Home
                a(href='/dashboard').menu Dashboard
                a(href='/dashboard/thelist').menu thelist
                a(href='/login').menu Login
    

    footer.pug

    main.pug [layout file]. NOTE the include part (eg include ../part/header-top). My part folder is different than my layout folder. It just means include the pug file and it will get the content of your other pug file. Just put include pugfilename.

    doctype html
    html
        head
            title #{title} 23
            link(rel='stylesheet' href='/css/style.css')
            //- script(src='/js/main.js')
            //- script(src="https://code.jquery.com/jquery-3.1.0.min.js")
        body
            container.page
                include ../part/header-top
                include ../part/header-main
                h1 Hello main.pug
                block content
                br
                hr
                block kicker
            footer
                p Copyright © 2019
            script(src='/js/main.js')
    

    In your view pug file that's being rendered from your route. Notethe extends and then file location of your pug file layout file. I called my layout file main, so point to it on your side.Block content is the content of the page. It will put the block content into your layout page where it says block content.

    extends ../../template/layout/main
    
    block content
        h1 View
        a(href="/dashboard/thelist") The List
    

    NOTE: Depending on your layout and your folder structure, yours will be different than mine!

    If you want more help, you need to give details of your folder structure!

    If you need more help, this is an example of my setup (its about mixin, but it deals with your problem of calling pug files): Include pug mixin from other view folder