Components
LINKS
EJS Partials
Partials come in handy when you want to reuse the same HTML across multiple views. Think of partials as functions, they make large websites easier to maintain as you don’t have to go and change a piece of text in every page it appears in. Instead, you define that reusable bundle of code in a file andinclude it wherever you need it.
views/partials —-> create 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>
Once you ahve thos made then you can use them in other EJS files
<!-- 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>
Using <%- include('partials/navbar') %> to tell veiws/home.ejs to use that as the nav bar template