Fatal编程技术网
  • javascript/
  • Javascript Node.js Express应用程序：若存在cookie，则从服务器端向元素添加CSS类

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

javascript node.js express cookies

Javascript Node.js Express应用程序：若存在cookie，则从服务器端向元素添加CSS类,javascript,node.js,express,cookies,handlebars.js,Javascript,Node.js,Express,Cookies,Handlebars.js,我有一个快速静态网站应用程序。我使用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) { // h

我有一个快速静态网站应用程序。我使用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元素
左导航| logo |右导航
也略不居中

不知何故，当呈现特定cookie时，我想从app.js（位于服务器端）向我的handlebar模板中添加一个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}}">
这是可能的

您可以将所需的数据存储在变量中

// 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
});
您可以定义自己的中间件功能，该功能将根据
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>
您不能全局解决它，因为这样每个访问者的语言都是相同的。

是否可以放弃查询字符串？如果用户单击
EN
链接，则会将其重定向到
http://127.0.0.1:3000/prevUrl?langclass=lang-en
URL。但是，如果他单击页面上的另一个链接，查询字符串将消失，从而导致模板引擎添加的CSS类也消失。
app.locals
和
res.locals
可用于将CSS类存储在我的
app.get
？这在路由器内部工作：
if（req.cookies.locale==“en”）{var langClass='langen'；}；
than
res.render（'portfolio'，{layout'main'，bodyClass:langClass}）；
在把手模板中，我只是用
调用。但是我的路由器开始看起来定义过度了。是否可以将其从路由器移到app.js中？是的，
app.locals
可以用来存储CSS类。使用
app.locals.lang
是个坏主意，至少如果你想让不同的用户选择的话不同的语言。使用
app.locals.lang
你可以更改所有用户的语言。谢谢！这很有效。我用你稍微修改的代码更新了我的问题。你能检查一下吗？@Lanti看起来正确。抱歉，不知怎的，我想cookie值被称为
lang
。我再次稍微修改了。这次我添加了将属性设置为
标记，创建
en
格式。可访问性设备将对此进行通知。