1_adding basic styles

2023-12-30 19:05:22

refer to: https://www.udemy.com/course/the-web-developer-bootcamp

(a new ejs tool for layout: https://github.com/JacksonTian/ejs-mate)

  1. npm i ejs-mate
  2. const ejsMate = require('ejs-mate');
  3. app.engine('ejs', ejsMate);
  4. touch views/layouts/boilerplate.ejs
  5. 1_adding basic styles
  6. 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

1_adding basic styles

<!-- 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, &copy to use the copyright sign -->
<footer class="footer bg-dark py-3 mt-auto">
    <div class="container">
        <span class="text-muted">&copy; 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>



 


 

上一篇：October Challenge 2020 Division 1

下一篇：AGC033F Adding Edges