EJS 中的 Header 部分问题答案

【问题标题】：Issue with Header partial in EJSEJS 中的 Header 部分问题
【发布时间】：2020-09-16 03:14:46
【问题描述】：

node/express 新手，无法找到与我所面临的类似的 SO 答案。我有一个使用 partials/header 在所有页面上的导航栏的 Express 应用程序，但我遇到了一个问题，如果我去像 /user/:username 这样的位置，它不会以正确的样式呈现标题。

这就是所有只有/{something}的页面上的样子：

如果我转到/user/:username 或任何其他带有参数的网址，这就是它的样子：

注意减少的填充和导航链接更改。我将 ejs 用于带有 Bootstrap 样式的视图引擎，这是我的 app.js 设置视图引擎和视图路径：

app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

适用于所有其他页面的标题导入：

<%- include('partials/header'); -%>

user.ejs 从第二个屏幕截图呈现： app.get('/user/:username', (req, res) => res.render('user'));

如果我将其更改为 /user（完全删除参数），它会很好地呈现导航栏，这让我对为什么请求参数会导致这样的冲突感到困惑。我尝试将头文件从视图/部分移动到视图+更新包含语句，但这并没有改变任何东西。我还尝试在我用于开发（Firefox）的主浏览器（Chrome）中使用单独的浏览器（Chrome），但那里也没有运气。

【问题讨论】：

标签： node.js express ejs

【解决方案1】：

在发布后立即意识到我的问题......并且也不敢相信我因为缺少斜线而损失了 2 个小时。

在我的partials/header 中，我仍然有自己的styles.css 被引用：

<link rel="stylesheet" href="styles.css">

何时需要：

<link rel="stylesheet" href="/styles.css">

【讨论】：