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>

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

文本和标题示例1.html

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

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

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

Answer 1

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

文本和标题示例1.html

if turtle.xcor() >= -500 and turtle.xcor()<= -100:
    if turtle.ycor() >= -300 and turtle.ycor()<= 100:
        print('Goede zet')
else:
    print('Foutieve zet')

文本和标题示例1.json

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

然后将分子更新为：

{
  "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 ，但将它们保留为向下传递到“原子”的对象。

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

1 个答案: