📌  相关文章
📜  在 ejs 中将一个文件添加到另一个文件 - Javascript (1)

📅  最后修改于: 2023-12-03 15:23:08.620000             🧑  作者: Mango

在 EJS 中将一个文件添加到另一个文件 - Javascript

在 EJS 中，可以通过包含或者嵌套一个文件来实现页面的模块化。这样可以让页面结构更加清晰，减少代码的冗余。

添加文件

要添加一个文件，可以使用 include 标签。以下是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Include Example</title>
</head>
<body>
  <h1>Welcome to our website</h1>
  <%- include('partials/header') %>
  <p>This is the content of our page.</p>
  <%- include('partials/footer') %>
</body>
</html>

在示例代码中，使用了 include 标签来引入两个文件： partials/header.ejs 和 partials/footer.ejs。这两个文件分别包含头部和底部的 HTML 代码。

注意，使用 include 标签时，文件路径可以是相对路径或者绝对路径。如果文件路径是相对路径，则相对于当前页面的位置。

嵌套文件

除了 include 标签之外，还可以使用嵌套文件的方式来添加文件。以下是示例代码：

<!-- home.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home Page</title>
</head>
<body>
  <%- include('partials/header') %>
  <h1>Welcome to our website</h1>
  <%- nested('partials/sidebar') %>
  <p>This is the content of our home page.</p>
  <%- include('partials/footer') %>
</body>
</html>

<!-- sidebar.ejs -->
<aside>
  <h2>Categories</h2>
  <ul>
    <li>Category 1</li>
    <li>Category 2</li>
    <li>Category 3</li>
  </ul>
</aside>

在示例代码中，使用了 nested 标签来嵌套一个文件： partials/sidebar.ejs。这个文件包含了侧边栏的 HTML 代码。

嵌套文件的方式可以使页面结构更加清晰，便于维护和更新。

总结

通过 include 标签和嵌套文件的方式，可以在 EJS 中实现页面的模块化。这种方式可以使页面结构更加清晰，减少代码的冗余。