Question

我有一些HTML模板，如下所示：

/
`-- 2cols.html
`-- 3cols.html
`-- 4cols.html
`-- footer.html
`-- head.html
`-- nav.html

我在最终的HTML文档中使用了类似的内容，内容如下：

index.html
`-- head.html
`-- nav.html
`-- 3cols.html
`-- 2cols.html
`-- 3cols.html
`-- 4cols.html
`-- footer.html


contacts.html
`-- head.html
`-- nav.html
`-- 4cols.html
`-- 2cols.html
`-- footer.html

您看到的模板是相同的，但是需要用JSON格式存储的数据填充不同的数据。该JSON包含纯文本和有时的HTML代码。像这样：

{
  "index": {
    "title": "Welcomme",
    "h1": "Welcomme",
    "block1": [
      {
        "title": "Our goal",
        "img_url": "http:...."
      }, {
        "title": "Mission",
        "img_url": "http:...."
      }
    ],
    "block2": [
      {
        "title": "About us",
        "img_url": "http:...."
      }, {
        "title": "Partners",
        "img_url": "http:...."
      }, {
        "title": "Clients",
        "img_url": "http:...."
      }
    ],
    // etc...
  },
  "contacts": {
    "title": "...."
    "h1": "...",
    // etc
  }
}

现在可以通过webpack以某种方式说使用2cols.html模板并填充MyJson.index.block1数组的数据了吗？

我认为在2cols.html中，我可以使用类似这样的东西：

<div class="row">
  <div class="col-6">
    <h3>{data[0].title}</h3>
    <img src="{data[0].img_url"} alt="{data[0].title}" title="{data[0].title}">
  </div>
  <div class="col-6">
    <h3>{data[1].title}</h3>
    <img src="{data[1].img_url"} alt="{data[1].title}" title="{data[1].title}">
  </div>
</div>

我既不想使用用户，也不希望使用Angular或VueJS，而只使用webpack及其插件和加载器。这可能吗？

如何使用Webpack从HTML模板和JSON数据部署多个HTML文件？

0 个答案: