自訂頁面編寫

AEM提供多種機制，讓您自訂製作例項的頁面製作功能（以及consoles）。

• Clientlibs

  Clientlibs可讓您擴充預設實作，以實現新功能，同時重複使用標準函式、物件和方法。 在自定義時，您可以在/apps.下建立自己的clientlib。新的clientlib必須：

  • 取決於編寫clientlib cq.authoring.editor.sites.page
  • 屬於適當的cq.authoring.editor.sites.page.hook類別

• 覆蓋

  覆蓋是以節點定義為基礎，可讓您以您自己的自訂功能（在/libs中）覆蓋標準功能。 /apps當建立覆蓋時，不需要原稿的1:1復本，因為sling資源合併允許繼承。

這些功能可以透過許多方式來延伸AEM例項中的頁面編寫功能。 下面將介紹一個選項（在高級別）。

添加新層（模式）

編輯頁面時，有各種模式可用。 這些模式是使用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上找到此頁面的程式碼

• 在GitHub上開啟aem-authoring-new-layer-mode專案
• 將專案下載為a ZIP file

新增選擇類別至資產瀏覽器

資產瀏覽器會顯示各種類型／類別的資產（例如影像、檔案等）。 資產也可依這些資產類別篩選。

程式碼範例

aem-authoring-extension-assetfinder-flickr 是範例套件，說明如何新增群組至資產搜尋器。此範例會連線至Flickr的公用串流，並在側面板中顯示。

GITHUB代碼

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

• 在GitHub上開啟aem-authoring-extension-assetfinder-flickr專案
• 將專案下載為a ZIP file

篩選資源

在編寫頁面時，使用者通常必須從資源（例如頁面、元件、資產等）中選取。 這可以以清單的形式，例如作者必須從中選擇項目。

為了將清單保持在合理大小並且與使用案例相關，可以以自訂謂詞的形式實作篩選器。 例如，如果pathbrowser Granite元件用於允許用戶選擇特定資源的路徑，則可通過以下方式過濾顯示的路徑：

• 實作自訂述詞，方法是實作com.day.cq.commons.predicate.AbstractNodePredicate介面。
• 指定謂語的名稱，並在使用pathbrowser時參考該名稱。

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

將新操作添加到元件工具欄

每個元件（通常）都有工具列，可讓您存取該元件可執行的動作範圍。

程式碼範例

aem-authoring-extension-toolbar-screenshot 是示例包，其中顯示如何建立自定義工具欄操作來渲染元件。

GITHUB代碼

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

• 在GitHub上開啟aem-authoring-extension-toolbar-screenshot專案
• 將專案下載為a ZIP file

新增就地編輯器

標準就地編輯器

在標準的 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屬性所設定，定義為​height/width。 這與傳統的寬度／高度定義不同，是由於舊有的相容性原因而完成的。 如果您清楚地定義name屬性，編寫使用者將不會察覺到任何差異，因為這是UI中顯示的內容。

建立新就地編輯器

要實作新的就地編輯器（在您的clientlib中）:

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上找到此頁面的程式碼

• 在GitHub上開啟aem-authoring-extension-inplace-editor專案
• 將專案下載為a ZIP file

配置多個就地編輯器

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

新增頁面動作

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

程式碼範例

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

GITHUB代碼

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

• 在GitHub上開啟aem-authoring-extension-header-backtosites專案
• 將專案下載為a ZIP file

自訂啟動工作流程要求

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

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

1. 在/apps覆蓋​Sites​精靈：

   /libs/wcm/core/content/common/managepublicationwizard

   注意

   這本身會覆寫下列的常見例項：

   /libs/cq/gui/content/common/managepublicationwizard

2. 根據需要更新工作流模型和相關配置／指令碼。

3. 將 replicate動作的權利從所有相關頁面的所有適當使用者移除；讓此工作流程在任何使用者嘗試發佈（或複製）頁面時觸發為預設動作。