多语种翡翠模板？ [英] Multilingual Jade templates?

问题描述

我正在使用Jade模板引擎，并使用了一些gulp，和<使用两种语言构建一个非常基本的单页网站。结果应该是静态HTML文档，不需要进一步的服务器端或客户端处理。是否可以根据我在 index.jade 中定义的语言从JSON文件加载网站内容，以及如何去做这件事最好？ / p>

我当前的尝试会导致一个错误：

gulpfile.js：

gulp.task（'views'，function（）{
return gulp.src（' （函数（文件）{
return require（'./app/data/text.json'））; //加载语言文件
}））
.pipe（$。jade（{pretty：true，basedir：'app /'}））
.pipe（gulp.dest（'。tmp'）） ;
}）;


text.json：

<前一课=lang-json prettyprint-override> {
de：{
foo：deutsch
}，

en：{
foo：english
}
}


index_en.jade：

$ b

  extends /_layouts/default.jade 
 
 var lang =en
 
块内容
 
 h1＃{lang.foo} / /从JSON加载文本
  

运行gulp时导致以下错误：

 无法读取未定义的属性'foo'
  

我不介意将每个语言的JSON分解成不同的文件，如果这样做容易一些，但我不知道如何从 index_en.jade 。

某些上下文：

我应该注意我延长了一个默认的布局文件（ default.jade ），它本身包含一些诸如 header.jade 和 footer.jade 以尽可能保持模板系统为DRY。这些文件也需要使用多种语言，这就是为什么我想在 index_en.jade lang =en c $ c>， lang =de在 index_de.jade 中，并且传播到所有的其他部分，而不必重复这些（例如，没有 header_de.jade 或类似的东西）。

我是还合并这些功能回到我的自耕农发电机，所以我想找到一个系统，如果我稍后添加另一种语言，我可以避免必须调整 gulpfile.js 。

解决方案

错误在于＃{lang.foo} 。你已经将lang设置为一个字符串，并且它没有foo ...如果你将lang设置为你正在加载的实际对象（在这种情况下为en或de），它可以正常工作：

 扩展/_layouts/default.jade 
 
块内容
 
  -  var lang = en 
 
 h1＃{lang.foo} //从json载入文本
  

注缺少引号。

编辑：变量声明需要在块内（有时）。

I'm using the Jade template engine with gulp, gulp-jade and gulp-data to build a very basic one-page website in two languages. The result should be static HTML documents with no further server-side or client-side processing. Is it possible to load website content from a JSON file depending on a language I define in my index.jade, and what would be the best way to go about doing this?

My current attempt causes an error:

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

This results in the following error when I run gulp:

Cannot read property 'foo' of undefined

I don't mind splitting up the JSON into different files per language if that makes things easier, but I have no idea how I would include the appropriate file from within index_en.jade.

Some context:

I should note that I'm extending a default layout file (default.jade), which itself includes a bunch of things like header.jade and footer.jade to keep the template system as DRY as possible. Those files would need to be multilingual as well, which is why I would like to define lang="en" in my index_en.jade, lang="de" in index_de.jade, and just have that propagate to all of the other partials without having to duplicate those as well (e.g. no header_de.jade or such).

I'm also merging these features back into my yeoman generator, so I would like to find a system where I can avoid having to adjust gulpfile.js if I were to add another language later on.

解决方案

The error lies in #{lang.foo}. You've set lang to a string and that doesn't have a foo on it… If you set lang to the actual object that you're loading (en or de in this case), it works fine:

extends /_layouts/default.jade

block content

    - var lang = en

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

Note the missing quotation marks.

Edit: Variable declaration needs to be inside block (sometimes).

这篇关于多语种翡翠模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！