I'm disabling this feature because I don't know what it is:
app.set('view options', { layout: false });
But It sounds interesting so I would like to know why was this designed, so I would like to know what are the usage cases and why is this good :)
If you read the View Rendering section it tells you about layouts.
It's a way to apply generic HTML wrappers to all your pages.
For example Reference
!!! 5
html
head
title Blog
link(rel='stylesheet', href=base + '/style.css')
body
#container!= body
Is a layout for an example from the express folder. This will be applied to all pages and your actual view that your rendering will be rendered in != body
Related
I have two jade template in the same folder,just like:
|__layout.jade
|__content.jade
and the layout.jade is the parent template, the content.jade will inherit from it: so in the layout.jade:
doctype 5
html(lang="en")
head
title= title
body
block content
in the content.jade
extends layout
block content
h1 this is frome nested template
however, when I run it, the inherit doesn't work, it only show the parent template's content
so what't wrong with my code?
Make sure you include the keyword "append" in content.jade.
extends layout
block append content
h1 this is from nested template
More on this here.
This might be a total red herring, but I noticed your two files seem to have inconsistent indentation (at least as pasted in above).
Does it work if you correct this?
I had a similar problem and tried various answers for node.js on stack-overflow/Jade documentation.
In your app.js file check the following..
1) Check that the view engine is set to jade (now renamed pug):
app.set("view engine", "jade");
2) Set the views folder (i.e. where you've saved your template/views files):
app.set("views", __dirname + "/views");
3) Set layout to false:
app.set('view options', { layout: false });
4) If your using express, check that you are rendering the correct file
app.get("/", function(req, res){
res.render("contents.jade");
});
Hope that helps
I tested your code, it is ok, would you like to try a newer version of node.js and jade?
Currently all pages are rendered from a views/layout.mustache file and a page-specific views/page.mustache template
I want to use an alternate layout.mustache and/or skip the layout.mustache all-together when rendering a certain view within my application. What is the ideal way to go about doing this?
Here's a snippet of my app.configure:
app.configure(function(){
...
app.set('views', __dirname + '/views');
app.register(".mustache", require('stache'));
...
});
Thanks
Which version of express are you using? With v3.0 the concept of layouts was removed.
V3.0 introduces the concept of blocks. I don't use mustache but an example with jade looks like this:
// my-template.jade
extends my-layout
block head
script(src="myfile.js")
block content
h1 My page
and
// my-layout.jade
doctype 5
html
head
title My title
block head
body
#content
block content
With extends you can choose whatever "parent" layout you want. An overview of supported template engines is in the express wiki.
In express versions before 3.0 you could specify the layout when rendering
res.render('index', {
title : 'Page with distinct layout',
layout : 'layout.mustache'
});
or disable layouts for certain views
res.render('start', {
title : 'Page without layout',
layout : false
});
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.
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!
I've got a layout - navigation menu. In express tutorials theres only old-school pages loading. whole old page is thrown away and a new one is downloaded with all layouts,views and partial views. And i want navigation menu to stay. So how can i do that?
If i'm maybe getting smth wrong with this web pages architecture please guide me.
As #drachenstern said, you want to render only partial HTML fragments, not whole documents including the layout. You can tell express to skip the layout using:
res.render('sometemplate', {layout: false});
If you want to look for Ajax requests as distinct from full-page browser loads, use the req.xhr flag as documented here
Thus you might even be able to do
res.render('sometemplate', {layout: !req.xhr});
You can also use res.partial() which is specifically for rendering partials.
Here is a sample of its usage, where 'browse.jade' is name of the template:
exports.browse = function(req, res){
var Contact = mongoose.model('Contact');
Contact.where({}).asc('surname', 'given_name', 'org').run(function(err, results) {
res.partial('browse', {
locals: { data: results }
});
});
};