Nodejs中include footer.ejs和include header.ejs没有显示在主页上。怎么回事？

Nodejs中include footer.ejs和include header.ejs没有显示在主页上。怎么回事？

使用了<% include footer%> <%include header%>

3 回复

Node.js 中 include footer.ejs 和 include header.ejs 没有显示在主页上。怎么回事？

在使用 EJS (Embedded JavaScript) 模板引擎时，有时会遇到 include 指令无法正确加载模板文件的问题。这通常是因为路径设置不正确或者 EJS 的配置问题。下面我们将详细探讨这个问题，并提供一些可能的解决方案。

示例代码

首先，我们假设你有一个基本的 Node.js 应用结构，如下所示：

project/
├── app.js
├── views/
│   ├── index.ejs
│   ├── header.ejs
│   └── footer.ejs
└── package.json

app.js 文件

const express = require('express');
const app = express();
const path = require('path');

// 设置视图引擎为 EJS
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 路由
app.get('/', (req, res) => {
    res.render('index');
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

index.ejs 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
</head>
<body>
    <% include ./header %>
    <h1>Welcome to the Home Page</h1>
    <% include ./footer %>
</body>
</html>

header.ejs 文件

<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

footer.ejs 文件

<footer>
    <p>&copy; 2023 My Website</p>
</footer>

可能的问题及解决方法

  1. 路径问题：

    • 确保在 index.ejs 中使用正确的路径。例如，如果 header.ejs 和 footer.ejs 在同一个目录下，使用 ./header 和 ./footer 是正确的。
    • 如果它们在不同目录下，请确保路径是相对于 index.ejs 的。

  2. EJS 配置问题：

    • 确认你已经设置了 EJS 作为视图引擎，并且路径指向正确。如上述代码中的 app.set('views', path.join(__dirname, 'views'))。

  3. 检查文件名大小写：

    • 在某些操作系统（如 Linux）中，文件名大小写敏感。确保 header.ejs 和 footer.ejs 的文件名与 index.ejs 中引用的一致。

  4. 调试输出：

    • 在 index.ejs 中添加一些调试信息，例如 <p>Debug: <%= path.join(__dirname, 'header.ejs') %></p>，以确认路径是否正确。

通过以上步骤，你应该能够找到并解决 include 指令未正常工作的问题。


终于解决了，开心

根据你的描述，你在EJS模板文件中使用了<%- include 'header.ejs' %> 和 <%- include 'footer.ejs' %> 来包含头部和底部文件，但它们没有正确地显示在主页上。这可能是由于以下几个原因：

  1. 文件路径错误：确保header.ejs 和 footer.ejs 文件存在于正确的目录下，并且路径是相对于主EJS文件的。
  2. 语法错误：EJS的语法需要使用<%- include 'filename' %> 而不是 <% include filename %>, 注意包括前面的短横线 -，它确保输出不会被转义。
  3. Express设置问题：确保你的Express应用正确配置了EJS作为视图引擎。

这里有一个简单的示例来帮助你理解如何正确设置这些部分：

假设你的项目结构如下：

/views/
    index.ejs
    header.ejs
    footer.ejs
/routes/
    index.js
app.js

在 /views/index.ejs 中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <%- include 'header.ejs' %>
    <h1>Welcome to my site</h1>
    <%- include 'footer.ejs' %>
</body>
</html>

在 /routes/index.js 中（或者直接在 app.js 中设置路由）：

const express = require('express');
const router = express.Router();
const path = require('path');

router.get('/', (req, res) => {
    res.render('index', {});
});

module.exports = router;

在 app.js 中配置视图引擎：

const express = require('express');
const app = express();
const path = require('path');

// 设置EJS为视图引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 引入并使用路由
const indexRouter = require('./routes/index');
app.use('/', indexRouter);

app.listen(3000);

如果以上都正确设置，你应该能够在访问主页时看到header.ejs和footer.ejs的内容。

回到顶部