本檔案說明如何在現代化、可觸控的UI中自訂頁面製作,而不適用於傳統UI。
AEM提供多種機制,讓您自訂製作例項的頁面製作功能(以及consoles)。
Clientlibs
Clientlibs可讓您擴充預設實作,以實現新功能,同時重複使用標準函式、物件和方法。 在自定義時,您可以在/apps.
下建立自己的clientlib。新的clientlib必須:
cq.authoring.editor.sites.page
cq.authoring.editor.sites.page.hook
類別覆蓋
覆蓋是以節點定義為基礎,可讓您以您自己的自訂功能(在/libs
中)覆蓋標準功能。 /apps
當建立覆蓋時,不需要原稿的1:1復本,因為sling資源合併允許繼承。
如需詳細資訊,請參閱JS檔案集。
這些功能可以透過許多方式來延伸AEM例項中的頁面編寫功能。 下面將介紹一個選項(在高級別)。
如需詳細資訊,請參閱:
您必須不要變更/libs
路徑中的任何項目。
這是因為下次升級實例時會覆寫/libs
的內容(套用修補程式或功能套件時,很可能會覆寫)。
配置和其他更改的建議方法為:
/apps
下重新建立所需項目(如/libs
中所存在)/apps
中進行任何更改編輯頁面時,有各種模式可用。 這些模式是使用layers實現的。 這些功能可讓您存取相同頁面內容的不同功能類型。 標準層包括:編輯、預覽、註解、開發人員和鎖定目標。
標準AEM例項提供MSM層。 這可存取與多網站管理相關的資料,並在圖層中加亮顯示。
若要檢視其實際運作,您可以編輯任何We.Retail語言copy頁面(或任何其他即時副本頁面),並選取「即時副本狀態」(Live Copy Status)模式。
可在以下位置找到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
介面。pathbrowser
時參考該名稱。如需建立自訂述詞的詳細資訊,請參閱this article。
通過實施com.day.cq.commons.predicate.AbstractNodePredicate
介面來實施自定義謂語同樣適用於傳統UI。
如需在傳統UI中實作自訂謂詞的範例,請參閱此知識庫文章。
每個元件(通常)都有工具列,可讓您存取該元件可執行的動作範圍。
aem-authoring-extension-toolbar-screenshot
是示例包,其中顯示如何建立自定義工具欄操作來渲染元件。
GITHUB代碼
您可以在GitHub上找到此頁面的程式碼
在標準的 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
節點來配置編輯器的其他配置詳細資訊。
以下是定義影像元件影像裁切外掛程式外觀比例的範例。 請注意,由於螢幕大小可能非常有限,所以裁切對應比率會移至全螢幕編輯器,而且只能在此顯示。
<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
實施:
setUp
tearDown
註冊編輯器(包括建構函式):
editor.register
提供編輯器與可使用它的每種資源類型(如元件中)之間的連接。
aem-authoring-extension-inplace-editor
is a sample package show to create new in-place editor in AEM.
GITHUB代碼
您可以在GitHub上找到此頁面的程式碼
您可以設定元件,讓元件擁有多個就地編輯器。 當設定多個就地編輯器時,您可以選取適當的內容並開啟適當的編輯器。 如需詳細資訊,請參閱設定多個就地編輯器檔案。
若要將新的頁面動作新增至頁面工具列,例如返回網站(控制台)動作。
aem-authoring-extension-header-backtosites
是範例套件,其中顯示如何建立自訂標題列動作,以跳回Sites主控台。
GITHUB代碼
您可以在GitHub上找到此頁面的程式碼
當內容作者沒有適當的複製權限時,就會自動觸發現成可用的工作流程啟動要求。
若要在啟動後進行自訂行為,您可以覆蓋啟動要求工作流程:
在/apps
覆蓋Sites精靈:
/libs/wcm/core/content/common/managepublicationwizard
這本身會覆寫下列的常見例項:
/libs/cq/gui/content/common/managepublicationwizard
根據需要更新工作流模型和相關配置/指令碼。
將 replicate
動作的權利從所有相關頁面的所有適當使用者移除;讓此工作流程在任何使用者嘗試發佈(或複製)頁面時觸發為預設動作。