Nodejs 请问 express ejs 模版如何可以include上级目录的文件

Nodejs 请问 express ejs 模版如何可以include上级目录的文件

我的view目录里有一个head.html和foot.html 同时还有一个目录article，在article目录有个一个showarticle.html文件，这个文件我想include 外边的head.html和foot.html，但是每次include都是在我的article目录里include报找不到文件

5 回复

要解决这个问题，你需要正确配置 EJS 的路径解析方式。EJS 默认会在当前模板所在的目录中查找包含的文件，但你可以通过设置 views 目录和 partials 来解决这个问题。

假设你的项目结构如下：

/project-root
  /views
    head.ejs
    foot.ejs
    /article
      showarticle.ejs
  app.js

解决方案

  1. 配置 Express 和 EJS: 首先确保你在 Express 应用中正确配置了 EJS 视图引擎，并且设置了 views 目录。

  2. 使用绝对路径或相对路径: 在 EJS 模板中，你可以使用绝对路径或者相对路径来引用上级目录中的文件。EJS 支持使用 <%- include('path/to/file') %> 语法来包含其他文件。

  3. 示例代码

// 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('/article/:id', (req, res) => {
  res.render('article/showarticle', { articleId: req.params.id });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
  1. 在 showarticle.ejs 中包含上级目录的文件
<!-- views/article/showarticle.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%- title %></title>
  <%- include('../head.ejs') %> <!-- 使用相对路径包含上级目录的 head.ejs -->
</head>
<body>
  <%- include('../foot.ejs') %> <!-- 使用相对路径包含上级目录的 foot.ejs -->
  
  <h1>Article ID: <%- articleId %></h1>
  <!-- 其他文章内容 -->
</body>
</html>

解释

  • <%- include('../head.ejs') %>: 这里的 ../ 表示向上一级目录，然后找到 head.ejs 文件。
  • <%- include('../foot.ejs') %>: 同样地，这里也使用 ../ 来向上一级目录包含 foot.ejs 文件。

通过这种方式，你可以在 showarticle.ejs 中成功包含上级目录中的 head.ejs 和 foot.ejs 文件。


在showarticle.html写上 <include “…/head.html” >

你也我也碰到这样的问题，在网上找了下有一位兄弟给出了解决方案：http://my.oschina.net/web5/blog/184413。解决办法如下： 1.在ejs源代码里面通过resolveInclude方法进行文件路径的解析的； 2.修改此方法为： function resolveInclude(name, filename,options) { var path = join(options.settings.views, name); var ext = extname(name); if (!ext) path += ‘.ejs’; return path; } 及通过相对视图的根目录路径去查找 3.修改其调用的地方，传入options.

这样修改就不能各个环境都通过npm来维护ejs了吧

要在Express应用中使用EJS模板引擎包含上级目录的文件，可以通过相对路径或者绝对路径来实现。以下是一个解决方案：

示例目录结构

views/
├── article/
│   └── showarticle.ejs
├── head.ejs
└── foot.ejs

解决方案

  1. 使用相对路径

    在showarticle.ejs中，你可以通过相对路径包含head.ejs和foot.ejs文件。由于showarticle.ejs位于article/目录下，你需要退回到上一级目录再进入其他子目录。

    <!-- showarticle.ejs -->
<%- include(../head) %>
<h1>Show Article</h1>
<%- include(../foot) %>

  2. 配置EJS以支持绝对路径

    你也可以配置EJS引擎以支持绝对路径。这需要在Express应用初始化时设置EJS的选项。

    // app.js 或 server.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');

// 配置EJS以支持绝对路径
app.engine('ejs', require('ejs').__express);
app.set('view options', { root: __dirname });

// 路由
app.get('/show-article', (req, res) => {
  res.render('article/showarticle', {});
});

app.listen(3000, () => console.log('Server started on port 3000'));

    在showarticle.ejs中使用绝对路径：

    <!-- showarticle.ejs -->
<%- include(/head) %>
<h1>Show Article</h1>
<%- include(/foot) %>

总结

通过上述方法，你可以灵活地包含上级目录中的EJS文件。相对路径是最简单直接的方法，而配置EJS支持绝对路径则提供了更多的灵活性，特别是在大型项目中。

回到顶部