2

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

假设我从几个单原子开始

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

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

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

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

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

信息文本-example1.html

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

信息文本-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 ???}}

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

我已经在这里看过这篇文章，但我无法根据我的情况对其进行调整谢谢您的回答

4

1 回答 1

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但将它们保留为传递给“原子”的对象。

于 2019-01-06T17:21:19.500 回答