Express + Handlebars无法找到CSS文件正确路径求助

核心问题分析 #

你的样式无法生效主要有两个关键原因：

• 渲染/presidents页面时使用的layout.hbs模板未引入CSS文件，导致样式无法加载
• presidents.hbs存在HTML结构错误，循环逻辑会重复生成重复的section标签

另外，根路径/当前返回的是纯文本字符串，而非你写的index.html文件，这也导致该文件的CSS引入无法生效。

分步修复 #

1. 为Handlebars布局添加CSS引入 #

修改layout.hbs，在<head>标签内添加CSS链接，所有通过Handlebars渲染的页面都会继承这个布局，从而加载样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/css/styles.css" />
  <title>Express HTML Site</title>
</head>
<body>
  {{{body}}}
</body>
</html>

2. 修正presidents.hbs的结构错误 #

你把<section id="presidents">放在了{{#each data}}循环内部，这会导致每个总统条目都生成一个独立的section，不仅结构混乱还可能影响样式选择器。将section移到循环外部：

<h1>All our presidents</h1>
<section id="presidents">
  {{#each data}}
    <figure class="president">
      <img src="{{this.photo}}" alt="{{this.name}}"/>
      <figcaption>{{this.name}}</figcaption>
    </figure>
  {{/each}}
</section>

注意：<caption>是<table>的专属子元素，这里应该用<figcaption>作为<figure>的标题元素。

3. 让根路径返回index.html（可选） #

如果希望访问http://localhost:4001/时加载你的index.html文件，修改server.js中的根路由处理：

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

4. 确认静态资源配置正确性 #

你的server.js中静态资源的配置是正确的：

app.use(express.static(path.join(__dirname, 'public')));

因为public文件夹和server.js在同一目录，这个路径会正确指向public下的静态资源，无需修改。

验证步骤 #

1. 重启Express服务器
2. 访问http://localhost:4001/presidents，检查页面是否加载样式
3. 打开浏览器开发者工具（F12），切换到网络标签，刷新页面，确认styles.css的请求状态为200（成功加载）

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