自定义页面创作 customizing-page-authoring
AEM提供了各种机制,允许您自定义页面创作功能(以及 控制台)。
-
Clientlibs
Clientlibs允许您扩展默认实施以实现新功能,同时重用标准函数、对象和方法。 自定义时,您可以在
/apps.
新的clientlib必须:- 取决于创作clientlib
cq.authoring.editor.sites.page
- 是适当的
cq.authoring.editor.sites.page.hook
类别
- 取决于创作clientlib
-
叠加
叠加基于节点定义,允许您覆盖标准功能(在
/libs
)/apps
)。 在创建叠加时,不需要原始图像的1:1副本,因为 sling资源合并 允许继承。
这些功能可以通过多种方式在AEM实例中扩展页面创作功能。 下面(在高级别)介绍了选择。
- 使用和创建 clientlibs.
- 使用和创建 叠加.
- Granite
- AEM触屏UI的结构 以详细了解用于页面创作的结构区域。
/libs
路径。/libs
在下次升级实例时被覆盖(当您应用修补程序或功能包时,可能会被覆盖)。- 重新创建所需项目(即,
/libs
)下/apps
- 在
/apps
添加新层(模式) add-new-layer-mode
编辑页面时,会显示各种 模式 可用。 这些模式是使用 层. 这些功能允许访问同一页面内容的不同类型的功能。 标准层包括:编辑、预览、注释、开发人员和定位。
层示例:Live Copy状态 layer-example-live-copy-status
标准AEM实例提供MSM层。 这会访问与 多站点管理 并在图层中加亮显示。
要在实际操作中看到它,您可以编辑任何 We.Retail语言副本 页面(或任何其他live copy页面)并选择 Live Copy状态 模式。
您可以在以下位置找到MSM层定义(用于引用):
/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js
代码示例 code-sample
这是一个示例包,其中显示了如何创建新层(模式),这是MSM视图的新层。
GITHUB上的代码
您可以在GitHub上找到此页面的代码
将新选择类别添加到资产浏览器 add-new-selection-category-to-asset-browser
资产浏览器显示各种类型/类别(例如,图像、文档等)的资产。 资产也可以按这些资产类别进行过滤。
代码示例 code-sample-1
aem-authoring-extension-assetfinder-flickr
是一个示例包,用于显示如何向资产查找器添加新组。 此示例连接到 Flickr的公共流,并在侧面板中显示它们。
GITHUB上的代码
您可以在GitHub上找到此页面的代码
筛选资源 filtering-resources
在创作页面时,用户通常必须从资源(例如页面、组件、资产等)中进行选择。 这可以采用列表的形式,例如,作者必须从中选择项目。
为了使列表保持为合理大小并且与用例相关,可以采用自定义谓词的形式实现过滤器。 例如,如果 pathbrowser
Granite 组件用于允许用户选择特定资源的路径,所呈现的路径可以通过以下方式进行过滤:
- 通过实施来实施自定义谓词
com.day.cq.commons.predicate.AbstractNodePredicate
界面。 - 指定谓词的名称,并在使用
pathbrowser
.
有关创建自定义谓词的更多详细信息,请参阅 本文.
com.day.cq.commons.predicate.AbstractNodePredicate
界面在经典UI中也可正常工作。将新操作添加到组件工具栏 add-new-action-to-a-component-toolbar
每个组件(通常)都有一个工具栏,通过该工具栏可访问可对该组件执行的一系列操作。
代码示例 code-sample-2
aem-authoring-extension-toolbar-screenshot
是一个示例包,其中显示了如何创建用于呈现组件的自定义工具栏操作。
GITHUB上的代码
您可以在GitHub上找到此页面的代码
添加新的就地编辑器 add-new-in-place-editor
标准就地编辑器 standard-in-place-editor
在标准 AEM 安装中:
-
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
包含各种可用编辑器的定义。
-
编辑器与可使用该编辑器的每个资源类型(如组件中所示)之间存在连接:
-
cq:inplaceEditing
例如:
-
/libs/foundation/components/text/cq:editConfig
-
/libs/foundation/components/image/cq:editConfig
-
属性:
editorType
定义在为该组件触发就地编辑时将使用的内联编辑器类型;例如
text
,textimage
,image
,title
.
-
-
-
-
可以使用
config
包含配置的节点,以及plugin
节点,以包含必需的插件配置详细信息。以下示例用于为图像组件的图像裁剪插件定义宽高比。 请注意,由于屏幕大小可能非常有限,因此裁剪比例已移至全屏编辑器,并且只能在此处查看。
code language-xml <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>
note caution CAUTION 请注意,在AEM中,由 ratio
属性,定义为 高宽比. 这与常规的宽度/高度定义不同,这是出于对旧版兼容性的考虑。 只要您定义name
属性,因为这是UI中显示的内容。
创建新的就地编辑器 creating-a-new-in-place-editor
要实施新的就地编辑器(在clientlib中),请执行以下操作:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
-
实施:
setUp
tearDown
-
注册编辑器(包括构造函数):
editor.register
-
提供编辑器与可使用该编辑器的每个资源类型(如组件中所示)之间的连接。
用于创建新就地编辑器的代码示例 code-sample-for-creating-a-new-in-place-editor
aem-authoring-extension-inplace-editor
是一个示例包,其中显示了如何在AEM中新建就地编辑器。
GITHUB上的代码
您可以在GitHub上找到此页面的代码
配置多个就地编辑器 configuring-multiple-in-place-editors
可以配置组件,使其具有多个就地编辑器。 配置多个就地编辑器后,您可以选择相应的内容并打开相应的编辑器。 请参阅 配置多个就地编辑器 文档以了解更多信息。
添加新页面操作 add-a-new-page-action
要向页面工具栏添加新的页面操作,例如 返回站点 (控制台)操作。
代码示例 code-sample-3
aem-authoring-extension-header-backtosites
是一个示例包,其中显示如何创建自定义标题栏操作以跳回站点控制台。
GITHUB上的代码
您可以在GitHub上找到此页面的代码
自定义激活请求工作流 customizing-the-request-for-activation-workflow
开箱即用的工作流, 激活请求,则当内容作者没有相应的复制权限时,会自动触发。
要在此类激活时进行自定义行为,您可以叠加 激活请求 工作流:
-
在
/apps
叠加 站点 向导:/libs/wcm/core/content/common/managepublicationwizard
note note NOTE 这本身会覆盖以下常见实例: /libs/cq/gui/content/common/managepublicationwizard
-
更新 工作流模型 和相关的配置/脚本。
-
删除
replicate
操作 所有相关页面的所有适当用户;以在任何用户尝试发布(或复制)页面时,将此工作流作为默认操作触发。