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

Question

我需要支持瞭解CSS框架依賴創作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？

請任何人幫我理解是真的谷歌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 - 這更好避免。隨着經典的用戶界面問題變得更糟，因爲AEM/CQ在html內部添加了很多DIV（僅用於創作）。

下一個問題來了，如果列表項更復雜 - 並且是組件本身。那麼只是爲了創作它應該是DIV中的DIV。

Rich Text： 非AEM設計者的另一個常見問題是格式化文本。 AEM帶有一個強大的富文本編輯器。這裏的解決方案是，設計人員可以查看richtext編輯器，其功能和創建的html。通常情況下，設計人員只需更改html和css，以便與AEM附帶的richtext編輯器相處。

表格： 不同的故事是表格。 AEM還配備了強大的表格編輯器。但是這個html通常是不夠的。通常表格編輯器被採用，但是爲了渲染表格編輯器的html被解析（例如JSOUP），然後轉換以適應您的需求（在Sling Model類中）。

佈局： 在AEM中，您可以堆疊組件內的組件以創建複雜的佈局。最外面的組件是一個頁面 - 默認情況下是一個矩形。

內部組件，您有下列選項：

1. 組件
2. 內容和子組件固定佈局的只是內容。子組件再次是矩形。而一個子組件可能只是一個包裝，其中一個人類用戶（作者）可以刪除任何其他組件（任何方式：可配置哪一個）
3. A parsys，這是一個開箱即用的組件一個段落系統。它是具有相同寬度的自上而下的組件流。甚至在不同寬度的情況下也有一些延伸。此處，作者可以添加，刪除和重新排序他/她想要的任何組件。 （它可以通過配置限制）
4. 一些列的支持 - 但往往不使用你想
5. 任何東西 - 但編輯功能是那麼不外的開箱。

Parsys：這是一個非常強大的組件，AEM開發人員傾向於承擔一切。所以parsys應該是你最好的朋友。例如，您有一個輪播組件。旋轉木馬幻燈片本身就是組件。因此，在創作模式下，輪播作品按原樣運行 - 並且只有一個「開始編輯」按鈕。然後旋轉木馬轉換爲旋轉木馬幻燈片的解析。在解析中，您可以添加幻燈片，編輯，刪除和重新排序它們。最後，用戶可以單擊「完成編輯」按鈕 - 並且解析器再次轉換爲傳送帶。

但以上所有都是非常標準的AEM業務。在每個項目中都有一些不容易適應的組件 - 而AEM開發人員必須找到創作的途徑。

作爲總結對於設計師來說，發生下列規則：

1. 發佈模式 - >什麼都可以
2. 創作模式 - >只有矩形塊元素
3. Parsys是你最好的朋友。使用它，即使它看起來不像第一個地方。

希望這對我有所幫助。也許你的AEM開發人員只是熟悉bootstrap並且更喜歡它。