node.js 实战——餐厅静态主页编写（express+node+ejs+bootstrap）
ejs页面
<!DOCTYPE html>
<html>
<head><title><%= title %></title><link rel='stylesheet' href='/stylesheets/style.css'/><link rel='stylesheet' href='/stylesheets/font-awesome.css'/><link rel='stylesheet' href='/stylesheets/fontello.css'/><!-- 本地 Bootstrap 引入方式 --><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/bootstrap/js/bootstrap.bundle.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
<div class="top-header"><div class="container"><div class="row"><div class="col-lg-6"></div><div class="col-lg-6"><div class="top-text"><div class="text-block "><i class="icon-phone-call"></i><span>400-800-123-456</span></div><div class="text-block "><i class="bi bi-clock"></i><span>Mo-Fr 11:00-10:00, Sa-Su 10:00-11:00</span></div></div></div></div></div>
</div>
<div class="header"><div class="container"><div class="row"><div class="col-lg-5"><div class="logo"><img src="./images/logo.png" alt="logo"></img></div></div><div class="col-lg-7 navigation "><div class="content"><div class="col-lg-2 menu">主页</div><div class="col-lg-2 menu">菜单</div><div class="col-lg-3 menu"><span>预约</span><div class="menu-item"><div class="title">预约须知</div><div class="title">直接预约</div></div></div><div class=" col-lg-3 menu">餐厅趣事</div><div class="col-lg-4 menu">注册/登陆</div></div></div></div></div>
</div>
<div class="hero-section" style=" background: url('<%=banner.img%>') no-repeat center right;"><div class=""><div class="container"><div class="row"><div class="col-lg-5"><div class="hero-caption"><h1 class="hero-title"><%=banner.displayName%></h1><p class="hero-text"><%=banner.displayTitle%></p></div></div></div></div></div>
</div><div class="space-medium"><div class="container"><div class="row"><div class="col-lg-12"><div class="section-title"><h1> 🧑🍳今日主厨</h1></div></div><div class="chef-section"><div class="row"><div class="col-lg-2"><div class="author-img mb40"><img src="./images/author.jpg" alt="author"></img></div></div><div class="col-lg-9"><div class="author-info"><div class="author-name ">Sarah Perkins</div><div class="author-mete mb40">助理主厨</div><div class="author-content mb40">Etiam posuere dictum liquam mollis sem atex venenatis mauris ultrices rmentum justoed porttitorsed mollis posuere dictum.</div></div></div></div></div></div></div>
</div><div class="space-medium bg-default"><div class="container"><div class="row"><div class="col-lg-12"><div class="section-title text-center"><h1 class="">明星菜单</h1><h5>主厨推荐 & 食客热评</h5></div></div><div class="col-lg-4"><div class="food-block mb40"><div class="food-img"><div class="img-hover"><img src="./images/service-1.jpg" ></img></div></div><div class="food-title">剁椒鱼头手工豆腐煲</div></div></div><div class="col-lg-4"><div class="food-block mb40"><div class="food-img"><div class="img-hover"><img src="./images/service-4.jpg" ></img></div></div><div class="food-title">剁椒鱼头手工豆腐煲</div></div></div><div class="col-lg-4"><div class="food-block mb40"><div class="food-img"><div class="img-hover"><img src="./images/service-3.jpg" ></img></div></div><div class="food-title">剁椒鱼头手工豆腐煲</div></div></div><div class="col-lg-4"><div class="food-block mb40"><div class="food-img"><div class="img-hover"><img src="./images/service-2.jpg" ></img></div></div><div class="food-title">剁椒鱼头手工豆腐煲</div></div></div></div></div>
</div><div class="space-medium "><div class="container"><div class="row"><div class="col-lg-12"><div class="section-title text-center"><h1 class="">食客评价</h1><h5>喜爱上我们餐厅的客人常说</h5></div></div><div class="col-lg-12"><div class="comment-area"><div class="comment-people"><div class="comment-author"><img src="./images/user1.jpg" alt="avatar" class="img-circle"/></div></div><div class="comment-content"><div class="time">2023-12-12</div><div class="content">Lorem ipsum dolor sit ameonsectetur adipiscing elitlentesque ut dui leonean commo lorem porttitor hendrerit orem ipsum dolor siectetur adipiscing elit.</div></div></div></div><div class="col-lg-12"><div class="comment-area"><div class="comment-content"><div class="time">2023-12-12</div><div class="content">Lorem ipsum dolor sit ameonsectetur adipiscing elitlentesque ut dui leonean commo lorem porttitor hendrerit orem ipsum dolor siectetur adipiscing elit.</div></div><div class="comment-people"><div class="comment-author"><img src="./images/user2.jpg" alt="avatar" class="img-circle"/></div></div></div></div></div></div>
</div></body>
</html>js 页面
var express = require('express');
var router = express.Router();/* GET home page. */
router.get('/', function(req, res, next) {let banner ={img: '../images/hero-img.jpg',displayName:'📢 芝士流心咸蛋黄虾球！',displayTitle:'今日厨师推荐'}res.render('index', { title: '订餐系统', banner });
});module.exports = router;效果图
