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?
Related
If I'm using Handlebars as my templating engine with Express 4, it seems like there is only the option to specify a single layout template to use for all your views:
app.engine('hbs', expressHbs({extname:'hbs', defaultLayout:'layout.hbs'}));
What if your app needs multiple layouts? What if viewA.hbs uses one layout and viewB.hbs needs a different layout?
As I'm learning nodejs, I'm coming from a PHP Laravel background where the Blade templating engine has you specify which layout to use at the top of each view file. It makes it really simple to switch between layout templates for any given view.
You should be able to pass in the layout from your route/controller when you call the render method.
router.get('/', function(req, res) {
res.render('home', {layout: 'viewBLayout.hbs'});
});
I am pretty sure jade will let you switch layouts from inside the template but I don't know if you can do that with handlebars.
If you use express-hbs, you can specify a layout in the template with a comment like:
{{!< layout}}
Alternatively, you can try exphbs. It also supports layout comments and multiple layouts can be nested. (Disclaimer: I wrote it.)
make sure you first make two files named "main.handlebars" and "backend.handlebars" in /layouts directory:
Try this code for two routes if you want for example
router.get('/', function(req, res) {
res.render('home', {layout: 'main'});
});
router.get('/backend', function(req, res) {
res.render('home', {layout: 'backend'});
});
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 put my ejs template file in views folder like:
views
|
|--foo.html
|
|--layout.html
so I config my ejs template:
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
I render my foo template by this:
res.render('foo.html', {title: 'test'});
I want use layout.html as the master layout template, I also add <%- body%> tag in layout.html, but is doesn't work, what I saw is only return the ended foo.html.
Why the layout.html can't be the master layout?Or how can I set it to the master layout?
Ahah you just got tricked by Express 3 change in layout management.
The official example: https://github.com/visionmedia/express/tree/master/examples/ejs
Has not been updated.
In Jade you now have to use blocks and extend the layout.
http://www.devthought.com/code/use-jade-blocks-not-layouts/
Try to use ejs-locals then you can do this in a login.ejs file:
<% layout('layout') -%>
<form></form>
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
I setup node and express then integrated the mustache.js template by following the instructions on this page:
http://bitdrift.com/post/2376383378/using-mustache-templates-in-express
So far so good, except I'm having a lot of trouble trying to setup mustache.js to have the same functionality as Jade's "layout". I'm basically trying to setup 1 master file to serve as a shell for my other pages similar to extending a template with Django.
Ex. The layout file could have this:
[html]
[title]my title[/title]
[body]{{content}}[/body]
[/html]
Where {{content}} gets replaced with the contents of a file which I would specify somehow in the route for that page.
I just have no idea how to set this up with express because I'm still a huge newbie with it and the way it's setup with Jade is automagical which seems to be specific to Jade only.
With Jade you just need to make a "layout.jade" file and have something like this as your route:
app.get('/', function(req, res) { res.render('home', { title: 'My home page' }); });
Then it magically adds the contents of home.jade into your layout.jade file wherever you specified the body!= body tag.
So yeah, how can I set something like that up with Mustache? If you know the answer please explain it step by step.
You could write a stache renderer plugin for docpad