設計和設計器

注意

本文說明如何根據傳統UI建立網站。 Adobe建議如開發AEM Sites快速入門一文所述，為您的網站運用最新的AEM技術。

設計工具可用來使用AEM中的傳統UI建立網站的設計。

注意

如需網頁協助工具的詳細資訊，請參閱AEM和網頁協助工具准則。

使用設計器

您的設計可在​Tools​標籤的​designs​區段中定義：

screen_shot_2012-02-01at30237pm

您可以在此處建立儲存設計所需的結構，然後上傳所需的級聯樣式表和影像。

設計儲存在/apps/<your-project>下。 使用jcr:content節點的cq:designPath屬性指定要用於網站的設計路徑。

chlimage_1-74

注意

以設計模式在頁面上所做的所有變更都會保留在網站的設計節點下方，並自動套用至具有相同設計的所有頁面。

您需要的

要實現您的設計，您需要：

CSS — 階層式樣式表會定義頁面上特定區域的格式。

影像 — 用於背景、按鈕等功能的任何影像。

設計網站時的考量事項

開發網站時，強烈建議您在/apps/<your-project>下儲存影像和CSS檔案，以便您能像下列程式碼片段所述，根據目前的設計來參考您的資源。

<%= currentDesign.getPath() + "/static/img/icon.gif %>

上例提供幾項優點：

  • 元件可根據每個網站使用不同設計路徑而有不同的外觀/風格。

  • 只需將設計路徑指向站點根目錄中從design/v1指向design/v2.的不同節點，即可輕鬆地重新設計網站

  • /etc/designs 和 /content 是瀏覽器唯一看到的外部URL，可保護您，讓外部使用者對樹狀目錄下的內容有所 /apps 好奇。上述URL的優點也有助於系統管理員設定更好的安全性，因為您會將資產的曝光限制在幾個不同的位置。

本頁內容