Node.js Express-App: Wenn ein Cookie vorhanden ist, dann CSS-Klasse zum Element von der Serverseite hinzufügen

Ich habe eine Express Statische Website App. Ich Aufruf Übersetzung meiner Website mit einem Cookie in app.js:Node.js Express-App: Wenn ein Cookie vorhanden ist, dann CSS-Klasse zum Element von der Serverseite hinzufügen

// 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'); 
});

Wenn jemand http://127.0.0.1:3000/en URL besuchen, als er ein Cookie speichert, die die Übersetzung aufrufen. hu ist die Standardsprache. Wenn jemand meine Website zum ersten Mal besucht, wird kein Cookie gespeichert.

Aber wie kann ich meiner Website eine CSS-Klasse hinzufügen, wenn die englische Übersetzung aktiv ist? Ich habe eine Navigationsleiste mit meinem Logo in der Mitte, die horizontal zentriert ist. In englischer Sprache ist die Länge der Wörter unterschiedlich, was dazu führt, dass selbst die zentrierten Flexbox-Elemente left-nav | logo | right-nav nicht in der Mitte stehen.

Irgendwie möchte ich eine CSS-Klasse in meine Lenkervorlage von app.js (die auf der Serverseite ist) hinzufügen, wenn der spezifische Cookie präsentiert wird. Ist es möglich?

Ist es möglich, dies von app.js global zu lösen, nicht von den Routern?

Endgültige Lösung, danke für @ t.niese!

In app.js:

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

In meinem Lenker Vorlage:

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

Quelle

2016-03-25 Lanti

Sie würden Ihre eigene Middleware-Funktion definieren, die z. langClass für Ihre Vorlage Werte basierend auf den Cookie-Wert von locale:

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

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

    next(); 
});

Dann können Sie diese in Ihrer Vorlage als Klasse verwenden:

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

Sie es global nicht lösen können, weil dann die Sprache wäre für jeden Besucher gleich.

Quelle

2016-03-25 15:04:23

Danke! Das funktioniert. Ich habe meine Frage mit Ihrem leicht modifizierten Code aktualisiert. Können Sie überprüfen, ob es in Ordnung ist? – Lanti

@Lanti Sieht korrekt aus. Sorry irgendwie gedacht, dass der Cookie-Wert 'lang' hieß. –

Ich habe mich wieder leicht modifiziert. Dieses Mal füge ich die Klasse dem '' Tag hinzu, indem ich sowohl' class = "" 'als auch' lang = "" 'Attribute ein' en-EN' Format erzeuge. Zugänglichkeitsgeräte werden dies unterstützen. – Lanti

Dies ist möglich.

Sie können die Daten in der Variablen app.locals speichern.

// 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'); 
});

In dem Route-Handler ist die aktuelle Sprache in app.locals zur Verfügung.

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

Quelle

2016-03-25 14:01:24 gnerkus

Ist es möglich, Query Strings abzulegen? Wenn der Benutzer auf den Link "EN" klickt, wird er auf die URL "http: //127.0.0.1: 3000/prevUrl? Langclass = lang-de" umgeleitet. Wenn er jedoch auf einen anderen Link auf der Seite klickt, verschwinden die Abfragezeichenfolgen, wodurch die von der Templating-Engine hinzugefügte CSS-Klasse ebenfalls verschwindet. – Lanti

'app.locals' und' res.locals' können verwendet werden, um die CSS-Klasse in meinem 'app.get' zu speichern? – Lanti

Das funktioniert im Router: 'if (req.cookies.locale === 'en') {var langClass = 'lang-en'; }; 'als' res.render ('portfolio', {layout: 'main', bodyClass: langClass}); 'und in der Lenker-Vorlage rufe ich einfach mit' ' . Aber meine Router fangen an, überdefiniert zu sein. Ist es möglich, dies vom Router in app.js zu verschieben? – Lanti

Node.js Express-App: Wenn ein Cookie vorhanden ist, dann CSS-Klasse zum Element von der Serverseite hinzufügen

Antwort

Verwandte Themen