自定义页面创作

注意

AEM 6.4已结束扩展支持，本文档将不再更新。 有关更多详细信息，请参阅 技术支助期. 查找支持的版本 此处.

注意

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

AEM提供了各种机制，允许您自定义页面创作功能(以及 控制台)。

  • Clientlibs

    Clientlibs允许您扩展默认实施以实现新功能，同时重用标准函数、对象和方法。 自定义时，您可以在 /apps. 新的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. 重新创建所需项目(即， /libs)下 /apps
  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

          定义在为该组件触发就地编辑时将使用的内联编辑器类型；例如 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中），请执行以下操作：

注意

例如，请参阅：
/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 操作 所有相关页面的所有适当用户；以在任何用户尝试发布（或复制）页面时，将此工作流作为默认操作触发。

在此页面上