Node.js Express 应用程序：如果存在 cookie，则将 CSS class 添加到服务器端的元素

Question

我有一个快速静态网站应用程序。我用 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 class？我有一个导航栏，中间有我的徽标，水平居中。在英语语言中，单词长度不同，导致即使是居中的 flexbox 元素 left-nav | logo | right-nav 也略微不在中心。

当显示特定的 cookie 时，我想以某种方式将 CSS class 从 app.js（在服务器端）添加到我的车把模板中。可能吗？

是否可以从 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}}">

Answer 1

这是可能的。

您可以将需要的数据存储在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
});

Answer 2

您可以定义自己的中间件功能，例如设置langClass 您的模板值基于 locale:

的 cookie 值

app.use(function(req, res, next) {
  var activeLang = req.cookies.locale || defaultLang;

  req.local.langClass = 'lang-'+activeLang;

  next();
});

然后您可以在您的模板中使用它作为 class:

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

您无法在全球范围内解决它，因为那样的话每个访问者的语言都是一样的。

Node.js Express 应用程序：如果存在 cookie，则将 CSS class 添加到服务器端的元素

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

javascript

cookies

node.js

express

handlebars.js