如何在 Express 和 EJS 中包含 HTML 文件

Question

代码

我希望让我的网页模块化，这样我就不需要一遍又一遍地编写我的内容。我认为我的解决方法是使用ejs库。因此，我已经配置了express和ejs，如下所示：

const app = express();
app.engine('.html', require('ejs').renderFile);
app.set('view engine', 'html');
app.set('views', __dirname + '/wwwroot/views');

我的 views 文件夹结构如下:

wwwroot
  static
    css
    js
  views
    login
      index.html
    profile
      dashboard.html
    templates
      inc_header.html
      inc_footer.html

我的仪表板包含以下内容。

<% include templates/inc_header.html %>

This is my dashboard

问题

无法包含头文件。我尝试了wwwroot/views/templates/header.html和header.html，但都不起作用。

我的整个服务器配置

app.engine('.html', require('ejs').renderFile);
app.set('view engine', 'html');
app.set('views', __dirname + '/wwwroot/views');

app.use(session({
    secret: program.secret || "secret",
    resave: true,
    saveUninitialized: true
}));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }))
app.use('/', express.static(path.join(__dirname, '/wwwroot/static/')));

Web服务器上的输出

<% include templates/inc_header.html %> 这是我的仪表板

看起来文件不会被渲染？

- Lukas Gund

---

你根本没有名为 header.html 的文件！ - Quentin

我使用了inc_header.html。我对它进行了编辑... - Lukas Gund

Answer 1

这是来自ejs的内容 docs：

包含文件的路径相对于调用include的模板。

由于你在dashboard.html中包含头文件，所以路径应该是：

<% include ../templates/inc_header %>

- YouneL

---

很奇怪。如果我这样做，他想要下载这个文件。在这个文件中是源代码，但它将不再在浏览器中显示。 - Lukas Gund

我已经添加了整个Express配置。也许有什么问题吗？ - Lukas Gund

你应该删除这行代码：app.engine('.html', require('ejs').renderFile);。 - YouneL

我已经尝试过了，但它仍然只是下载文件而不在浏览器上显示。 - Lukas Gund

仍然无法工作。还是一样的。如果我尝试将res.sendFile发送到dashboard.ejs，它只会被下载。 - Lukas Gund

Answer 2

<%- 包括 templates/inc_header.html %>

ejs 模板标签中，引入标签的开头有一个连字符

在 include 标签前加上连字符即可正常使用。

同时，您还可以向被包含的文件发送数据。

     <%- include("../partials/head.ejs", {variant:e.name}); %>

但是NB：如果要在其中使用变量，则必须从包含它的任何地方将其传递给它。

为了解决这个问题，如果未发送，则可以为其设置默认值。将此添加到被包含的文件中。

    <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>

更多信息请查看链接

要在Express中使用HTML文件并使用EJS，请在index.js（您的应用程序入口点）中使用此代码。

const app = express();
app.engine('.html', require('ejs').renderFile);
app.set('view engine', 'html');

- Jay Stance