Nodejs ejs include 合并出现换行

<% include ./models/header.ejs %>

页面出现多个换行 <script src=“http://biowiki.duapp.com/js/js-0.0.1.js”> </script>

</body>

sinazl 1楼

在使用 EJS 模板引擎时，有时会遇到 include 合并文件时出现不必要的换行问题。这通常是由于 EJS 默认处理空格的方式导致的。为了解决这个问题，我们可以调整 EJS 的配置或修改模板文件。

解决方法

方法一：修改 EJS 配置

你可以在应用启动时修改 EJS 的配置，使其忽略多余的空白字符：

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

// 设置 EJS 选项
app.set('view engine', 'ejs');
app.engine('ejs', require('ejs').renderFile);

// 设置 EJS 缩进选项
app.locals.pretty = false;

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

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

这里我们通过设置 app.locals.pretty = false; 来关闭 EJS 的美化输出功能，从而避免不必要的换行。

方法二：调整模板文件

另一种方法是在 include 的 EJS 文件中手动移除多余的空白字符。例如，在 header.ejs 中可以这样做：

<% if (false) { %> <% } %><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="断片化的记忆">
    <meta name="keywords" content="Wiki,node.js">
    <meta name="description" content="一个依托于Web2.0，遵循CC协议的生物Wiki。">
    <meta http-equiv="windows-Target" content="_top">
    <title>CBiowiki 0.3.52</title>
    <link rel="stylesheet" type="text/css" href="http://biowiki.duapp.com/icomoon/style.css">
    <link href="http://biowiki.duapp.com/css/jquery.mCustomScrollbar.css" rel="stylesheet">
    <link href="http://biowiki.duapp.com/css/style-0.1.6.3.min.css" rel="stylesheet">
</head>
<body>

在这个例子中，我们添加了一个条件语句 <% if (false) { %> <% } %>，这样 EJS 就不会解析这部分内容，从而避免了换行。

示例代码

假设你的项目结构如下：

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

app.js

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

app.set('view engine', 'ejs');
app.engine('ejs', require('ejs').renderFile);

app.locals.pretty = false;

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

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

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('./header.ejs') %>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

views/header.ejs

<% if (false) { %> <% } %><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="断片化的记忆">
    <meta name="keywords" content="Wiki,node.js">
    <meta name="description" content="一个依托于Web2.0，遵循CC协议的生物Wiki。">
    <meta http-equiv="windows-Target" content="_top">
    <title>CBiowiki 0.3.52</title>
    <link rel="stylesheet" type="text/css" href="http://biowiki.duapp.com/icomoon/style.css">
    <link href="http://biowiki.duapp.com/css/jquery.mCustomScrollbar.css" rel="stylesheet">
    <link href="http://biowiki.duapp.com/css/style-0.1.6.3.min.css" rel="stylesheet">
</head>
<body>

通过以上方法，你可以有效地解决 EJS include 合并时出现的换行问题。

sinazl 2楼

在使用 EJS 模板引擎时，如果发现 include 的内容之间出现了多余的换行符，可以通过一些方法来解决这个问题。EJS 默认会在包含文件时保留原始格式，这可能会导致额外的换行符。

解决方案

一种简单的解决方案是确保在 EJS 文件中删除不必要的空行，并确保模板代码尽可能紧凑。例如：

header.ejs

<header>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="author" content="断片化的记忆">
    <meta name="keywords" content="Wiki,node.js">
    <meta name="description" content="一个依托于Web2.0，遵循CC协议的生物Wiki。">
    <meta http-equiv="windows-Target" content="_top">
    <title>CBiowiki 0.3.52</title>
</header>

main.ejs

<!DOCTYPE html>
<html>
<head>
    <% include ./models/header.ejs %>
</head>
<body screen_capture_injected="true" ryt11556="1">
    <!-- 其他内容 -->
</body>
</html>

另一种解决方案

如果你希望更灵活地控制输出格式，可以在 header.ejs 中使用 <%- %> 语法来禁用转义，并确保没有多余的空格或换行符：

header.ejs

<%-
    `\
        <header>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <meta name="author" content="断片化的记忆">
            <meta name="keywords" content="Wiki,node.js">
            <meta name="description" content="一个依托于Web2.0，遵循CC协议的生物Wiki。">
            <meta http-equiv="windows-Target" content="_top">
            <title>CBiowiki 0.3.52</title>
        </header>\
    `
-%>

这样可以确保 header.ejs 的内容被包含到主文件中时不会引入多余的换行符。

通过以上方法，可以有效地解决 EJS include 时出现的换行问题。