自訂頁面編寫

注意

本檔案說明如何在現代化、可觸控的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中進行任何更改

添加新層(模式)

編輯頁面時,有各種模式可用。 這些模式是使用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元件用於允許用戶選擇特定資源的路徑,則可通過以下方式過濾顯示的路徑:

如需建立自訂述詞的詳細資訊,請參閱this article

注意

通過實施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 is a sample package show to create new in-place editor in AEM.

GITHUB代碼

您可以在GitHub上找到此頁面的程式碼

配置多個就地編輯器

您可以設定元件,讓元件擁有多個就地編輯器。 當設定多個就地編輯器時,您可以選取適當的內容並開啟適當的編輯器。 如需詳細資訊,請參閱設定多個就地編輯器檔案。

新增頁面動作

若要將新的頁面動作新增至頁面工具列,例如​返回網站(控制台)動作。

程式碼範例

aem-authoring-extension-header-backtosites 是範例套件,其中顯示如何建立自訂標題列動作,以跳回Sites主控台。

GITHUB代碼

您可以在GitHub上找到此頁面的程式碼

自訂啟動工作流程要求

當內容作者沒有適當的複製權限時,就會自動觸發現成可用的工作流程​啟動要求

若要在啟動後進行自訂行為,您可以覆蓋​啟動要求​工作流程:

  1. /apps覆蓋​Sites​精靈:

    /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
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now