自定义页面创作

注意

本文档介绍如何在现代化的触屏优化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