DEV Community

Code_Regina
Code_Regina

Posted on

|YelpCamp| YelpCamp: Adding Basic Styles

#html #css #webdev #javascript 
             -A new EJS Tool for Layouts 
             -Bootstrap 5 Boilerplate
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo JacksonTian / ejs-mate

Express 4.x layout, partial template functions for the EJS template engine.

ejs-mate

Status

npm version Node.js CI codecov

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
Enter fullscreen mode Exit fullscreen mode

(--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>
Enter fullscreen mode Exit fullscreen mode

And a layout, boilerplate.ejs:

<!DOCTYPE html>
<html>
  <head>
    <title>It's <%= who %></title>
  </head>
  <body>
    <section>
      <%- body -%>
    </section>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

When rendered by an Express 4.0 app:

var express = require('express'
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

within the terminal


npm i ejs-mate
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

boilerplate template


<body>
   <%- body %>

</body>
Enter fullscreen mode Exit fullscreen mode

the boilerplate template will target all the necessary pages.

Bootstrap 5 Boilerplate

In the boilerplate template is where the bootstrap 5 content will go.

https://getbootstrap.com/

Top comments (1)

Collapse
 
mnalevanko profile image
Michal Nalevanko •

In the boiler template, is body just a naming convention or is it required name of a code block?