如何在Pug模板中使用JSON变量

问题描述

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

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

SRC=source-folder
DEST=dest-folder
chown $(stat -c '%u:%g' "$SRC") "$DEST"

我的JSON文件data.json如下：

- 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数据，并将其与我的项mixin一起使用以构建不同的块

但是gulp没有编译此代码，并在我的哈巴狗文件上抛出了“写完后”错误

我还为我的大口吃添加了一些带有“ locals”的代码：

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

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

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

在pug模板上是否有使用JSON数据的简单方法

解决方法

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

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

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

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

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

each data in dataVariable.someData
  li= data.ID

data.json 文件已使用。

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