0

我有一个这样的 some.json 文件：

{
  "disneyland-paris": {
    "lang": "de"
  },
  "hanoi": {
    "lang": "de"
  }
}

…我想进入一个 nunjucks 模板：

pipe(data(function() {
  return JSON.parse(fs.readFileSync(".../some.json"))
}))
.pipe(nunjucksRender())

我将如何在 nunjucks 中访问这些数据？

这不起作用：

{{ some }}

或者

{{ some.json }}
4

1 回答 1

1

您可以采用的众多方法之一是为您的 gulp 项目使用gulp nunjucks 渲染。如果您决定走这条路，您可以使用以下步骤作为概念验证来实现您的目标。如果没有，您无论如何都可以从以下步骤中借鉴想法！

  • 第 1 步 - 在您的项目中，“您可以”在名为 Languages.js 的文件中构建您的 JSON 数据：
const languages = [
  {
    "group": [{
      "location":"disenyland-paris",
      "lang": "de"
    },
    {
      "location":"hanoi",
      "lang": "de"
    },
  ]
}];

module.exports = languages;
  • 第 2 步 - 从您的 gulpfile.js 中，假设您正在运行一个 gulp 项目，调用您的 JSON 数据，然后在您的 Nunjucks 逻辑中将其作为环境全局引用...
...

const nunjucksRender = require('gulp-nunjucks-render');
const Languages = require('./src/models/Languages');

...

const manageEnvironment = function (environment) {
    environment.addGlobal('mLangauges',Languages);
}

...

function genNunJucks(cb) {
    return src(['src/views/*.html'])
        .pipe(nunjucksRender({
            path: ['src/views/', 'src/views/parts'], // String or Array
            ext: '.html',
            inheritExtension: false,
            envOptions: {
                watch: true,
            },
            manageEnv: manageEnvironment,
            loaders: null
        }))
        .pipe(dest('pub')); //the final destination of your public pages
    cb();
}

//then do more stuff to get genNunJucks() ready for gulp commands...
  • 第 3 步 - 从 Nunjucks 模板文件中，像这样调用数据......
   {% for sections in mLangauges %}
      {% for mgroup in sections.group %}
         <p>{{mgroup.location}}</p>
         <p>{{mgroup.lang}}</p>
      {% endfor %}
   {% endfor %}

剩下要做的就是运行你的 gulp 项目 :)

提示 - 如果您在工作时更改了 JSON 数据，您可能需要重新构建您的 gulp 项目以在您的网页上查看更新后的 JSON 数据。如果您在 package.json 文件中正确设置，则重新构建可以像运行“npm run build”一样简单。

于 2022-01-12T20:54:50.923 回答