In my Express JS web app, I need to create a layout view that is attached to every other view as included. The layout is supposed to contain a header and a login or logout link depending user authentication condition.
layout.pug:
doctype html
html
head
title= title
link(rel='stylesheet', href='/bootstrap/css/bootstrap.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='/jquery/jquery.min.js')
script(src='/bootstrap/js/bootstrap.min.js')
block extraHeader
block extraScript
body
block content
home.pug that contains the layout on the top which may contain a log out link if user was already logged in.
extends layout
block content
h1= title
p Welcome to #{title}
How can I generate the header in layout.pug?
You need to add the code in between the body tag and block content:
body
div Header goes here
block content
You can use conditional logic to control a button in there too:
body
div Header goes here
if(user)
button(onclick='logout()') Logout
else
button(onclick='login()') Login
block content
In one line using a ternary operator:
body
div Header goes here
button(onclick= user ? "logout()" : "login()")= user ? "Logout" : "Login"
block content
Of course, this assumes that your route passes a variable named "user" in the render function.
Related
I want to ajax for blocks that without layout
Such as
extends layout
block content
p xxxx
I want to get the content in block
if !layout
include layout
The solution
If you don't want the standard pug layout then create a file that doesn't have extends layout in it:
doctype html
html(lang='en-us')
head
title Page Title
body
div Content goes here
You don't need to do anything in your app.js file to make this happen. You've probably figured out that none of the statements in your question work. This is all controlled in the pug template file.
I have three Pug files in a Node.js/Express application which follows the following layout:
//layout.pug
html
head
title= title
link(rel="stylesheet", href="link")
script(src="links")
// many css and javascript imports
body
header
// header section
block content
footer
// footer section
// more script imports
//index.pug
extends layout
block content
//some content
include slider
//slide.pug
div(class="xxx")
//slider contents
The include keyword actually works here and it renders the slider.pug but the problem I'm facing is that it does not render the slider.pug page as expected. The slider page is rendered in a way that it does not load required styles and javascript files so the result is a messed up html inside a nicely rendered one (index.pug in this case is the nicely rendered one).
I've tried adding the extend layout line to the slider.pug but it also failed.
What is the appropriate way to include a pug file that is meant to rely on the resources included in the layout page such as css and javascript inside another pug file?
I'm new to node.js, jade, & express, so please bear with me.
I have the following files.
layout.jade
index.jade
extends layout
block content
label initial layout
form(action="/getReports", method="GET", enctype="multipart/form-data")
input(type='submit', value='Generate Report')
child.jade
extends index
block append content
label added child
server.js
app.get('/getReports', function(res, req)
{
res.render("child.jade");
});
Process:
User comes on and loads the site. They see the initial index page
User clicks on the form which triggers an action that calls the Rest
Api getReports
The call will render the child template that should just append "added child" to the content part of index.jade.
However, I'm not seeing this. I guess I'm trying to understand the best approach to append a partial template that is rendered to the original index.jade page.
The problem i'm having is that this code is the client side is the index.jade page. The button triggers an action call to the server. The server processes data, then the goal is to take the data and process a template that it was to display on the index.jade page.
Normally, without the jade template files, I would just use javascript and to the naive way which would be just have the client side java code trigger the ajax call and in the response use the DOM to append the html with the processed data but I wanted to take advantage of jade.
Any advice Appreciated,
Thanks,
D
Here are some pointers that might help you,
In res.render("child.jade");, don't include extension of the jade file, .jade. Just res.render("child"); will work.
In your "child.jade", block append content is wrong as there is no block with that name. If you want to render some partial in index page then you should specify a block in "index.jade". Make it like,
extends layout
block content
label initial layout
form(action="/getReports", method="GET", enctype="multipart/form-data")
input(type='submit', value='Generate Report')
block child
and "child.jade" to,
extends index
block child
label added child
So I'm using jade to build a couple of webpages, but my landingpage differs in the other pages in the way that it hasn't got a menu. Except for that it shares the same header and footer. My problem is that I'd like to conditionally include menu.jade into conversion to html. I'd like to do something like this:
base.jade:
doctype html
head
title= title
body
block menu
block content
include footer
menu.jade
extends base
ul
li Home
li Contact
index.jade:
extends base
block content
p hello landingpage
page.jade
extends base
block content
p hello subpage
The thing is: when I convert index.jade everything is fine; my pages looks like I want it to. But when I convert page.jade I somehow would like to include menu.jade as well,o I don't have to rewrite my menu across all subpages.
menu.jade
ul
li Home
li Contact
page.jade
extends base
block menu
include menu
block content
p hello subpage
anotherpage.jade
extends page
block content
p hello another page
I'm currently experimenting with jade template engine. I've got the follow basic code in my layout.jade file:
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body!= body
header != partial('partials/head')
'dependant page content to go here'
footer != partial('partials/foot')
I'd like every page to follow this same structure (for now). However I would like the content to change, and the content should be depended on what is inside the 'pagename'.jade files e.g. index.jade:
section#page-content
h1= title
p Welcome to #{title}
What i'm trying to say is, upon a new page loading.. the content tag in layout should somehow be replaced by the appropriate tag of the page being loaded.
I think you're looking for:
body
header
p my header
section!= body
footer
p my footer
In this case, section!= body is replaced by whatever is in the 'pagename'.jade files.
use blocks
in layout.jade:
body
block some-block
p Blah
in test.jade
extends layaout
block some-block
p What