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

时间:2014-03-19 09:57:08

标签: javascript json gruntjs assemble

因此,我正在构建可复制文章的框架。

每篇文章都将由“&section”部分组合而成。它基本上构成了一个html块和一些相关的内容。例如,给定的文章可以如下组成:

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

我想象每个部分都有一个部分模板,如上所述,这些部分会有相关数据,因此对于文本部分,它可能只是副本(尽管它可能是一个降价文件? ),对于图像部分,它可能是urls和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构建所有内容都相当简单,但我试图避免复制粘贴重复,看起来汇编可能是回答。

所以我的广泛计划是使用汇编来撰写文章,目的是只需填充.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等通用部分,但是我需要能够在给定的文章,每个都有自己的数据。

我认为最终它是一个抽象问题,无论是在解耦模板和数据方面有多远,还包括如何将数据绑定到正确的模板实例......如果这是有道理的。

如果有人有任何有用的建议,将非常感谢。感觉就像我试图做的那样应该是可以实现的,但我只是通过学习例子来解决它的问题:|

1 个答案:

答案 0 :(得分:2)

您可以在pages上的assemble.options集合中添加网页。有关示例,请参阅this part of the Gruntfile

您可以创建上面提到的每个部分内容,其中包含textauthorsimageblockquote等所需的数据...然后使用partial helper从页面元数据动态调用部分...

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

尝试将一个包含此信息的回购邮件放在一起并将其链接到此处,我可以查看它是否按预期工作。

希望这有帮助。