更漂亮的忽略 ejs (1)

📌 相关文章

📜 更漂亮的忽略 ejs (1)

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

更漂亮的忽略 EJS

简介

EJS（Embedded JavaScript）是一种JavaScript的模板引擎，可以快速、简单地将数据嵌入到HTML中。但是，若没有特殊处理，EJS中的空格和换行符会在HTML代码中展现出来，导致页面代码显得混乱不堪。

这时，就需要更漂亮的忽略（Pretty-Print）EJS。

安装

在Node.js项目中使用EJS，需要首先安装EJS和ejs-beautifier：

npm install ejs
npm install ejs-beautifier

使用

在你的Node.js项目中，使用 require() 导入EJS和ejs-beautifier：

const ejs = require('ejs');
const beautify = require('ejs-beautifier');

编写EJS的模板，通过 <% if () { %> 和 <% } %> 来添加逻辑代码，通过 <%= %> 来插入数据。例如：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <% if (users.length) { %>
      <ul>
        <% users.forEach(function(user) { %>
          <li><%= user.name %></li>
        <% }) %>
      </ul>
    <% } else { %>
      <p>No users found.</p>
    <% } %>
  </body>
</html>

在Node.js中，通过 ejs.render() 方法将模板渲染成HTML：

const html = ejs.render(template, {
  title: 'Users',
  users: [
    { name: 'Bob' },
    { name: 'Alice' },
    { name: 'Charlie' }
  ]
});

最后，使用 beautify.html() 方法对HTML代码进行美化：

const prettyHtml = beautify.html(html);
console.log(prettyHtml);

结论

通过更漂亮的忽略，EJS模板可以更加清晰明了地呈现，让HTML代码更具可读性。