基础布局
1，准备工作：
- ejs-mate
-Express 4.x layout, partial and block template functions for the EJS template engine.
npm install ejs-mate
- app.js:
const ejsMate = require('ejs-mate');
app.engine('ejs',ejsMate);
- views/layouts/boilerplate.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOILERPLATE!</title>
</head>
<body>
<h1>BEFORE</h1>
<%- body %>
<!-- body 相当于其他ejs页面的全部代码 -->
<h1>AFTER</h1>
</body>
</html>
- 比如在 index.ejs中，删除头尾（boilerplate中已经有了）在第一行 ➕ <% layout(‘layouts/boilerplate’) %> ：
<% layout('layouts/boilerplate') %>
<!-- ejs-mate语法 views为主目录 可以直接调取 -->
<h1>All CampGrounds</h1>
<div>
<a href="/campgrounds/new">Add Campground</a>
</div>
<ul>
<% for(let campground of campgrounds) { %>
<li></li><a href="/campgrounds/<%=campground._id%>">
<%= campground.title %>
</a> </li>
<% } %>
</ul>
2，Bootstrap+增加导航栏和页脚
- boilerplate.ejs 中：
1，写入Bootstrap : link和script
2, <%- include(‘…/partials/navbar’) %> / footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YelpCamp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body class="d-flex flex-column vh-100">
<!-- display flex -->
<%- include('../partials/navbar') %>
<!-- include是ejs的语法 如果在views中有两个文件夹 则需要../ -->
<main class="container mt-5">
<!-- mt-5 : margin-top:5 -->
<%- body %>
</main>
<%- include('../partials/footer') %>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
</body>
</html>
- footer / navbar.ejs:
body class=“d-flex flex-column vh-100” 和
mt-auto 可以让footer一直在页面最下面
<footer class="footer bg-dark py-3 mt-auto">
<!-- py : padding y轴（上下）; 如果”margin-top“或”margin-bottom“为”auto“，则其使用值为0 -->
<div class="container">
<span class="text-muted">© YelpCamp 2022</span>
</div>
</footer>
nav class="navbar sticky-top : 让navbar粘在顶端
- 加入bootstrap样式
eg: show.ejs:
<% layout('layouts/boilerplate') %>
<div class="row">
<div class="col-6 offset-3">
<!-- 居中 -->
<div class="card mb-3">
<img src="<%= campground.image %>" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title"><%= campground.title %></h5>
<p class="card-text"><%= campground.description %></p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item text-muted"><%= campground.location %></li>
<li class="list-group-item">$<%= campground.price%> /night</li>
</ul>
<div class="card-body">
<a class="card-link btn btn-info" href="/campgrounds/<%=campground._id%>/edit">Edit</a>
<form class="d-inline" action="/campgrounds/<%=campground._id%>?_method=DELETE" method="post">
<button class="btn btn-danger">Delete</button>
</form>
</div>
<div class="card-footer text-muted">
this is a footer
</div>
</div>
</div>
</div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
