Question

我需要支持理解 CSS Framework对创作AEM的依赖。

我是UI前端开发人员， AEM团队阻止我使用Google Material Design Lite（https://getmdl.io/）框架。他们告诉我 Google Material Design Lite不支持或创建创作内容/ AEM的问题。

他们说的不是Material Design使用Bootstrap。 我想知道任何css框架（Material Design Lite，Bootstrap，Grid 960，Froundation等）如何影响创作内容/ AEM？

请任何人帮助我理解 Google Material Design Lite（https://getmdl.io/）框架不支持创作AEM？

Answer 1

在发布模式下，AEM能够生成您想要的任何html。但对于创作模式，AEM附带了许多开箱即用的编辑器。他们对html做了一些假设。所以要么遵循这些假设，要么必须自定义这些编辑器或创建自己的编辑器。后者会导致很多努力，而经验不足的AEM开发人员会失败。

AEM对组件做出以下假设：

第一个假设是：“组件是<div>，里面有东西”。这意味着组件是矩形块。

例如一个简单的清单：

<ul>
    <li>…
    <li>…
    <li>…
</ul>

这不起作用。但解决方案很简单，因为您只需要在创作模式期间用<div>包装它。轻微/ htl标记非常简单。

<div data-sly-unwrap=”${wcmmode='disabled'}>
<ul>
    <li>…
    <li>…
    <li>…
</ul>
</div>

如果CSS样式不能与附加div一起使用，则可能会出现问题。然后AEM开发人员必须添加特定于创作的CSS - 最好避免。随着经典的UI问题更加严重，因为AEM / CQ在html中添加了很多DIV（仅用于创作）。

如果列表项更复杂，则会出现下一个问题 - 并且它们本身就是组件。然后只是为了创作它应该是DIV中的DIV。

富文本格式 非AEM设计者的另一个常见问题是格式化文本。 AEM带有强大的richtext编辑器。解决方案是，设计人员会查看richtext编辑器，其功能和创建的html。通常情况下，设计人员只需将html和css更改为与AEM一起提供的富文本编辑器。

<强>表格：不同的故事是表格。 AEM还带有强大的表格编辑器。但是html通常是不够的。通常使用表编辑器，但是为了渲染表编辑器的html（例如使用JSOUP），然后进行转换以满足您的需求（在Sling Model类中）。

<强>布局：在AEM中，您可以在组件内堆叠组件以创建复杂的布局。最外面的组件是一个页面 - 默认情况下是一个矩形。

在内部组件中，您有以下选项：

只是组件的内容
内容和子组件的固定布局。子组件再次是矩形。并且子组件可能只是一个包装器，其中人类用户（作者）可以删除任何其他任意组件（任何方式：可配置哪一个）
parsys ，它是段落系统的开箱即用组件。它是一个自上而下的宽度相同的组件流。甚至在不同宽度的情况下。此外，人类作者还可以添加，删除和重新排序他/她想要的任何组件。（并且它可以受到配置的限制）
一些列支持 - 但通常不使用
你想要的任何东西 - 但编辑功能是不开箱即用。

Parsys：这是一个非常强大的组件，AEM开发人员倾向于把它用于一切。所以，parsys应该是你最好的朋友。例如，您有一个轮播组件。旋转木马滑梯本身就是组件。因此，在创作模式中，轮播按原样工作 - 并且只有一个“开始编辑”按钮。然后旋转木马转换为旋转木马幻灯片的分析。在parsys中，您可以添加幻灯片，编辑，删除和重新排序。最后，用户可以单击“完成编辑”按钮 - 并且分析器再次转换为轮播。

但以上所有都是非常标准的AEM业务。在每个项目中都有一些不容易适合的组件--AEM开发人员必须找到一种创作方法。

作为设计师的摘要，会出现以下规则：

发布模式 - ＆gt;一切顺利
创作模式 - ＆gt;只有矩形块元素
Parsys是你最好的朋友。使用它，即使它首先看起来不像是一个解析器。

希望这有点帮助。也许你的AEM开发人员只是熟悉bootstrap并且喜欢它。

Google Material Design Lite（https://getmdl.io/）框架是否不支持创作Adobe Experience Manager？

1 个答案: