Express.js中hbs模板引擎Partials未找到的问题求助

Hey there! Let's work through why your HBS partials aren't showing up. Based on the code you shared and common gotchas with HBS in Express, here are the key checks and fixes:

1. Verify Your Folder Structure #

First, double-check that your partials are in the exact path you registered. Your project should look something like this (adjust if your setup differs):

your-project/
├── server.js
├── views/
│   ├── main.hbs       <!-- Your main template -->
│   └── partials/
│       ├── header.hbs  <!-- Example partial file -->
│       └── footer.hbs  <!-- Another partial -->
└── public/

If your partials folder is nested differently (e.g., inside views/layouts), you'll need to update the path in hbs.registerPartials() to match.

2. Fix Path Concatenation (Avoid OS-Specific Issues) #

Manual string concatenation for paths can break across Windows/macOS/Linux. Use Node's built-in path module to safely join paths instead:
First, add the path import to your server.js:

const express = require("express");
const hbs = require("hbs");
const path = require("path"); // Add this line
const port = process.env.PORT || 3000;
var app = express();

Then update the partials registration line:

hbs.registerPartials(path.join(__dirname, "views", "partials"));

This ensures the path is formatted correctly no matter what OS you're on.

3. Check Partial Syntax in main.hbs #

Make sure you're calling your partials with the right syntax—HBS doesn't require the .hbs suffix, and filenames are case-sensitive. For example:
If your partial is named header.hbs, call it like this in main.hbs:

{{> header}}

If you write {{> header.hbs}} or {{> Header}} (with a capital H when the file is lowercase), it'll throw a "partial not found" error.

4. Disable Template Cache (For Development) #

HBS caches templates by default, which can make it seem like your partials aren't loading even after fixing issues. Disable caching in your development environment:

app.set("view engine", "hbs");
app.set("view cache", false); // Add this line

Just remember to remove this or wrap it in a process.env.NODE_ENV !== 'production' check when deploying to production.

5. Enable Your Root Route #

You have your root route commented out—make sure to uncomment it so main.hbs gets rendered when you visit /:

app.get("/",(req, res) => { 
  res.render("main"); // No need for .hbs here, since view engine is set to hbs
})

Give these steps a try, and your partials should load correctly!

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