时间戳

首页 > 解决方案 > 如何使用 ejs 加载可选的 css 标签？

javascript - 如何使用 ejs 加载可选的 css 标签？

问题描述

我正在尝试使用 Node.js/Express.js 路由加载可选的、特定于页面的样式表，但在该ejs部分中遇到了问题：

表达：

res.render('index', { title: 'Home', css: 'index'}); // some pages won't have the 'css' parameter.

EJS 加载：

<link rel='stylesheet' href='/static/stylesheets/shared.css' />
<% if (css) { %>
  <link rel='stylesheet' href='/static/stylesheets/<%- css %>.css' />
<% } %>

查看官方EJS 文档，我的 if 语句遵循他们的逻辑：

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

我收到错误css is not defined。按照这个逻辑，如果user没有定义，ejs网站上给出的示例不会也导致错误吗？

我在这里做错了什么？

标签： javascripthtmlcssejs

解决方案

尝试在子对象中发送所有数据，如下所示：

表达：

res.render('index', {data:{title:'Home',css:'index'}});

或者

res.render('index', {data:{title:'Home'}});

EJS：

<link rel='stylesheet' href='/static/stylesheets/shared.css' />
<% if (data.css) { %>
  <link rel='stylesheet' href='/static/stylesheets/<%- data.css %>.css' />
<% } %>

如果您只是发送，可选择在这样的对象上：{title:'Home',css:'index'}或者{title:'Home'}变量css可能会或可能不会被定义。

您可以将支票更改为，if (typeof css !== 'undefined')但我发现仅使用子对象更容易且更小。

推荐阅读