assemble.io 部分传递数据到嵌套的部分

Question

我正在使用 assemble.io，我希望使用“原子设计”原则对所有内容进行模块化。

假设我从几个单个原子开始

原子部分“标题”（a-h2-title.html）

<h2 class="{{additionalclasses}}">{{title}}</h2>

原子部分“信息文本”（a-info-text.html）

<div class="info {{additionalclasses}}">
   {{{text}}}
</div>

据我了解，如果我想将这些通用组件的“实例”与一些数据一起使用，我可以在 json 文件中定义它们，如下例所示：

info-text-example1.html

{{>a-info-text info-text-example1}}

info-text-example1.json

{
   "text":"<p>some text</p>",
   "additionalclasses"="info--modified"
}

好的，现在我的问题是当我想定义一个分子时：

m-text-and-title.html

<div class="box {{additionalclasses}}">
  {{>a-h2-title}}
  {{>a-info-text}}
</div>

现在，如果我想要这个元素的“实例”

文本和标题-example1.html

{{>m-text-and-title ???}}

如何为对象本身（附加类）和定义子对象的所有数据？ 我希望我已经说清楚了

我已经在这里看到了这个article，但我无法适应我的情况 谢谢你的回答

Answer 1

您仍然需要以您需要的方式创建数据结构，然后在页面或部分中将值传递给子部分。所以在这种情况下，我认为你可以使用以下模式：

文本和标题-example1.html

{{>m-text-and-title text-and-title-example1}}

文本和标题-example1.json

{
  "additionalclasses": "text-and-title--modified",
  "title-example": {
    "title": "some title",
    "additionalclasses": "title-modified"
  },
  "text-example": {
    "text": "<p>some text</p>",
    "additionalclasses": "info--modified"
  }
}

然后将分子更新为：

<div class="box {{additionalclasses}}">
  {{>a-h2-title title-example}}
  {{>a-info-text text-example}}
</div>

现在它的工作方式与您最初的示例相同。您有一个数据对象，其中包含您指定的属性，然后将这些属性传递给将使用它们的部分。 “原子”已经具有通用的、可重复使用的属性，您可以更改您的“分子”来做同样的事情......比如将title-example 更改为title 和text-example 更改为text，但将它们保留为对象传递给“原子”。