reading-notes

Components

Source: EJS Partials

Source: Intro to EJS Partials

EJS Partials

How To

  1. Create /views/partials folder
  2. Create relevant files
  3. Include them in .ejs pages
    • <%- include( PARTIAL_FILE ) %>

Example

In the Partials Folder

views/partials/navbar.ejs

<!-- views/partials/navbar.ejs -->
    <div class="header clearfix">
        <nav>
            <ul class="nav nav-pills pull-right">
                <li role="presentation"><a href="/">Home</a></li>
            </ul>
            <h3 class="text-muted">Node.js Blog</h3>
        </nav>
    </div>

views/partials/footer.ejs

<!-- views/partials/footer.ejs -->
    <footer class="footer">
        <p>© 90210 Lawyer Stuff.</p>
    </footer>

Include the Partial

views/home.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Node.js Blog</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
        body {
            padding-top: 20px;
            padding-bottom: 20px;
        }
        .jumbotron {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <%- include('partials/navbar') %>
        <div class="jumbotron">
            <h1>All about Node</h1>
            <p class="lead">Check out our articles below!</p>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="list-group">
                    <!-- loop over blog posts and render them -->
                    LIST_OF_POSTS
                </div>
            </div>
        </div>
        <%- include('partials/footer') %>
    </div>
</body>
</html>