Express.js中PUG模板循环迭代问题求助

Hey Marco, since you didn’t specify the exact issue you’re facing when refactoring the shopping cart project from hbs to PUG, I’ll walk through the most common pitfalls and fixes that come up with this kind of migration—rooted in typical Node.js/Express setups like the Academind tutorial you’re following.

Common Issues & Solutions #

1. Express Template Engine Configuration #

First, you’ll need to update your Express app setup to swap hbs for PUG. Replace your hbs config code with:

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

// Set PUG as the view engine
app.set('view engine', 'pug');
// If your PUG files live in a non-default directory, specify it:
// app.set('views', path.join(__dirname, 'your-pug-folder'));

Note: Don’t forget to install PUG first via npm install pug.

2. Converting hbs Syntax to PUG Syntax #

hbs and PUG have vastly different template syntax—here are the most frequent conversions you’ll need for the shopping cart project:

• Variables: hbs uses {{variable}}, PUG uses = variable (or #{variable} inline with text)
  Example:

  hbs: {{product.title}}
  PUG: = product.title or span #{product.title}

• Conditionals: hbs uses curly-brace blocks, PUG relies on indentation
  Example:

  hbs:

  {{#if cart.items.length}}
    <div class="cart">...</div>
  {{else}}
    <p>Your cart is empty</p>
  {{/if}}
  

  PUG:

  if cart.items.length
    .cart
      // Cart content goes here
  else
    p Your cart is empty
  

• Loops: hbs uses {{#each}}, PUG uses each blocks
  Example:

  hbs:

  {{#each products}}
    <div class="product">{{title}}</div>
  {{/each}}
  

  PUG:

  each product in products
    .product= product.title
  

• Partials: hbs uses {{> partialName}}, PUG uses include partialName.pug
  Ensure your partial files have the .pug extension and are in the correct views subdirectory.

3. Layout Handling #

If the original hbs project used layouts, PUG handles inheritance with extends and block:

• Create a base layout file (e.g., layout.pug):

  doctype html
  html
    head
      title Node.js Shopping Cart
    body
      header
        // Navbar content
      block content
      footer
        // Footer content
  

• Extend this layout in your page templates:

  extends layout
  
  block content
    h1 Welcome to the Shop
    // Page-specific content here
  

4. Variable Passing Checks #

Double-check that you’re passing variables to PUG templates the same way you did with hbs—Express’s res.render() method works identically across engines:

// This works for both hbs and PUG
res.render('shop', {
  products: fetchedProducts,
  pageTitle: 'Shop'
});

If variables aren’t appearing, confirm you’re using PUG’s syntax (no curly braces!) and that variable names match exactly between your route code and template.

5. Debugging PUG Errors #

PUG throws specific, line-numbered errors for syntax issues (incorrect indentation is the #1 culprit!). Check your terminal for error messages—common fixes include:

• Using consistent indentation (stick to spaces or tabs, not both)
• Ensuring blocks are properly nested with indentation
• Using != instead of = if you need to render raw HTML content

If you’re hitting a specific error (like broken loops, missing variables, or layout rendering issues), share relevant code snippets from your PUG files and Express setup, and I’ll help you dive deeper!

内容的提问来源于stack exchange，提问作者Marco