Node.js POS项目：为Express+Handlebars配置双默认布局

Hey there! Let's walk through setting up two separate layouts with their own CSS for your Node.js POS project step by step—since you're new, I'll keep every part super clear and actionable.

Step 1: Update your server.js Handlebars configuration #

First, we'll adjust the Handlebars setup to support multiple layouts. You can either skip setting a global default layout (so each page explicitly picks its layout) or set a default for your most-used layout (like mainDashboard). Here's the modified server.js code:

const express = require("express");
const exphbs = require("express-handlebars");
const app = new express();

// Configure Handlebars to use our layouts folder
app.engine(
  "handlebars",
  exphbs({ 
    layoutsDir: "./views/layouts", // Explicitly point to your layouts folder (optional but clear)
    // Uncomment below if you want mainDashboard as the default for most pages
    // defaultLayout: "mainDashboard"
  })
);
app.set("view engine", "handlebars");

// Add this line to let Express serve your static files (like CSS)
app.use(express.static("public"));

Step 2: Set up your layout files with separate CSS #

Open each layout file in views/layouts/ and add links to their dedicated CSS files:

mainLogin.hbs (for login/register pages)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <!-- Link to login/register-specific CSS -->
    <link rel="stylesheet" href="/css/login-styles.css">
</head>
<body>
    {{{body}}} <!-- This is where your page content will be inserted -->
</body>
</html>

mainDashboard.hbs (for dashboard/add-product pages)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <!-- Link to dashboard-specific CSS -->
    <link rel="stylesheet" href="/css/dashboard-styles.css">
</head>
<body>
    <!-- Add shared dashboard elements here (like a navigation bar) -->
    <nav class="dashboard-nav">
        <a href="/dashboard">Dashboard</a>
        <a href="/add-product">Add Product</a>
        <a href="/logout">Logout</a>
    </nav>
    
    {{{body}}} <!-- Page content insertion point -->
</body>
</html>

Step 3: Create your CSS files #

Make a new folder structure in your project root to store static assets:

public/
  css/
    login-styles.css
    dashboard-styles.css

Add your custom CSS to each file—for example, login-styles.css could have styles for centered login forms, while dashboard-styles.css styles the navigation bar and dashboard stats cards.

Step 4: Tell each page which layout to use #

In each of your Handlebars page files, wrap the content with the {{#layout}} helper to specify which layout to use:

login.hbs

{{#layout "mainLogin"}}
    <h1>POS Login</h1>
    <form action="/login" method="post">
        <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit">Sign In</button>
    </form>
{{/layout}}

register.hbs

{{#layout "mainLogin"}}
    <h1>Register New Cashier</h1>
    <form action="/register" method="post">
        <div class="form-group">
            <label for="fullName">Full Name:</label>
            <input type="text" id="fullName" name="fullName" required>
        </div>
        <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit">Register</button>
    </form>
{{/layout}}

dashboard.hbs

{{#layout "mainDashboard"}}
    <h1>Welcome to your POS Dashboard</h1>
    <div class="stats-grid">
        <div class="stat-card">Total Sales: $1,245</div>
        <div class="stat-card">Active Products: 38</div>
        <div class="stat-card">Today's Transactions: 12</div>
    </div>
{{/layout}}

addProduct.hbs

{{#layout "mainDashboard"}}
    <h1>Add New Product</h1>
    <form action="/add-product" method="post">
        <div class="form-group">
            <label for="productName">Product Name:</label>
            <input type="text" id="productName" name="productName" required>
        </div>
        <div class="form-group">
            <label for="price">Price:</label>
            <input type="number" id="price" name="price" step="0.01" required>
        </div>
        <div class="form-group">
            <label for="stock">Stock Quantity:</label>
            <input type="number" id="stock" name="stock" required>
        </div>
        <button type="submit">Save Product</button>
    </form>
{{/layout}}

Step 5: Test your routes #

When you render pages in your routes, you don't need to specify the layout anymore—each page already tells Handlebars which one to use. For example:

// Login page route
app.get("/login", (req, res) => {
    res.render("login", { title: "POS Login" });
});

// Dashboard route
app.get("/dashboard", (req, res) => {
    res.render("dashboard", { title: "POS Dashboard" });
});

That's it! Now your login/register pages will use the mainLogin layout with its CSS, and your dashboard pages will use mainDashboard with its own styles.

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