本檔案說明如何在現代化、觸控式的UI中自訂頁面編寫,但不適用於傳統UI。
AEM提供多種機制,讓您自訂頁面編寫功能(以及 主控台)。
Clientlibs
Clientlibs可讓您擴充預設實作以實現新功能,同時重複使用標準函式、物件和方法。 自訂時,您可以在 /apps.
新的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
下次升級執行個體時即會覆寫(而當您套用Hotfix或Feature Pack時,很可能會覆寫)。
設定和其他變更的建議方法為:
/libs
)底下 /apps
/apps
編輯頁面時,會有各種 模式 可用。 這些模式是使用 層. 這可讓使用者存取相同頁面內容的不同功能類型。 標準層包括:編輯、預覽、注釋、開發人員和鎖定目標。
標準AEM例項提供MSM層。 此存取與 多網站管理 並在圖層中加亮。
若要在動作中查看,您可以編輯任何 We.Retail語言副本 頁面(或任何其他即時副本頁面),然後選取 即時副本狀態 模式。
您可以在下列位置找到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
.如需建立自訂述詞的詳細資訊,請參閱 這篇文章.
透過實作來實作自訂述詞 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
屬性,定義為 高度/寬度. 這與傳統的寬度/高度定義不同,且是由於舊版相容性原因而完成。 若您定義 name
屬性,因為這是UI中顯示的內容。
若要實作新的就地編輯器(在您的clientlib內):
例如,請參閱:
/libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js
實作:
setUp
tearDown
註冊編輯器(包括建構子):
editor.register
提供編輯器與可使用的每個資源類型(如元件中)之間的連線。
aem-authoring-extension-inplace-editor
是範例套件,說明如何在AEM中建立新的就地編輯器。
GITHUB上的程式碼
您可以在GitHub上找到此頁面的程式碼
您可以設定元件,使元件擁有多個就地編輯器。 設定多個就地編輯器時,您可以選取適當的內容並開啟適當的編輯器。 請參閱 配置多個就地編輯器 檔案以取得詳細資訊。
若要將新頁面動作新增至頁面工具列,例如 返回站點 (控制台)動作。
aem-authoring-extension-header-backtosites
是範例套件,說明如何建立自訂標頭列動作以跳回Sites主控台。
GITHUB上的程式碼
您可以在GitHub上找到此頁面的程式碼
現成可用的工作流程, 啟動請求,則會在內容作者沒有適當的復寫權限時自動觸發。
若要在啟動後進行自訂行為,您可以覆蓋 啟動請求 工作流程:
在 /apps
覆蓋 網站 嚮導:
/libs/wcm/core/content/common/managepublicationwizard
這本身會覆寫下列的常見例項:
/libs/cq/gui/content/common/managepublicationwizard
更新 工作流模型 和相關的設定/指令碼。
移除 replicate
動作 從所有相關頁面的所有適當用戶處;讓任何使用者嘗試發佈(或復寫)頁面時,將此工作流程觸發為預設動作。