Nodejs Express ejs 3.*版本 引用 <% include header %> HTML 会换行。恳求帮助，谢谢大家。

Nodejs Express ejs 3.*版本 引用 <% include header %> HTML 会换行。恳求帮助，谢谢大家。

我的HTML 页面布局是这样的： <!DOCTYPE html> <html> <head> <meta charset=“UTF-8” /> <title><%= title %></title> <meta name=“description” content=""> <meta name=“keywords” content=""> <% include resource %> </head> <body> <% include header %> <h1><%=title%></h1> <h4>what a fucking day</h1> <p>Welcome to <%= title %></p> </body> </html>

为什么浏览页面时，body 会存在换行，而且很多空格 的？ 恳求帮助。谢谢。


2 回复

针对您的问题，使用 <% include header %> 在 EJS 模板中可能会导致额外的空白或换行符出现在生成的 HTML 中。这通常是由于包含文件中的空白字符造成的。

示例代码

假设您的 header.ejs 文件内容如下：

<div class="header">
    <h2>Header Content</h2>
</div>

而您的主模板文件（例如 index.ejs）如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title><%= title %></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <% include resource %>
</head>
<body>
    <% include header %>
    <h1><%= title %></h1>
    <h4>what a fucking day</h4>
    <p>Welcome to <%= title %></p>
</body>
</html>

解决方案

  1. 删除多余的空白字符： 确保 header.ejs 和其他被包含的文件中没有多余的空白字符。例如，您可以将 header.ejs 修改为：

    <div class="header"><h2>Header Content</h2></div>

  2. 使用 <%- 来避免转义： 如果您在包含的文件中有 HTML 代码，并且希望 EJS 不对它进行转义，可以使用 <%- 而不是 <%=。但这通常不会影响空白字符问题。

  3. EJS 配置： 您可以在应用启动时配置 EJS 以去除空白字符。例如，在 Express 应用程序中，您可以在初始化 EJS 视图引擎时添加配置选项：

    app.set('views', './views'); // 设置视图文件路径
app.set('view engine', 'ejs');
app.engine('ejs', require('ejs').renderFile); // 使用 renderFile 方法渲染文件

    或者使用 pretty 选项来控制输出格式：

    app.set('view options', { pretty: false }); // 关闭自动缩进

通过这些步骤，您应该能够解决页面中出现的多余换行和空白字符问题。


在使用 EJS 版本 3.x 时，<% include header %> 语法可能会导致额外的换行或空格问题。这是因为 include 操作默认会在包含的文件内容前后保留原有的换行符和缩进。

为了解决这个问题，你可以手动去除这些多余的空白字符。一种方法是在 header.ejs 文件中去除多余的空白字符。另一种方法是使用 EJS 的自定义 trim 功能。

以下是一个简单的解决方案，通过调整 header.ejs 文件来移除多余的空白字符：

假设你的 header.ejs 文件内容如下：

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

你可以将其修改为：

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

或者，如果你希望保持良好的可读性，可以使用 EJS 的 <%- %> 输出标签来防止默认的空白字符处理：

<%- include('header') %>

这样可以确保包含的内容不带额外的换行或空格。

此外，确保所有被包含的文件（如 header.ejs 和 resource.ejs）都遵循类似的规则，以避免意外的空白字符。

回到顶部