自定义页面创作

注意

本文档介绍如何在现代化的触屏优化UI中自定义页面创作,但不适用于经典UI。

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

  • Clientlibs

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

    • 取决于创作clientlib cq.authoring.editor.sites.page
    • 是相应cq.authoring.editor.sites.page.hook类别的一部分
  • 叠加

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

注意

有关详细信息,请参阅JS文档集

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

注意

有关更多信息,请参阅:

AEM Gems会话- AEM 6.0用户界面自定义中也介绍了本主题。

注意

您​必须​不要更改/libs路径中的任何内容。

这是因为下次升级实例时,/libs的内容会被覆盖(当您应用修补程序或功能包时,很可能会被覆盖)。

建议的配置和其他更改方法是:

  1. /apps下重新创建所需项(即,它存在于/libs中)
  2. /apps中进行任何更改

添加新层(模式)

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

图层示例: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上找到此页面的代码

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

资产浏览器显示各种类型/类别(如图像、文档等)的资产。 资产也可以按这些资产类别进行筛选。

代码示例

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

GITHUB上的代码

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

筛选资源

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

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

有关创建自定义谓词的详细信息,请参阅此文章

注意

通过实现com.day.cq.commons.predicate.AbstractNodePredicate接口实现自定义谓词也适用于经典UI。

有关在经典UI中实现自定义谓词的示例,请参阅此知识库文章

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

每个组件(通常)都有一个工具栏,它提供对可对该组件执行的一系列操作的访问。

代码示例

aem-authoring-extension-toolbar-screenshot 是一个示例包,它显示如何创建自定义工具栏操作来渲染组件。

GITHUB上的代码

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

添加新的就地编辑器

标准就地编辑器

在标准 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

          定义在为该组件触发就地编辑时将使用的内联编辑器类型;例如,texttextimageimagetitle

  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属性所设置,定义为​height/width。 这与常见的宽高比的定义不同,这样做是出于对旧版兼容性的考虑。如果您明确定义name属性,创作用户将不会发现任何差异,因为这是UI中显示的内容。

创建新的就地编辑器

要实施新的就地编辑器(在clientlib中):

注意

例如,请参阅:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

  1. 实施:

    • setUp
    • tearDown
  2. 注册编辑器(包括构造函数):

    • editor.register
  3. 提供编辑器与可使用它的每个资源类型(如组件中)之间的连接。

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

aem-authoring-extension-inplace-editor 是一个示例包,它显示如何在AEM中创建新的就地编辑器。

GITHUB上的代码

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

配置多个就地编辑器

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

添加新页面操作

要向页面工具栏添加新的页面操作,例如​返回站点(控制台)操作。

代码示例

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

GITHUB上的代码

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

自定义激活工作流请求

当内容作者没有适当的复制权限时,系统会自动触发现成的工作流​激活请求

要在此类激活上具有自定义行为,您可以叠加​激活请求​工作流:

  1. /apps叠加中,站点​向导:

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

    注意

    它本身将覆盖以下示例的通用实例:

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

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

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

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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