如何使用 Assemble 从 JSON 文件生成多个页面答案

【问题标题】：How can I generate multiple pages from a JSON file with Assemble如何使用 Assemble 从 JSON 文件生成多个页面
【发布时间】：2014-03-19 09:57:07
【问题描述】：

所以我正在构建一个可复制文章的框架。

每篇文章将由“部分”的组合组成，这些“部分”基本上构成一个 html 块和一些相关内容。例如，给定的文章可以按如下方式组成：

author section
text section
image section
text section
blockquote section
carousel section
text section

我想象每个部分都有一个部分模板，并且如上所述，这些部分将具有关联的数据，因此对于文本部分，它可能只是副本（尽管它可能是降价文件？），对于图像部分可能是 url 和 alt 标签等的集合。每篇文章还需要一个关联的 CSS 和 JS 文件来进行任何定制修改，以及它自己的图像存储库。

构建后我最终需要的最终结构如下所示：

site/
    [shared]css/
    [shared]img/
    [shared]js/
    articles/
        article-01/
            [article specific]css/
            [article specific]img/
            [article specific]js/
            index.html
        article-02/
            [article specific]css/
            [article specific]img/
            [article specific]js/
            index.html

显然，只需复制和粘贴 HTML/CSS 文件、更改一些值并使用 grunt 全部构建它会相当简单，但我试图避免复制粘贴重复，看起来 assemble 可能是答案。

所以我的总体计划是使用 assemble 来撰写文章，目标是能够通过填充 .json 文件或类似文件来生成新文章。

在我的脑海里是这样的：

{ 
  "title"   : "Article Title",
  "sections": [
    { 
      "type"  :  "text",
      "data"  : {
        "content"  :  "Lorem iplsum dolor..."
      }
    },
    { 
      "type"  :  "author",
      "data"  : {
        "name"  :  "Bob Servant",
        "meta"  :  "As if you don't know who Bob Servant is",
        "url"  :  "bobservant.com"
      }
    },
    { 
      "type"  :  "image",
      "data"  : {
        "src"   :  "http://placehold.it/300x300",
        "alt" :  "Bob Servant"
      }
    }
  ]
}

此 .json 文件将规定各部分的顺序，并提供内容，希望无需为每篇文章使用单独的 .hbs 模板。

在我的默认模板中，我基本上希望实现以下伪代码：

foreach section {
  get the the appropriate template and pass it the associated data object
}

我正在努力解决的另一个问题是我想要拥有通用部分，例如 text.hbs、image.hbs author.hbs 等，但我需要能够在给定文章中包含多个实例，每个都有自己的数据。

我想这最终是一个抽象问题，无论是在多大程度上解耦模板和数据是合适的，还是如何将数据绑定到模板的正确实例......如果这有意义的话.

如果有人有任何有用的建议，将不胜感激。感觉我正在尝试做的事情应该是可以实现的，但我无法仅仅通过研究示例来了解如何去做：|

【问题讨论】：

您的帖子没有具体问题。你问“我想做 x 和 y。我怎么做 x 和 y”。你已经知道答案了。

标签： javascript json gruntjs assemble

【解决方案1】：

您可以将页面添加到assemble.options 上的pages 集合。示例见this part of the Gruntfile。

您可以创建上面提到的每个部分，以获取text、authors、image、blockquote 等所需的数据...然后使用 partial helper 动态调用部分从页面元数据...

{{#each page.sections}}
  {{partial this.type this.data}}
{{/each}}

尝试将包含此信息的存储库放在一起并将其链接到此处，我可以查看它是否按预期工作。

希望这会有所帮助。

【讨论】：