HTML中EJS标签失效，服务器报错，布局渲染功能求助

问题根源 #

你代码里误用了非EJS原生的extends、block语法，EJS本身没有内置这类布局指令，这是导致服务器报错的核心原因。

方案一：用EJS原生include实现布局 #

先创建布局文件layouts/layout.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= pageTitle %></title>
</head>
<body>
    <%- include('../content') %>
</body>
</html>

再创建内容页面（比如index.ejs）：

<!-- 页面具体内容 -->
<h1>欢迎访问首页</h1>
<p>这是首页的内容</p>

Node.js端渲染逻辑：

app.get('/', (req, res) => {
  res.render('layouts/layout', {
    pageTitle: '首页'
  });
});

方案二：使用ejs-mate扩展支持布局语法 #

如果习惯用extends和block这类语法，可以借助ejs-mate扩展实现：

1. 安装依赖：

npm install ejs-mate

2. 在Node.js项目中配置引擎：

const express = require('express');
const app = express();
const ejsMate = require('ejs-mate');
const path = require('path');

app.engine('ejs', ejsMate);
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

3. 编写布局文件layouts/layout.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= block('title') %></title>
</head>
<body>
    <%- block('content') %>
</body>
</html>

4. 编写子页面（比如index.ejs）：

<% layout('layouts/layout') %>

<% block('title', '首页') %>

<% block('content') %>
<h1>欢迎访问首页</h1>
<p>这是首页的内容</p>
<% endblock %>

额外注意事项 #

• 检查文件路径是否匹配项目结构，比如layouts文件夹是否在视图目录下
• 重启编辑器清除缓存，VS Code的黄色提示可能是缓存误报
• 确认Node.js端已正确设置视图目录路径

内容的提问来源于stack exchange，提问作者EC1