refer to: https://www.udemy.com/course/the-web-developer-bootcamp
(a new ejs tool for layout: https://github.com/JacksonTian/ejs-mate)
- npm i ejs-mate
-
const ejsMate = require('ejs-mate');
-
app.engine('ejs', ejsMate);
- touch views/layouts/boilerplate.ejs
- for edit.ejs, index.ejs, new.ejs, show.ejs, use "<% layout('layouts/boilerplate') %>"代替html整个框架
views/layouts/boilerplate.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>boilerplate</title> </head> <body> <%- body %> </body> </html>
show.ejs
<% layout('layouts/boilerplate') %> <h1> <%=campground.title%> </h1> <h2> <%=campground.location%> </h2> <p> <a href="/campgrounds/<%=campground._id%>/edit">Edit</a> </p> <p> <form action="/campgrounds/<%=campground._id%>?_method=DELETE" method="POST"> <button>delete</button> </form> </p> <footer> <a href="/campgrounds">All</a> </footer> <!-- a link to return to the all campgrounds page -->
Update the views/layouts/boilerplate.ejs
views/layouts/boilerplate.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>boilerplate</title> <!-- for css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> </head> <body> <main class="container"> <%- body %> </main> <!-- for js --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script> </body> </html>
Navbar partial: views/partials/navbar.ejs
<!-- change to navbar-dark bg-dark, use sticky-top --> <nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">YelpCamp</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link" href="/">Home</a> <a class="nav-link" href="/campgrounds">Campground</a> <a class="nav-link" href="/campgrounds/new">New</a> </div> </div> </div> </nav>
include navbar in views/layouts/boilerplate.ejs:
<%- include('../partials/navbar') %>
views/layouts/boilerplate.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>boilerplate</title> <!-- for css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> </head> <body> <%- include('../partials/navbar') %> <!-- add margin on the top --> <main class="container mt-5"> <%- body %> </main> <!-- for js --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script> </body> </html>
Footer Partial
footer.ejs
<!-- mt-auto to fix the footer at the bottom, © to use the copyright sign --> <footer class="footer bg-dark py-3 mt-auto"> <div class="container"> <span class="text-muted">© YelpCamp 2021</span> </div> </footer>
views/layouts/boilerplate.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YelpCamp</title> <!-- for css --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> </head> <!-- use flex column to make the footer fixed at the bottom --> <body class="d-flex flex-column vh-100"> <%- include('../partials/navbar') %> <!-- add margin on the top --> <main class="container mt-5"> <%- body %> </main> <%- include('../partials/footer') %> <!-- for js --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script> </body> </html>