To keep our template code reusable, we can introduce partials. We will essentially create two partials given here:
- header.ejs: to contain all the markup common to our application's header
- footer.ejs: similarly, to contain all common footer specific markup
Both partials will be placed in a partials folder within the views folder. We can create both files and place the required contents in them. For the header file, use the code given:
<!-- ./views/partials/header.ejs -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome - KoaBlog</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title"><a href="/">KoaBlog</a></h1>
<p class="subtitle">Blog built with Koa!</p>
</div>
</div>
We should also insert the following code block into the footer.ejs file:
<!-- ./views/partials/footer.ejs -->
</div>
</section>
</body>
</html>
Next, we can include them in the index.ejs file using the include helper function available within ejs as shown:
<!-- ./views/index.ejs -->
<%- include( 'partials/header.ejs' ) -%>
<%- include( 'partials/footer.ejs' ) -%>
Now that we have our views implemented, we can go ahead to set up authentication on our app to protect some of the views that we will create.