2015-12-04 8 views
5

मैं दो भाषाओं में एक बहुत ही बुनियादी एक-पेज वेबसाइट बनाने के लिए जेड टेम्पलेट इंजन का उपयोग कर रहा हूं, gulp-jade और gulp-data। नतीजा स्थिर एचटीएमएल दस्तावेज होना चाहिए जिसमें आगे सर्वर-साइड या क्लाइंट-साइड प्रोसेसिंग नहीं है। क्या मेरे index.jade में परिभाषित भाषा के आधार पर JSON फ़ाइल से वेबसाइट सामग्री लोड करना संभव है, और ऐसा करने के लिए सबसे अच्छा तरीका क्या होगा?बहुभाषी जेड टेम्पलेट्स?

gulpfile.js:

gulp.task('views', function() { 
    return gulp.src('app/**/*.jade') 
    .pipe($.data(function(file) { 
     return require('./app/data/text.json'); // load language file 
    })) 
    .pipe($.jade({pretty: true, basedir: 'app/'})) 
    .pipe(gulp.dest('.tmp')); 
}); 

text.json:

{ 
    "de": { 
    "foo": "deutsch" 
    }, 

    "en": { 
    "foo": "english" 
    } 
} 

index_en.jade:

मेरे वर्तमान प्रयास एक त्रुटि का कारण बनता है जब मैं घूंट चलाने

extends /_layouts/default.jade 

var lang = "en" 

block content 

    h1 #{lang.foo} // load text from json 

यह निम्न त्रुटि में परिणाम: भाषा प्रति विभिन्न फाइलों में

Cannot read property 'foo' of undefined 

मैं विभाजित कोई आपत्ति नहीं है JSON कि अगर चीजों को आसान बना देता है, लेकिन मुझे पता नहीं है कि कैसे मैं index_en.jade के भीतर से उचित फ़ाइल शामिल होगी।

कुछ संदर्भ:

मैं नोट करना चाहिए कि मैं एक डिफ़ॉल्ट लेआउट फ़ाइल (default.jade), जो अपने आप टेम्पलेट प्रणाली संभव के रूप में सूखा रखने के लिए header.jade और footer.jade जैसी चीजों का एक समूह भी शामिल है का विस्तार कर रहा हूँ। उन फ़ाइलों को बहुभाषी होने की भी आवश्यकता होगी, यही कारण है कि मैं को index_en.jade, lang="de" में index_de.jade में परिभाषित करना चाहता हूं, और केवल उन सभी अन्य आंशिकों को प्रचारित करने के बिना प्रचारित करना है (उदाहरण के लिए header_de.jade या इस तरह के)।

मैं इन सुविधाओं को वापस अपने yeoman generator में विलय कर रहा हूं, इसलिए मैं एक ऐसी प्रणाली खोजना चाहूंगा जहां मैं gulpfile.js समायोजित करने से बच सकूं, अगर मैं बाद में एक और भाषा जोड़ूं।

उत्तर

4

त्रुटि #{lang.foo} में निहित है। आपने लैंग को एक स्ट्रिंग पर सेट किया है और उसके पास कोई फू नहीं है ... यदि आप उस वास्तविक ऑब्जेक्ट को लोड करते हैं जिसे आप लोड कर रहे हैं (इस मामले में एन या डी), यह ठीक काम करता है:

extends /_layouts/default.jade 

block content 

    - var lang = en 

    h1 #{lang.foo} // load text from json 

गायब उद्धरण चिह्नों को नोट करें।

संपादित करें: परिवर्तनीय घोषणा ब्लॉक (कभी-कभी) के अंदर होने की आवश्यकता है।

+0

बिल्कुल सही, धन्यवाद। स्ट्रिंग और ब्लॉक स्कोप दोनों एक समस्या थी। –