I'm making a website, I'm using node and express on the back end, pug on the frontend.
My website is split up into few views via pug.
Layout, I have as the highest view, all of the views "inherits" from there.
So layout ends with
block content
and everything after that starts with:
extends layout
block content
and then rest of the pug code for that view.
I have one view, that is map which inherits from layout but then also has children on it's own.
So the hierarchy is
layout --> map --> content
Locally I have no problem rendering as follows:
router.get('/', function(req, res, next) {
res.render('content');
});
and having the map displaying as well.
When uploading on Heroku however, heroku displays content AND layoutbut not the map!
Even if content starts with
extends map
block content
Does anyone know why heroku does that?
try renaming the content of the map page as mapcontent or similar.
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'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
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.
});
I have a small express site written for node. I'm using Jade for layouts, and trying to get a handle on the new extends/block bits. When I use the standard layout/child view pattern list here, everything works great:
https://github.com/visionmedia/express/blob/master/examples/jade/views/layout.jade
I want to get fancy and use blocks to stuff custom html into specific parts of the master layout. So I transitioned over to something that looks more like this:
https://github.com/visionmedia/jade/blob/master/examples/extend-layout.jade
https://github.com/visionmedia/jade/blob/master/examples/extend.jade
Using the exact code in the extend-layout example above, my pages will always render the extend-layout.jade part, but never the content inside. Anything inside of a block never seems to get rendered. I've given this a try, but it doesn't help:
https://github.com/visionmedia/jade/issues/377
I'm running node 0.6.2, express 0.2.5, and jade 0.18. Any takers?
The layout config entry is deprecated now anyway with v3 of Express.
You can only use the block/extends style.
So I've figured out what was up. I was manually specifying the layout to use in express - I was setting it to the correct layout, but removing that line solved the problem. Example (for others who run into this):
exports.index = function(req, res){
res.render('index', { title: 'Express' }) // this works!
res.render('index', { title: 'Express', layout: 'layout' }) // this doesn't work
};
I would have expected a different behavior - including an explicit layout like this simply caused the child view to not render within the master layout.
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