refer to: https://www.udemy.com/course/the-web-developer-bootcamp/
使用<%- include(' ') %>来减少代码的重复赘余，新建一个partials文件夹，里面包含需要重复使用的代码，然后在需要用到partials里的文件都地方添加include。
head.ejs <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> home </title> <link rel="stylesheet" href="/css/bootstrap.min.css"> <script src="/js/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> </head>
navbar.ejs <nav class="navbar navbar-expand-lg navbar-light" style="background-color: pink;"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="/">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="/random">random</a> </li> <li class="nav-item"> <a class="nav-link" href="/r/soccer">soccer</a> </li> <li class="nav-item"> <a class="nav-link " href="/r/chickens" tabindex="-1" aria-disabled="true">chickens</a> </li> <li class="nav-item"> <a class="nav-link " href="/cats" tabindex="-1" aria-disabled="true">cats</a> </li> </ul> </div> </div> </nav>
cats.ejs <!DOCTYPE html> <html lang="en"> <%- include('partials/head') %> <body> <%- include('partials/navbar')%> <h1>My baby cats</h1> <%for(let cat of cats){%> <li> <%=cat%> </li> <%}%> </body> </html>
index.ejs const express = require('express'); const app = express(); const path = require('path'); const redditData = require('./data.json'); app.use(express.static(path.join(__dirname, 'public'))) // tell my app to use express, the teacher is ejs // we don't need to require ejs, just set the engine view to ejs app.set('view engine', 'ejs') app.set('views', path.join(__dirname, '/views')) //__dirname is where index.js is located app.get('/', (req, res) => { res.render('home.ejs') }) app.get('/random', (req, res) => { const num = Math.floor(Math.random() * 10) + 1 res.render('random.ejs', { random: num }) }) // app.get('/r/:subreddit', (req, res) => { // const { subreddit } = req.params; // res.render('subreddit', { subreddit }) // }) app.get('/cats', (req, res) => { const cats = ['sweety', 'candy', 'cutey', 'honey']; res.render('cats.ejs', { cats }) }) app.get('/r/:subreddit', (req, res) => { const { subreddit } = req.params; const data = redditData[subreddit]; if (data) { res.render('subreddit', { ...data }); } else { res.render('notfound', { subreddit }) } }) app.listen(3000, () => { console.log("Listening On Port 3000") })