Node JS - Adding More pages(ejs templates) using routers

Question

I'm new to Node/EJS. So Need your clarification on creating new routes. I can easily integrate static html files using EJS template system in Node js. But routing(inserting another templates using route) inside the body section cannot be achieved by me.

My Code : views/index.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <% include ./templates/head.ejs %>
 </head>
  <body class="skin-blue">
      <div class="wrapper">
          <% include ./templates/header.ejs %> 
                <section class="content">
                <div class="content-section container">
                    <div class="row">
                           <% include ./contents/aboutus.ejs %> //aboutus page is rendering      
                    </div>
                </div>
            </section>
           <% include ./templates/footer.ejs %>      
      </div>
   <% include ./contents/help-popup.ejs %> 
   <% include ./templates/jsfiles.ejs %> 
  </body>
</html>

Here,Obviously the aboutus.ejs is working properly inside the body part. Now I would like to call careers.ejs by clicking on link inside the aboutus.ejs. Header and Footer should not change. How to add & render careers.ejs by routing?

Your question is, how to render a specific part of the page using ejs, like for instance, the content only? — rmjoia
As far as I know. You can't. ejs doesn't support layouts, at least with express 4. I've been also looking for that... — rmjoia
Oh Ok @rmjoia.. Is there any template system like ejs (should support layout ) ? I dont like jade.. — EverGreen
I'm also quite new at this, but I will try to get that information and let you know. Only the ejs page I know that there is some information about Ajax render though. But I never used it — rmjoia

WallEE WallEE · Accepted Answer · 2016-02-16T07:27:23

I think you are expecting the layout system like JADE. This can be achieved by the npm package EJS-Locals. In which Instead of calling ejs file, you can give the body part of HTML.

Ex : Boilerplate

<!DOCTYPE html>
<html>
  <head>
    <title>It's <%=who%></title>
    <%-scripts%>
    <%-stylesheets%>
  </head>
  <body>
    <header>
      <%-blocks.header%>
    </header>
    <section>
      <%-body -%>
    </section>
    <footer>
      <%-blocks.footer%>
    </footer>
  </body>
</html>

aboutus.ejs:

<% layout('boilerplate') -%>
 <% script('foo.js') -%>
 <% stylesheet('foo.css') -%>
 <h1>I am the <%=what%> list </h1>
 <% block('header', "<p>I'm in the header.</p>") -%>
 <% block('footer', "<p>I'm in the footer.</p>") -%>

career.ejs:

<% layout('boilerplate') -%>
<% script('foo.js') -%>
<% stylesheet('foo.css') -%>
<h1>I am <%=what%> Programmer in USA  </h1>
<% block('header', "<p>I'm in the header.</p>") -%>
<% block('footer', "<p>I'm in the footer.</p>") -%>

So, In this You can include the other templates using EJS-Locals.

Node JS - Adding More pages(ejs templates) using routers

1 Answers