Nodejs 求助：ejs转换成jade

Nodejs 求助：ejs转换成jade

学习node.js学习指南，书中用的是ejs，我用的是jade。 书中有段ejs：

<div id="container" class="container">
      <% if (success) { %>
        <div class="alert alert-success">
          <%= success %>
        </div>
      <% } %>
      <% if (error) { %>
        <div class="alert alert-error">
          <%= error %>
        </div>
      <% } %>
      <%- body %>
      <hr />
      <footer>
        <p><a href="http://www.byvoid.com/" target="_blank">BYVoid</a> 2012</p>
      </footer>
    </div>

我需要把它转成jade的写法，我是这么写的：

#container.container
      - if (success)
        .alert.alert-success #{success}
      - if (error)
        .alert.alert-error #{error}

      block body
      hr
      footer
        p
          a(href="http://www.byvoid.com", target="_blank") BYVoid

运行的效果不对，试了很多种写法，都没成功，求问该怎么改。


5 回复

当然可以！让我们来一步步分析并解决这个问题。Jade（现在更名为Pug）是一种简洁且功能强大的模板引擎，它的语法与EJS有些不同。下面是将你提供的EJS代码转换为Pug的具体步骤和代码示例。

EJS代码

首先，这是你提供的EJS代码：

<div id="container" class="container">
  <% if (success) { %>
    <div class="alert alert-success">
      <%= success %>
    </div>
  <% } %>
  <% if (error) { %>
    <div class="alert alert-error">
      <%= error %>
    </div>
  <% } %>
  <%= body %>
  <hr />
  <footer>
    <p>
      <a href="http://www.byvoid.com/" target="_blank">BYVoid</a> 2012
    </p>
  </footer>
</div>

Pug代码转换

接下来，我们将这段EJS代码转换为Pug代码：

#container.container
  - if (success)
    .alert.alert-success
      = success
  - if (error)
    .alert.alert-error
      = error

  != body
  hr
  footer
    p
      a(href="http://www.byvoid.com", target="_blank") BYVoid

解释

  1. 条件语句:

    • 在Pug中，条件语句使用 - 符号。例如：
      - if (success)
  .alert.alert-success
    = success
    • = 符号用于插入变量内容，而 != 则用于输出未经编码的内容。这在处理HTML标签时非常重要。

  2. 块内容:

    • EJS中的 <%- body %> 表示输出未经过编码的内容。在Pug中，我们使用 != body 来实现相同的功能。

  3. 链接:

    • 链接的写法保持不变，只是语法稍有调整。例如：
      a(href="http://www.byvoid.com", target="_blank") BYVoid

运行结果

确保你的Node.js应用正确配置了Pug作为模板引擎。例如，在Express应用中，你需要这样设置：

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

然后你可以渲染一个包含 success, error, 和 body 的视图：

app.get('/', (req, res) => {
  const locals = {
    success: '操作成功！',
    error: null,
    body: '<p>这是主体内容。</p>'
  };
  res.render('your-template-file', locals);
});

希望这些示例和解释能帮助你成功地将EJS代码转换为Pug代码！如果还有其他问题，请随时提问。


  1. 首先，你需要这个：http://jade-lang.com/demo/

  2. 其次，别再看那本书了。那书里的代码过时太多了。看朴灵的《深入浅出 Node.js》吧。

jade 是个坑爹的玩意， 我话了3天都在搞jade的样式， 完全不知所云。 换成 ejs， 早可以完成睡觉了。 这东西违反直觉，学词成本过高。早晚淘汰

jade的对DOM结构的控制靠得是缩进，它的缩进需要严格为2，楼主po的代码里前几行的缩进都是4？

要在Jade（现在称为Pug）中转换你的EJS代码，你需要理解两者之间的语法差异。EJS更接近HTML模板语言，而Pug则使用缩进和特定的语法来生成HTML。下面是将你的EJS代码转换为Pug的示例：

EJS 代码

<div id="container" class="container">
      <% if (success) { %>
        <div class="alert alert-success">
          <%= success %>
        </div>
      <% } %>
      <% if (error) { %>
        <div class="alert alert-error">
          <%= error %>
        </div>
      <% } %>
      <%- body %>
      <hr />
      <footer>
        <p>
          <a href="http://www.byvoid.com" target="_blank">BYVoid</a> 2012
        </p>
      </footer>
</div>

Pug 转换后的代码

#container.container
  - if(success)
    .alert.alert-success
      != success
  - if(error)
    .alert.alert-error
      != error
  
  block body
  hr
  footer
    p
      a(href='http://www.byvoid.com', target='_blank') BYVoid
      | 2012

解释：

  1. 条件判断：在Pug中，if 语句不需要大括号 {}，而是直接在 - 后面跟上 JavaScript 表达式。
  2. 插入变量：<%= ... %> 在 Pug 中转换为 != ... 来输出未转义的内容。
  3. HTML标签：直接使用缩进定义层级关系，不需要闭合标签。
  4. 块元素：使用 block body 来表示一个可被替换或继承的块。

希望这些信息能帮助你成功地将EJS模板转换为Pug！

回到顶部