Nodejs 为什么EJS的include会有那么多的空白字符?

Nodejs 为什么EJS的include会有那么多的空白字符?

每次include部分的前面都会有一大段的空白字符，如图：

<a class=“content_img” href="/upload/4fc415584ce4c4101c0e4a7b/1345165647271_111.png"><img src="/upload/4fc415584ce4c4101c0e4a7b/1345165647271_111.png" alt=“enter image description here”></a>

代码为:

<% include common/user.html %>

我也同样的问题。求解救呀。谢谢。


2 回复

Node.js 中 EJS 的 include 会出现额外空白字符的原因及解决方案

问题描述

当你使用 EJS 的 include 指令时，你可能会发现被包含的文件前面或后面出现了大量的空白字符（空格、换行等），这可能会导致 HTML 结构出现不必要的空白，影响页面布局。

原因分析

EJS 在处理 include 指令时，会将被包含文件的内容直接插入到当前文件中。如果被包含的文件（例如 common/user.html）在其顶部或底部有额外的空白字符，这些字符也会被插入到最终的 HTML 文件中。

示例代码

假设你有以下结构：

index.ejs

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <% include common/user.html %>
</body>
</html>

common/user.html

<div class="user-info">
    <h2>User Info</h2>
    <p>Name: John Doe</p>
</div>

在这个例子中，user.html 文件没有额外的空白字符，所以 index.ejs 渲染出来的 HTML 是干净的。但是，如果 user.html 文件中有额外的空白字符，问题就会出现。

解决方案

要解决这个问题，你可以确保所有被包含的文件都没有多余的空白字符，或者在渲染模板之前进行清理。一种简单的方法是在被包含的文件中删除所有的空白字符。

例如，你可以手动编辑 common/user.html 文件，移除任何不必要的空白字符：

<div class="user-info"><h2>User Info</h2><p>Name: John Doe</p></div>

或者，如果你需要保留格式但希望在渲染时去除空白字符，可以在 Node.js 中使用自定义的过滤器来处理 EJS 渲染过程。例如：

index.ejs

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <% include common/user.html %>
</body>
</html>

common/user.html

<div class="user-info">
    <h2>User Info</h2>
    <p>Name: John Doe</p>
</div>

在 Node.js 中，你可以使用自定义的 EJS 配置来去除空白字符：

const ejs = require('ejs');

ejs.renderFile('index.ejs', {}, {
    client: false,
    compileDebug: false,
    delimiter: '%',
    rmWhitespace: true // 这个选项可以去除多余的空白字符
}, (err, str) => {
    if (err) throw err;
    console.log(str);
});

通过这种方式，你可以确保生成的 HTML 文件没有多余的空白字符，从而避免页面布局问题。


在使用 EJS 模板引擎时，如果你发现 include 部分前后出现了多余的空白字符，这通常是因为模板文件中包含了一些额外的空白字符或换行符。

示例代码

假设我们有两个文件：

index.ejs

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <% include header.ejs %>
    <div class="content">
        <h1>Welcome to My Site</h1>
    </div>
</body>
</html>

header.ejs

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

解释

在上面的例子中，header.ejs 文件中的空白字符（包括换行符）会在 include 之后被保留下来。这些额外的空白字符可能会导致 HTML 输出中出现不期望的空白字符。

解决方案

为了去除多余的空白字符，可以在 header.ejs 文件中删除不必要的空白字符或使用 EJS 的过滤器来处理输出。

方法一：删除不必要的空白字符

确保 header.ejs 文件中没有多余的空白字符或换行符：

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

方法二：使用 EJS 过滤器

你也可以使用 EJS 的过滤器来去除空白字符：

<header><%- include('header.ejs') %></header>

其中 <%- 表示输出时不进行转义，并且可以去除多余的空白字符。

通过以上方法，你可以有效地解决 include 后面出现多余空白字符的问题。

回到顶部