What is the layout `yield` method in ejs?
I guess I can help you out rigth here. I will give you some explanation.
The layout.ejs is truely the layout u need to have a HTML site, built out of snippets of code :).
My layout.ejs looks like:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head> <title><%- title %></title> <link rel="stylesheet" type="text/css" href="stylesheets/style.css"></head><body> <!-- total container --> <header> <%- partial('topic.ejs') %> <%- body %> </header></body></html>i will give you an explanation of the code. The "header"-tag is my wrapper(800x600) with all my content. With the "partial"-command you can load snippets of sourcecode. In my examle "topic.ejs" is my topic-design with images and colors which should stay on every page (you could say it's static).
Sourcecode of topic.ejs: (it is really just html-tags, starts with a div and ends with one :P)
<!-- frame of topic --><div id="topic"> ...</div> <!-- end of "topic" -->Now every page has implemented my topic.ejs (if you follow the first sourcecode, you can see it):
"<%- partial('topic.ejs') %>".
This means: Hey Layout! Every page has this partial of code implemented, got it?! -Good.
But what about the "<%- body %>"-command?It is easy aswell to understand. The app.js will care about what <%- body %> exactly will do. But how It does, i will explain it later on.
As you should know, the first page of a HTML-page is named "index.html". So right here, we should take our index.html too and compile it to "index.ejs". Use the same procedure as for "topic.ejs". Reduce the sourcecode to the html-tags like:
<!-- frame of MetaContent --><div id="metacontent"> ...</div> <!-- end of "MetaContent" -->
From here you should take a look at my app.js:
app.get('/xyz', function(req, res){ res.render('index.ejs', { title: 'My Site' });});Explanation: xyz is a random name. Choose one yourself. This name NOW is your URL. Don't get it? Look example below. After starting your server through the execution of app.js, your server runs on an especially port(default 3000 i guess). Your usual URL of index.html should be "localhost:3000/index.html". Type it in the address bar of your browser. Your site should be shown. Now try this:
localhost:PORT/xyz
In the app.get-methode shown before, you explicit say your app.js: Behind the "/xyz"-path there stands the "index.ejs"-file. But what does that exactly means?
It means you now can type "locallhost:PORT/xyz into your address bar of your browser and the content of your primal index.html site will be shown, but what you will see is the generated content of layout.ejs. Magic!
The logic behind: (if you take a look at the layout.ejs again)
With the <%- body %> command you load into your layout just a snippet of sourcecode. Just do this: After running your site, right-click it and let you show the source-code. It should be a usual HTML-sourcecode. In real it's the sourcecode of your layout.ejs, that took some snippets of your code.
All in one:
With the <%- body %> command in your layout.ejs, you can load in a snippet of code. <%- body %> = "index.ejs", "contact.ejs", and so on. For every .ejs file, you need to extend the app.js to its "get"-methode(example follows). If you have more sites (of course you just do not have one site), you need to put the snippet of code for the new site into a .ejs file (e.g.: contact.html => contact.ejs). You also need to extend your app.js file to this:
app.get('/contact', function(req, res){ res.render('contact.ejs', { title: 'My Site' }); });OR
app.get('/xyz/contact', function(req, res){ res.render('contact.ejs', { title: 'My Site' }); });
And do not forget to change links in the .ejs-files:onclick="window.location.replace('contact.html')" becomes to the name you chose in the app.get-methode. For example it changes to onclick="window.location.replace('contact')".
onclick="window.location.replace('contact.html')" BECOMES TO onclick="window.location.replace('contact')"
You just do link to the URL name, not to the file. App.js will handle this now for you :)