ejs页面
html
<!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/[email protected]/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 页面
javascript
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;效果图
