Nodejs中Jade用得很鬱悶，換ejs嗎？

Nodejs中Jade用得很鬱悶，換ejs嗎？

Jade格式好像對縮進很敏感似的，在jade文件裡放一下html標籤後，總是會報錯。 不知道大家使用Jade後，有沒有什麼心得可以分享，難道要逼我用ejs，其實我很喜歡jade的簡潔的。

14 回复

Nodejs中Jade用得很鬱悶，換ejs嗎？

Jade（現在稱為Pug）是一種非常流行的模板引擎，它以簡潔和易讀性著稱。然而，對於一些開發者來說，Jade的縮進敏感性可能會成為一個問題。如果你在使用Jade時遇到了一些麻煩，考慮轉換到ejs可能是一個不錯的選擇。

Jade vs EJS

Jade (Pug)

  • 優點: 簡潔、易讀
  • 缺點: 對縮進敏感，如果縮進不正確，容易出錯

EJS

  • 優點: 無需特殊語法，HTML和JavaScript混合更自然
  • 缺點: 語法相對冗長

如何從Jade遷移到EJS

假設你有一個簡單的Jade模板文件 index.jade：

doctype html
html
  head
    title= title
  body
    h1= message
    ul
      - each item in items
        li= item

你可以將其轉換為EJS模板文件 index.ejs：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
    <ul>
      <% items.forEach(function(item) { %>
        <li><%= item %></li>
      <% }); %>
    </ul>
  </body>
</html>

示例代碼

Jade (Pug)

首先，確保你已經安裝了Jade模塊：

npm install pug --save

然後在你的Node.js應用程序中使用Jade：

const express = require('express');
const app = express();
app.set('view engine', 'pug');

app.get('/', function(req, res) {
  const data = {
    title: 'Home Page',
    message: 'Welcome to the Home Page',
    items: ['Item 1', 'Item 2', 'Item 3']
  };
  res.render('index', data);
});

app.listen(3000, () => console.log('Server started on port 3000'));

EJS

接下來，確保你已經安裝了EJS模塊：

npm install ejs --save

然後在你的Node.js應用程序中使用EJS：

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', function(req, res) {
  const data = {
    title: 'Home Page',
    message: 'Welcome to the Home Page',
    items: ['Item 1', 'Item 2', 'Item 3']
  };
  res.render('index', data);
});

app.listen(3000, () => console.log('Server started on port 3000'));

總結

如果你對Jade的縮進敏感性感到困擾，考慮使用EJS可能是一個更好的選擇。EJS提供了更自然的HTML和JavaScript混合方式，並且不需要特殊的語法。希望這些示例代碼能幫助你順利地從Jade遷移到EJS。


我用 jade 的一个心得是把网页的不同部分拆成几个文件，一方面是模块化，一方面也可以减少缩进的深度，防止套错了层。另外我好像还没有遇到非要用原始的 html 标签的情况。

我觉得还是 ejs 比较贴近一点吧，可以立马上手，不需要去学新的语法

习惯就好

主要是看自己熟悉那个咯。

测试一下。……

我安装html2jade总是出错？求指导！

还是ejs用起来舒服

写括号、引号太累。。所以用jade，也可以用coffeekup

虽然很多人转ejs了，但是我还是坚持jade

jade好维护,ejs写多了跟php一样,一团乱麻

我用swig感觉还可以。

我喜欢 swig

回复

如果你在使用 Jade 模板引擎时遇到缩进问题感到困扰，确实可以考虑切换到 EJS。Jade 对缩进非常敏感，这有时会导致一些初学者感到困惑或不便。EJS 则更像是一般的 HTML 文件，易于上手。

为什么要换用 EJS？

  1. 简洁性：Jade 的语法确实非常简洁，但这也意味着它对缩进非常敏感。
  2. 可读性：对于团队协作而言，EJS 更容易理解，因为它更像是标准的 HTML。

示例代码

假设我们有一个简单的 Jade 文件：

doctype html
html
  head
    title Hello World
  body
    h1 Hello, #{name}
    p Welcome to our website.

转换成 EJS 后会是这样的：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello, <%= name %></h1>
    <p>Welcome to our website.</p>
  </body>
</html>

如何切换到 EJS

  1. 安装 EJS：

    npm install ejs --save

  2. 修改 Express 配置：

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

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('index', { name: 'John' });
});

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

  3. 创建 EJS 模板文件（例如 views/index.ejs）：

    <!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello, <%= name %></h1>
    <p>Welcome to our website.</p>
  </body>
</html>

通过这些步骤，你可以轻松地从 Jade 切换到 EJS，并享受更直观的模板编写体验。

回到顶部