【问题标题】:How use JSON variable inside of pug template如何在 pug 模板中使用 JSON 变量
【发布时间】:2020-08-28 12:23:48
【问题描述】:

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

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

- 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 数据。但是有两个问题:

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

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

【问题讨论】:

    标签: json gulp pug-loader


    【解决方案1】:

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

    首先获取pug.config.js文件上的json文件(if you don`t know about this config file look here)

    const dataFile = require("./data.json");
    
    module.exports = {
      locals: {
        dataVariable: dataFile,
      }
    };
    

    然后以index.pug 为例,我使用each 循环来显示我的JSON 文件中someData 数组中包含的ID's

    each data in dataVariable.someData
      li= data.ID
    

    data.json 已使用文件。

    {
      "someData": [
        {
          "ID": "xrHLZ",
        },
        {
          "ID": "ar23D",
        }
      ]
    }
    
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-06-13
      • 2021-09-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多