自定义页面创作

AEM提供了各种机制，使您能够自定义创作实例的页面创作功能（和consoles）。

• Clientlibs

  Clientlibs允许您扩展默认实施以实现新功能，同时重用标准函数、对象和方法。 自定义时，您可以在/apps.下创建自己的clientlib。新的clientlib必须：

  • 取决于创作clientlib cq.authoring.editor.sites.page
  • 属于相应的cq.authoring.editor.sites.page.hook类别

• 叠加

  叠加基于节点定义，允许您将标准功能（在/libs中）与您自己的自定义功能（在/apps中）进行叠加。 创建叠加时，不需要原始文件的1:1副本，因为sling资源合并器允许继承。

这些功能可以通过多种方式在AEM实例中扩展页面创作功能。 下面（在高级别）介绍了选择。

添加新层（模式）

在编辑页面时，有各种模式可用。 这些模式是使用layers实现的。 这些功能允许访问同一页面内容的不同类型的功能。 标准层包括：编辑、预览、注释、开发人员和定位。

层示例：Live Copy状态

标准AEM实例提供MSM层。 这会访问与多站点管理相关的数据，并在层中突出显示该数据。

要在实际操作中看到该内容，您可以编辑任何We.Retail语言副本页面（或任何其他Live Copy页面），然后选择​Live Copy状态​模式。

您可以在以下位置找到MSM层定义（用于引用）：

/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

代码示例

这是一个示例包，其中显示了如何创建新层（模式），这是MSM视图的新层。

GITHUB上的代码

您可以在GitHub上找到此页面的代码

• 在GitHub上打开aem-authoring-new-layer-mode项目
• 将项目下载为a ZIP文件

向资产浏览器添加新的选择类别

资产浏览器显示各种类型/类别（例如，图像、文档等）的资产。 资产也可以按这些资产类别进行过滤。

代码示例

aem-authoring-extension-assetfinder-flickr 是一个示例包，用于显示如何向资产查找器添加新组。此示例连接到Flickr的公共流并在侧面板中显示它们。

GITHUB上的代码

您可以在GitHub上找到此页面的代码

• 在GitHub上打开aem-authoring-extension-assetfinder-flickr项目
• 将项目下载为a ZIP文件

筛选资源

在创作页面时，用户通常必须从资源（例如页面、组件、资产等）中进行选择。 这可以采用列表的形式，例如，作者必须从中选择项目。

为了使列表保持为合理大小并且与用例相关，可以采用自定义谓词的形式实现过滤器。 例如，如果使用pathbrowser Granite组件允许用户选择特定资源的路径，则可以按以下方式过滤显示的路径：

• 通过实施com.day.cq.commons.predicate.AbstractNodePredicate接口来实施自定义谓词。
• 指定谓词的名称，并在使用pathbrowser时引用该名称。

有关创建自定义谓词的更多详细信息，请参阅本文。

将新操作添加到组件工具栏

每个组件（通常）都有一个工具栏，通过该工具栏可访问可对该组件执行的一系列操作。

代码示例

aem-authoring-extension-toolbar-screenshot 是一个示例包，其中显示了如何创建用于呈现组件的自定义工具栏操作。

GITHUB上的代码

您可以在GitHub上找到此页面的代码

• 在GitHub上打开aem-authoring-extension-toolbar-screanth项目
• 将项目下载为a ZIP文件

添加新的就地编辑器

标准就地编辑器

在标准 AEM 安装中：

1. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

   包含各种可用编辑器的定义。

2. 编辑器与可使用该编辑器的每个资源类型（如组件中所示）之间存在连接：

   • cq:inplaceEditing

     例如：

     • /libs/foundation/components/text/cq:editConfig

     • /libs/foundation/components/image/cq:editConfig

       • 属性: editorType

         定义在为该组件触发就地编辑时将使用的内联编辑器类型；例如text、textimage、image、title。

3. 可以使用包含配置的config节点以及另一个plugin节点配置编辑器的其他配置详细信息，以包含必要的插件配置详细信息。

   以下示例用于为图像组件的图像裁剪插件定义宽高比。 请注意，由于屏幕大小可能非常有限，因此裁剪比例已移至全屏编辑器，并且只能在此处查看。

   <cq:inplaceEditing
           jcr:primaryType="cq:InplaceEditingConfig"
           active="{Boolean}true"
           editorType="image">
           <config jcr:primaryType="nt:unstructured">
               <plugins jcr:primaryType="nt:unstructured">
                   <crop jcr:primaryType="nt:unstructured">
                       <aspectRatios jcr:primaryType="nt:unstructured">
                           <_x0031_6-10
                               jcr:primaryType="nt:unstructured"
                               name="16 : 10"
                               ratio="0.625"/>
                       </aspectRatios>
                   </crop>
               </plugins>
           </config>
   </cq:inplaceEditing>
   

   注意

   请注意，在AEM中，由ratio属性设置的裁剪比例被定义为​高度/宽度。 这与常见的宽高比的定义不同，这样做是出于对旧版兼容性的考虑。只要您清楚地定义name属性，创作用户便不会察觉到任何差异，因为UI中会显示此属性。

创建新的就地编辑器

要实施新的就地编辑器（在clientlib中），请执行以下操作：

1. 实施：

   • setUp
   • tearDown

2. 注册编辑器（包括构造函数）：

   • editor.register

3. 提供编辑器与可使用该编辑器的每个资源类型（如组件中所示）之间的连接。

用于创建新就地编辑器的代码示例

aem-authoring-extension-inplace-editor 是一个示例包，其中显示了如何在AEM中新建就地编辑器。

GITHUB上的代码

您可以在GitHub上找到此页面的代码

• 在GitHub上打开aem-authoring-extension-inplace-editor项目
• 将项目下载为a ZIP文件

配置多个就地编辑器

可以配置组件，使其具有多个就地编辑器。 配置多个就地编辑器后，您可以选择相应的内容并打开相应的编辑器。 有关更多信息，请参阅配置多个就地编辑器文档。

添加新页面操作

要向页面工具栏中添加新的页面操作，例如​返回站点（控制台）操作。

代码示例

aem-authoring-extension-header-backtosites 是一个示例包，其中显示如何创建自定义标题栏操作以跳回站点控制台。

GITHUB上的代码

您可以在GitHub上找到此页面的代码

• 在GitHub上打开aem-authoring-extension-header-backtosites项目
• 将项目下载为a ZIP文件

自定义激活请求工作流

当内容作者没有相应的复制权限时，会自动触发现成的工作流​请求激活。

要在进行此类激活时进行自定义行为，可以覆盖​激活请求​工作流：

1. 在/apps中，叠加​Sites​向导：

   /libs/wcm/core/content/common/managepublicationwizard

   注意

   这本身会覆盖以下常见实例：

   /libs/cq/gui/content/common/managepublicationwizard

2. 根据需要更新工作流模型和相关配置/脚本。

3. 从所有相关页面的所有适当用户中删除 replicate操作的权限；以在任何用户尝试发布（或复制）页面时，将此工作流作为默认操作触发。