要解决“不阅读 CSS - Express ejs 布局”的问题,可以采取以下步骤:
安装 Express 和 ejs:
npm install express ejs
创建一个 Express 应用并设置模板引擎为 ejs:
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
创建一个 ejs 模板文件,命名为 layout.ejs
,并定义基本的 HTML 结构,可以包含头部、尾部和主体内容部分:
My Website
Welcome to My Website
<%- body %>
创建一个具体页面的 ejs 文件,例如 home.ejs
,并继承 layout.ejs
,定义该页面的内容:
<%- include('layout') %>
<% block('title') %>Home<% endblock %>
<% block('content') %>
Welcome to the Home Page
This is the content of the home page.
<% endblock %>
创建一个 CSS 文件,例如 style.css
,并在其中定义样式:
/* style.css */
body {
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
在 Express 应用中设置静态文件目录,将 CSS 文件所在的文件夹设置为静态文件目录:
app.use(express.static('public'));
在 Express 应用中设置路由,将 home.ejs
渲染为响应:
app.get('/', (req, res) => {
res.render('home');
});
启动 Express 应用:
app.listen(3000, () => {
console.log('Server started on port 3000');
});
现在,当访问 http://localhost:3000/
,就会显示包含 CSS 样式的 Express ejs 布局页面了。