express脚手架项目可以把views下的ejs格式文件删除,重新创建html文件吗
时间: 2024-06-11 15:10:21 浏览: 154
可以,但需要进行一些配置。
1. 首先需要安装`ejs-mate`依赖:
```
npm install ejs-mate --save
```
2. 在项目根目录下创建一个`views`文件夹,并在其中创建一个`layout.html`文件,用于定义页面的整体布局。例如:
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><%= title %></title>
<!-- 其他头部信息 -->
</head>
<body>
<header>
<!-- 头部信息 -->
</header>
<main>
<%= body %>
</main>
<footer>
<!-- 底部信息 -->
</footer>
</body>
</html>
```
其中,`<%= title %>`和`<%= body %>`是`ejs`的模板语法,用于动态渲染页面的标题和内容。
3. 在`app.js`中进行配置:
```javascript
const express = require('express');
const path = require('path');
const ejsMate = require('ejs-mate');
const app = express();
// 使用ejs-mate作为模板引擎
app.engine('html', ejsMate);
app.set('view engine', 'html');
// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
// 路由配置
app.get('/', (req, res) => {
res.render('index', { title: '首页' });
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
注意,这里需要将`ejs-mate`作为模板引擎,并将模板文件的后缀名设置为`.html`。在渲染页面时,需要使用`.html`后缀名。例如:
```javascript
app.get('/', (req, res) => {
res.render('index.html', { title: '首页' });
});
```
4. 在`views`文件夹中创建一个`index.html`文件,作为首页的模板文件。例如:
```html
<!-- 继承layout.html文件 -->
<% layout('layout') %>
<!-- 定义页面标题 -->
<% title = '首页' %>
<!-- 定义页面内容 -->
<h1>欢迎来到我的网站!</h1>
```
在这个文件中,使用了`layout('layout')`语句来继承`layout.html`文件,然后设置页面的标题和内容。注意,这里的语法和`ejs`略有不同,但是也非常类似。
5. 启动服务器,访问`http://localhost:3000/`,应该能够看到渲染出来的页面。
阅读全文