如何使用Assemble从JSON文件生成多个页面 [英] How can I generate multiple pages from a JSON file with Assemble

问题描述

所以我正在构建可再生物品的框架。

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

 作者部分
文字部分
图片部分
文本部分
 blockquote部分
转盘部分
文本部分
  

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

我需要在构建之后最终得到的最终结构如下所示：

 网站/ 
 [共享] css / 
 [共享] img / 
 [共享] js / 
 articles / 
 article-01 / 
 [特定文章] css / 
 [特定文章] img / 
 [特定文章] js / 
 index.html 
 article-02 / 
 [特定物品] css / 
 [特定物品] img / 
 [特定物品] js / 
 index.html 
  

显然，只需复制和粘贴HTML / CSS文件，更改一些值并使用grunt将其全部生成，但我试图避免复制粘贴重复，看起来像组装可能是答案。因此，我广泛的计划是使用汇编来撰写文章，目的是能够通过填充.json文件或类似文件来生成新文章。 / p>



在我的脑海中，它看起来像这样：



  {
title：文章标题，
章节：[
 {
type：text，
data：{
 content：Lorem iplsum dolor ...
} 
}，
 {
type：author，
data：{
name：Bob Servant，
meta：如果你不知道Bob Servant是谁，
url：bobservant.com
} 
}，
 {
type：image，
data：{
src：http://placehold.it / 300x300，
alt：Bob Servant
} 
} 
] 
} 
  

这个.json文件将决定节的顺序，并且提供内容，希望否定每篇文章需要单独的.hbs模板。

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

  foreach section {
获取适当的模板并将相关的数据对象传递给
} 
  

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

我想最终它是一个抽象的问题，包括解耦模板和数据的适当程度，以及如何将数据绑定到模板的正确实例......如果这是有道理的。

如果任何人有任何有用的建议，将非常感激。感觉就像我想要做的事情应该是可以实现的，但是我不能通过学习示例来了解如何去解决它：|

解决方案

您可以将页面添加到 assemble.options 中的页面集合中。有关示例，请参阅 Gruntfile的这一部分。

您可以创建上面提到的每个部分，以获取 text ，作者，图片， blockquote 等...然后使用部分助手动态调用页面元数据中的部分内容...

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

尝试将这些信息放在一起，并将其链接到此处，然后我可以查看是否它符合预期。

希望这会有所帮助。

So I'm building a framework for reproduceable articles.

Each article will be composed of a combination of 'sections' which basically constitute an html block and some associated content. For example a given article may be composed as follows:

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

I'm imagining there's a partial template for each section, and as mentioned the sections will have associated data, so for a text section it might just be the copy (although it could be a markdown file?), for an image section it might be a collection of urls and alt tags and so forth. Each article will also need an associated CSS & JS file for any bespoke modifications, as well as it's own image repo.

The ultimate structure I need to end up with after building looks like this:

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

Obviously it would be fairly simple to just copy and paste HTML/CSS files, change a few values and build it all with grunt, but I'm trying to avoid copy paste duplication and it seems like assemble could be the answer.

So my broad plan was to use assemble to compose the articles, with the goal of being able to generate a new article simply by populating a .json file or similar.

In my head it looks something like this:

{ 
  "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"
      }
    }
  ]
}

This .json file would dictate the order of the sections, and provide the content, hopefully negating the need for an individual .hbs template for each article.

In my default template I'm basically looking to achieve the following pseudo code:

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

The other problem I'm struggling with is the fact that I want to have generic partials such as text.hbs, image.hbs author.hbs etc, but I need to be able to have multiple instances included within a given article, each with their own data.

I suppose ultimately it's a problem of abstraction, both in terms of how far it's appropriate to decouple the templates and data, but also how to go about binding the data to the correct instance of the template... if that makes sense.

If anyone has any helpful suggestions that would be very much appreciated. It feels like what I'm trying to do should be achievable, but I can't quite get my head around how to go about it just by studying examples :|

解决方案

You can add pages to a pages collection on the assemble.options. See this part of the Gruntfile for an example.

You can create each of the partials you mentioned above that take in the data needed for text, authors, image, blockquote, etc... then use the partial helper to dynamically call partials from the page metadata...

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

Try putting together a repo with this information and link it here and I can take a look to see if it's working as expected.

Hope this helps.

这篇关于如何使用Assemble从JSON文件生成多个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！