其他分享
首页 > 其他分享> > 1_adding basic styles

1_adding basic styles

作者:互联网

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. 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, &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>

 

标签:styles,adding,boilerplate,views,layouts,mate,https,basic,ejs
来源: https://www.cnblogs.com/LilyLiya/p/14401426.html