设计与设计器

注意

本文介绍如何基于经典UI创建网站。 Adobe建议如开发AEM Sites快速入门中所述,为您的网站使用最新的AEM技术。

设计器用于使用AEM中的经典UI为您的网站创建设计。

注意

有关Web辅助功能的详细信息,请参阅AEM和Web辅助功能指导原则

使用Designer

可以在​工具​选项卡的​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/v1design/v2.),即可轻松地重新设计网站

  • /etc/designs 并且 /content 是浏览器看到的唯一一个外部URL,用于保护您的外部用户对树下的内容感到 /apps 好奇。上述URL优势还有助于您的系统管理员设置更好的安全性,因为您将资产的曝光限制在几个不同的位置。

On this page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now