I'm using layout.jade as a template for all the partials. layout.jade includes a header, footer, sidebar etc, and the partials is what is shown in the body.
Now I've implemented a lightbox with iframe, to show one of the partials in. The problem is that I don't want the header, footer etc to be shown inside the lightbox, just the partial jade file.
Is there a way to exclude layout.jade in this case?
Thanks in advance!
Yes, here's how:
res.render('template', { layout: false /* ... other parameters */ });
See Express docs on view rendering. You can also specify a different layout.
Related
The Block inheritance doesn't seem to be working and Im not sure why not. I have two pug files. One, about dot pug and the other h2 dot pug. H2 file should replace the default block content in the about file block content but nothing is happening. My files are in the views folder setup on two different routes if that matters. I'm new to Pug and can't figure it out. Here is my repl:
Repl
about.pug
html
head
body
block content
h1 Hello #{name}
h2.pug
extends about.pug
block content
h2 hello PPL
The about.pug file, as #Absor said needs to be rendered. The why is because the file with the extends keyword is the one that needs to be rendered. I initially thought it was the other way around. I searched many tutorials tying to understand this.
Example:
// Layout.pug -- redundant html structure I want included throughout
html
body
h1 Hello World!
hr
block content
// About.pug -- This is the file I will render. app.get('/', (req,res)=> {res.render('about')})
extends layout
block content
h2 Hi my name is Ron!
Result:
Hello World!
Hi my name is Ron!
You have to just render the template that you have the overrides in (h2.pug). For example if your root route is
app.get('/', (req, res) => {
res.render('h2');
});
you can see "hello PPL" when requesting the page. You can now also see that any additions that you make to about.pug are also visible.
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'd like to pass the name of a template file to my jade template and have it expand that template. I'm using node and express.
html
div(id="content")
extend #(content}
seems intuitive to me but it doesn't work. Is this possible and/or is there an alternative pattern to better achieve this?
After rethinking the pattern (I'm brand new to express and node), I realized a better solution. What I've done is taken the content (which was all static) and included it in block statements in multiple template files. I then serve those template files based on the route.
Say I have a layout page that has header and footer and multiple views: index, search, and getting started.
//layout.jade
html
head
block extra_headers
body
div(id="header")
div(id="content")
block content
div(id="footer")
//index.jade
html
block head
script(src="sss.js")
block content
| welcome to my home page
//results.jade
html
block head
script(src="search.js")
block content
| my search results
And so on with 'getting started'. My node code then looks like this:
app.get('/', function(res, req) {
return res.render('index'); // renders the index view.
});
If you don't know what jade is.
I am having problem with the template inheritance system.My file structure is like so
/views/
|-- layout.jade
/products/
|-- index.jade
|-- product.jade
/static/
/stylesheets/
|-- style.css
The problems is that when loading the product page which receives an id as param (localhost:3000/product/:id if not for the /id it would load just fine), although the layout still extends correctly it does not load the stylesheet properly (the path is broken). I am doing half of it right though, in the index page of products the stylesheet loads just fine.
Layout.jade
head
link(rel='stylesheet', href='stylesheets/style.css')
It's probably the relative path in your href. Digging around the express documentation, I'm finding that the most popular approach is to reference the stylesheet from the base of the site like this (notice the / preceding stylesheets):
link(rel='stylesheet','/stylesheets/style.css')
This has the benefit of being easy, and working across routes of multiple depths (/about, /about/me, etc). However, it has the negative of not supporting app directory depth. For example, if you wanted to host your app at: http://yourserver/yourapps/yourapp this would be a problem. I don't know if you care about this or not, most of the examples for express certainly don't :-)
However, if you want to do this the right way, there is one example on the express github site: blog. https://github.com/visionmedia/express/tree/master/examples/blog
The approach here is to use a middleware component to grab the base url, and stuff it in the locals passed down to the layout view. Here's what your HTML would look like:
!!! 5
html
head
title Blog
link(rel='stylesheet', href=base + '/style.css')
body
#container!= body
The important parts to check out if you require this approach are middleware/locals.js, app.js where the middleware component is wired up, and layout.jade where the base href is used.
Happy Coding!