Alex Rivera | Logout

What is the layout `yield` method in ejs?

Asked 2010-10-15T14:28:44.733
26

I'm just starting with node.js + express + ejs. I can't find anywhere how to pull in the requested ejs file to the layout file.

I know full well that yield is not the right thing here.

e.g.

layout.ejs

<html>
<head><title>EJS Layout</title></head>
<body>
    <%= yield %>
</body>
</html>

index.ejs

<p>Hi</p>
Edit
Report

1 Answer

12

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
answered 2012-05-31T12:00:46.057

Your Answer