-A new EJS Tool for Layouts
-Bootstrap 5 Boilerplate
A new EJS Tool for Layouts
The layout is the focus within this section. The goal is to have the ability to include scripts, stylesheets and assets on every single page, without having to duplicate the code.
ejs-mate creates reusable code that will meet our goal to reduce duplicating code.
JacksonTian
/
ejs-mate
Express 4.x layout, partial template functions for the EJS template engine.
ejs-mate
Status
About
Express 4.x layout, partial and block template functions for the EJS template engine.
Previously also offered include but you should use EJS 1.0.x's own directive for that now.
Installation
$ npm install ejs-mate --save
(--save automatically writes to your package.json file, tell your friends)
Usage
Run node app.js from examples and open localhost:3000 to see a working example.
Given a template, index.ejs:
<% layout('boilerplate') -%>
<h1>I am the <%= what %> template</h1>
And a layout, boilerplate.ejs:
<!DOCTYPE html>
<html>
<head>
<title>It's <%= who %></title>
</head>
<body>
<section>
<%- body -%>
</section>
</body>
</html>
When rendered by an Express 4.0 app:
var express = require('express'…within the terminal
npm i ejs-mate
Layout is going to allow us to define some boilerplates where we can have code that we insert in between some content.
<section>
<%- body -%>
</section>
The body is important for adding content.
Create a layout folder to put the basic boilerplate template in.
updated index file
<% layout('../layout/boilerplate')%>
<h1>All Campgrounds</h1>
<div>
<a href="/campgrounds/new">Add Campground</a>
</div>
<ul>
<% for (let campground of campgrounds){%>
<li><a href="/campgrounds/<%= campground._id %>"<%= campground.title <% }%>
</ul>
boilerplate template
<body>
<%- body %>
</body>
the boilerplate template will target all the necessary pages.
Bootstrap 5 Boilerplate
In the boilerplate template is where the bootstrap 5 content will go.
Top comments (1)
In the boiler template, is
bodyjust a naming convention or is it required name of a code block?