Node.js Express uygulaması: Çerez mevcutsa, sunucu tarafındaki öğeye CSS sınıfı eklemek

Açık bir statik site uygulamasına sahibim. Ben app.js bir çerez ile sitemin çevirisini çağırarak:Node.js Express uygulaması: Çerez mevcutsa, sunucu tarafındaki öğeye CSS sınıfı eklemek

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

birisi http://127.0.0.1:3000/en URL'yi ziyaret, bu çeviri çağıran bir çerez depolar daha. Sitemi ilk defa ziyaret ettiğinde hu varsayılan dildir, kayıtlı hiçbir çerez yoktur.

Ancak ingilizce çeviri etkinken siteme nasıl bir CSS sınıfı ekleyebilirim? Logoda ortada yatay olarak merkezlenmiş bir gezinti çubuğu var. İngilizce dilinde, kelimeler uzunluğu farklıdır, hatta merkezlenmiş flexbox elemanlarının bile left-nav | logo | right-nav merkeze girmesine neden olmaz.

Bir şekilde, belirli tanımlama bilgisi sunulduğunda app.js'den (sunucu tarafında bulunan) gidon şablonuma bir CSS sınıfı eklemek istiyorum. Mümkün mü?

Bunu, yönlendiricilerden değil, global olarak app.js'den çözmeniz mümkün müdür?

Son çözüm, @ t.niese için teşekkürler! app.js ise

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

benim gidon şablonunda:

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

kaynak

2016-03-25 Lanti

Örneğini ayarlayacağınız kendi ara katman yazılım işlevlerinizi tanımlayabilirsiniz.

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

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

    next(); 
});

Sonra sınıf olarak şablonunuzda kullanabilirsiniz: locale çerez değerine dayalı şablon değerleri için langClass

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

Sen global bunu çözemediğini, daha sonra dilin çünkü her ziyaretçi için aynı olurdu.

kaynak

2016-03-25 15:04:23

Teşekkür ederiz! Bu çalışıyor. Sorumu biraz değiştirilmiş kodunuzla güncelledim. Kontrol edermisin tamam mı? – Lanti

@Lanti Doğru görünüyor. Bir şekilde kusura bakmadığım için, çerez değerinin lang denmesiydi. –

Yeniden biraz değiştirdim. Bu sefer sınıfı '' etiketine ekliyorum, hem 'class =" "hem de" lang = "" 'bir“ EN-EN ”formatı oluşturan özellikler. Erişilebilirlik cihazları bunu düzeltir. – Lanti

bu mümkündür.

app.locals değişkeninde gerekli verileri saklayabilirsiniz. Rota işleyicisi

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

, mevcut dil app.locals mevcuttur.

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

kaynak

2016-03-25 14:01:24 gnerkus

Sorgu dizelerini atlatmak mümkün mü? Eğer kullanıcı 'EN' bağlantısını tıklarsa, onları http: //127.0.0.1: 3000/prevUrl? Langclass = lang-tr 'adresine yönlendirecektir. Ancak, sayfada başka bir bağlantıya tıklarsa, sorgu dizeleri tarafından eklenen CSS sınıfının da kaybolmasına neden olan sorgu dizeleri kaybolacaktır. – Lanti

'app.locals' ve' res.locals', CSS sınıfını 'app.get'imde saklamak için kullanılabilir mi? – Lanti

Bu, yönlendiricinin içinde çalışır: 'if (req.cookies.locale === 'tr') {var langClass = 'lang-tr'; }; '' res.render ('portföy', {layout: 'main', bodyClass: langClass}); 've tutamaçlar şablonunda sadece ' ile . Fakat yönlendiricilerim aşırı görünmeye başladı. Bunu yönlendiriciden app.js'ye çıkarmak mümkün mü? – Lanti

Node.js Express uygulaması: Çerez mevcutsa, sunucu tarafındaki öğeye CSS sınıfı eklemek

cevap

İlgili konular