如何从 nunjucks 中的 gulp 数据访问 json？答案

【问题标题】：how do I access json from gulp data in nunjucks?如何从 nunjucks 中的 gulp 数据访问 json？
【发布时间】：2021-12-17 13:32:19
【问题描述】：

我有一个这样的 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 }}

【问题讨论】：

标签： json nunjucks gulp-data

【解决方案1】：

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

第 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”一样简单。

【讨论】：