Node.js Express应用程序:如果存在cookie，则从服务器端向元素添加CSS类

Node.js Express app: if cookie is present, than add CSS class to element from server side

本文关键字：服务器端 元素 添加 CSS 应用程序 Express js 如果 cookie 存在 Node      更新时间：2023-09-26

我有一个快速静态站点应用程序。我用app.js:中的cookie调用我的网站翻译

// i18n
app.get('/hu', function (req, res) { // http://127.0.0.1:3000/hu
  res.cookie('locale', 'hu', { maxAge: 900000, httpOnly: true });
  res.redirect('back');
});
app.get('/en', function (req, res) { // http://127.0.0.1:3000/en
  res.cookie('locale', 'en', { maxAge: 900000, httpOnly: true });
  res.redirect('back');
});

如果有人访问http://127.0.0.1:3000/en URL，那么它将存储一个调用翻译的cookie。hu是默认语言，当有人第一次访问我的网站时，没有存储任何cookie。

但是，当英语翻译处于活动状态时，我如何向我的网站添加CSS类？我有一个导航栏，我的标志在中间，水平居中。在英语中，单词的长度不同，导致即使是居中的flexbox元素left-nav | logo | right-nav也略不居中。

不知怎的，当特定的cookie出现时，我想从app.js（位于服务器端）向我的手把模板中添加一个CSS类。有可能吗？

有可能从全局的app.js而不是从路由器解决这个问题吗？

最终解决方案，感谢@t.niese

在app.js:中

app.use(function(req, res, next) {
  var defaultLang = 'hu';
  var activeLang = req.cookies.locale || defaultLang;
  res.locals.langClass = activeLang + '-' + activeLang.toUpperCase();
  next();
});

在我的车把模板中：

<!doctype html>
<html class="no-js lang-{{langClass}}" lang="{{langClass}}">

您可以定义自己的中间件函数，该函数将根据locale:的cookie值为模板值设置例如langClass

app.use(function(req, res, next) {
  var activeLang = req.cookies.locale || defaultLang;
  req.local.langClass = 'lang-'+activeLang;
  next();
});

然后你可以在你的模板中使用这个作为类：

<html class="{{langClass}}">
</html>

你不可能在全球范围内解决这个问题，因为那样每个访客的语言都是一样的。

这是可能的。

您可以将所需的数据存储在app.locals变量中。

// i18n
app.get('/hu', function (req, res) { // http://127.0.0.1:3000/hu
  res.cookie('locale', 'hu', { maxAge: 900000, httpOnly: true });
  app.locals.lang = 'lang-hu';
  res.redirect('back');
});
app.get('/en', function (req, res) { // http://127.0.0.1:3000/hu
  res.cookie('locale', 'en', { maxAge: 900000, httpOnly: true });
  app.locals.lang = 'lang-en';
  res.redirect('back');
});

在路由处理程序中，当前语言在app.locals中可用。

app.get('/', function(req, res) {
  var langClass = app.locals.lang;
  // Do something with variable
});
相关文章：