I am having some problem with the EJS layout file on Express 3. Express just can't seem to find the layout for rendering. It just skips the layout.ejs totally which means that the output misses out of all the stylesheets and such.
res.render('login', { user: req.user });
and the configuration part,
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
and in the layout.ejs I have added the body tag,
<%- body %>
I have been trying out Jade before and it worked just fine, so the problem is just EJS.
Thanks in advance.
https://github.com/visionmedia/ejs/issues/48
I am uncertain whether the above has been updated but it suggests that layout functionality has been deprecated in express 3.
As a result, I have been using ejs-locals to implement equivalent functionality:
https://github.com/RandomEtc/ejs-locals
Related
I am learning to use handlebars for templates in my website.
I am using node.js so I have used the express-handlebars module as it seems popular and has a lot of support.
I set up some basic config as so..
var exphbs = require('express-handlebars');
app.set('views', path.join(__dirname, 'views'));
app.engine('handlebars', exphbs({
defaultLayout: 'layout',
}));
app.set('view engine', 'handlebars');
My understanding is that my views in handlebars (ie my content pages) are templates in handlebars and under the hood I think these templates are being compiled on my behalf so that I can concentrate on using them.
Now, I can pass in data to the template from my node express router and then access and render data in the template using the handlebars notation {{ variable }}.
That's great. But....I want to declare variables on the client using javascript, probably as the result of getting some data back from an Ajax call that I want to enter. Unfortunately this never seems to work. I cannot figure out how I can access a local variable in my template. There is surely a way to do it?
the #with block helper looked promising but unfortunately it didn't do what I expected.
Here is a snippet of one of my content pages with a couple of attempts to declare data locally and render its value.
<div>
<script>let test = {
text: 'this is my example text'
};
</script>
<div>
{{#with test}}
{{text}}
{{/with}}
</div>
<div>
{{test.text}}
</div>
</div>
I have read a lot of articles and watched a lot of videos and I just cannot find anywhere where somebody uses the 'express-handlebars' module and then renders data defined locally.
I am probably missing something obvious but I have been struggling for a while now.
Does anybody have any idea how I can do this please?
thanks in advance.
Okay...it looks like client-side templateing has to be configured separately using webpack. I suppose this makes sense because express handlebars compiles the templates (which just resolves to plain javascript that takes the variables I want to render and wraps in the html needed) and I haven't been able to find any templates on my client through the inspector in the browser. I haven't had chance to try it yet, but this looks promising : http://initialdigital.com/sharing-handlebars-templates-on-both-server-client-in-node-js-express-with-webpack/
I'm currently working on a simple CMS. I have some basic layout set up for each page like that:
app.engine('handlebars', exphbs({defaultLayout:'layout'}));
app.set('view engine', 'handlebars');
I have some pages and I would like to setup sublayout for those pages.
For example.
Each page need to have root layout but gallery/all, gallery/new etc. need its own sublayout. How can I do it?
solution :
I found a solution for this. Instead of using layout use handlebar partials
You can use other layout: 'gallery_all_layout' in router:
res.render('gallery/all', {
pageTitle: 'Gallery List',
layout: 'gallery_all_layout'; //place it the same folder defaultLayout 'layout'
...
});
I'm using the express skelton to develope an app. I don't know how to use jade language, so I want to convert this files to html, I did that, but my problem now it's I have 2 lines the aim js : app.js that have to change
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
Please can you help me to change this lines, thank you.
You can use EJS(http://embeddedjs.com/) as a view engine and use the html (in form of ejs files)
`app.set('view engine', 'ejs');`
and place the .ejs files containing the html code within the view folder.
You'll have to update the dependencies in the package.json as well
"ejs": ">= 0.0.0"
For listing static html pages, use this property in express
`app.use(express.static(path.join(__dirname, 'public')));`
and place your .html files within the public folder.
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?
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>