Nodejs 为什么已经使用了include footer.ejs和include header.ejs，但是在主页没有显示？？？

Nodejs 为什么已经使用了include footer.ejs和include header.ejs，但是在主页没有显示？？？

<body> <% include header.ejs %> <%- body %> <% include footer.ejs %> </body>

难道是格式不正确吗？

7 回复

在使用 EJS（Embedded JavaScript）模板引擎时，如果在 Node.js 中的主页上使用 <% include header.ejs %> 和 <% include footer.ejs %> 但它们没有被正确显示，可能有几种原因。首先，确保你的 EJS 文件路径正确，并且 EJS 模板引擎已正确配置。

示例代码

假设你有一个基本的 Express 应用程序，并且你已经安装了 EJS 模板引擎。

目录结构

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

app.js 文件

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

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

// 定义主页路由
app.get('/', (req, res) => {
    res.render('index', { title: 'Home Page' });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

views/index.ejs 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <% include ./header.ejs %>
    <h1>Welcome to the Home Page</h1>
    <% include ./footer.ejs %>
</body>
</html>

views/header.ejs 文件

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

views/footer.ejs 文件

<footer>
    <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

常见问题及解决方案

  1. 路径问题：确保在 index.ejs 中包含 header.ejs 和 footer.ejs 的路径是正确的。在上面的例子中，我们使用的是相对路径 ./header.ejs 和 ./footer.ejs。

  2. EJS 版本问题：如果你使用的是 EJS 3.x 版本，<% include %> 语法已被弃用。可以考虑使用 <%- include('header.ejs') %> 或者更新 EJS 版本。

  3. 缓存问题：有时候浏览器缓存可能会导致页面没有更新。尝试清除浏览器缓存或使用无痕模式访问页面。

  4. 检查服务器日志：查看服务器启动时是否有任何错误信息，这有助于诊断问题。

通过以上步骤，你应该能够解决在主页上不显示 header.ejs 和 footer.ejs 的问题。


建议使用 <%- partial(‘xxx’) %> 代替 include , 否则 html标签会不完整。

改成这样也不行啊 <body> <%- partial(‘header’)%> <%- body %> <%- partial(‘footer’) %> </body>

已经解决了，就是用include解决的

<% include base.ejs %> 这样就可以引入了。 我另外问下，假如不在同一目录怎么引用？

chrome F12

根据你的描述，你已经在 EJS 模板中使用了 <% include header.ejs %> 和 <% include footer.ejs %>，但它们并没有在主页上显示。这可能是由于以下几个原因：

  1. 文件路径问题：确保 header.ejs 和 footer.ejs 文件存在于正确的路径下，并且路径是相对于 EJS 模板文件的。

  2. EJS 配置问题：确保你在 Node.js 应用中正确配置了 EJS 引擎。

  3. 模板引擎设置：如果你使用的是 Express.js 框架，你需要正确配置 EJS 引擎。

示例代码

假设你的项目结构如下：

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

app.js

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

const app = express();

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

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

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
</head>
<body>
    <% include ./header.ejs %>
    <h1>Welcome to the Home Page</h1>
    <% include ./footer.ejs %>
</body>
</html>

views/header.ejs

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

views/footer.ejs

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

确保所有文件路径正确，并且文件名和扩展名正确。如果以上配置仍然无法解决问题，可以检查控制台是否有错误信息，或者查看网络请求是否正常加载了这些文件。

回到顶部