1

我希望能够创建许多具有不同数据的相同块。例如具有不同名称和值的项目列表。

所以我有一个这样的哈巴狗文件：

- var data = require("data.json")

mixin item(name,val)
    .item
        .item-name= name
        .item-val= val

mixin items(input)
    each itm in input
        +item(itm.name,itm.value)

+items(data)

我的 JSON 文件 data.json 是这样的：

[
    {
        "name" : "item1",
        "value": "100"
    },
    {
        "name" : "item2",
        "value": "200"
    },
    {
        "name" : "item3",
        "value": "500"
    }
]

我还想加载不同的 json 数据并将其与我的项目 mixin 一起使用来构建不同的块

但是 gulp 没有编译这段代码并在我的 pug 文件上抛出错误“write after end”

我还为我的 gulp taks 添加了一些带有“locals”的代码：

gulp.task('site:pug:pages', function() {
    var settings = Config.getTaskSettings('site:pug:pages');

    return gulp.src(BASE_PATH + settings.source)
    // return gulp.src("./html/**/*.pug")
        .pipe(plumber({
        errorHandler: notify.onError()
        }))
        .pipe(pug({pretty: true,locals: {
            require: require
          }}))
        .pipe(gulp.dest(DEST_PATH + settings.dist))
        .pipe(global.browserSync.stream());
});

但这没有帮助。知道我可以从 gulp 任务中传递 json 数据。但是有2个问题：

  1. 我不想在 gulp 任务中传递这些 json，因为如果我有新文件，我应该将它写在 gulp 任务文件中。
  2. 这也不起作用并抛出相同的“结束后写入”错误

有没有一种简单的方法可以在 pug 模板中使用 JSON 数据

4

1 回答 1

0

我正在使用包裹来完成这项工作。

首先获取文件上的json文件pug.config.js（如果你不知道这个配置文件看这里）

const dataFile = require("./data.json");

module.exports = {
  locals: {
    dataVariable: dataFile,
  }
};

然后例如，index.pug我使用每个循环来显示ID's包含在someData我的 JSON 文件中的数组中：

each data in dataVariable.someData
  li= data.ID

data.json使用的文件。

{
  "someData": [
    {
      "ID": "xrHLZ",
    },
    {
      "ID": "ar23D",
    }
  ]
}
于 2021-03-23T23:41:02.627 回答