自訂核心元件

核心元件實作了數種可輕鬆自訂的模式，從簡單樣式到進階功能可重複使用。

靈活的體系結構

核心元件從一開始就設計為靈活、可擴展。 檢視其架構的概觀，以瞭解可在何處進行自訂。

核心元件架構

  • 設計對話 框定義作者可以在編輯對話框中執行或不能執行的操作。
  • 編輯對 話方塊只顯示作者允許使用的選項。
  • Sling模型 會驗證並準備檢視的內容（範本）。
  • Sling模型的結果 可序列化為JSON for SPA使用案例。
  • HTL會轉譯 HTML伺服器端，以進行傳統伺服器端轉譯。
  • HTML輸出 具有語義、可存取、搜尋引擎最佳化，而且樣式簡單。

所有核心元件都實施Style System。

AEM Project Archetype

AEM Project Archetype會將最小的Adobe Experience Manager專案視為您自己專案的起點，包括使用SlingModels自訂HTL元件的範例，以邏輯和正確實作具有建議之proxy模式的核心元件。

自訂模式

自定義對話框

您可能需要自訂核心元件對話方塊中可用的設定選項，不論是設計對話方塊或編輯對話方塊。

每個對話框都具有一致的節點結構。 建議將此結構複製在繼承元件中，以便Sling Resource Merger和Hide Conditions可用來隱藏、取代或重新排序原始對話方塊的區段。 要複製的結構定義為任何到頁籤項節點級別的結構。

要完全相容當前版本對對話框所做的任何更改，請務必不要接觸Tab項級別下的結構（隱藏、添加到、替換、重新排序等）。 而是透過sling:hideResource屬性隱藏父代的標籤項目（請參閱 Sling Resource Merger Properties），以及新增包含定製設定欄位的標籤項目。 sling:orderBefore 可用來重新排序索引標籤項目。

下面的對話框演示了建議的對話框結構，以及如何隱藏和替換繼承的頁籤，如上所述：

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="https://www.jcp.org/jcr/1.0"
          xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
          xmlns:granite="https://www.adobe.com/jcr/granite/1.0"
          jcr:primaryType="nt:unstructured">
    <content jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                        <originalTab
                                jcr:primaryType="nt:unstructured"
                                sling:hideResource="true"/>
                        </originalTab>
                        <myTab
                               jcr:primaryType="nt:unstructured"
                               jcr:title="My Tab"
                               sling:resourceType="granite/ui/components/coral/foundation/container"/>
                               <!-- myTab content -->
                        </myTab>
                </items>
            </basic>
        </items>
    </content>
</jcr:root>

自訂核心元件的邏輯

核心元件的Business邏輯是在Sling Models中實作。 此邏輯可透過使用Sling委派模式來擴充。

例如，標題核心元件使用所請求資源的jcr:title屬性來提供標題文本。 如果未定義jcr:title屬性，則會實作目前頁面標題的後援。 我們想要變更行為，以便始終顯示目前頁面的標題。

由於核心元件模型的實作是私有的，因此必須以委派模式加以擴充。

@Model(adaptables = SlingHttpServletRequest.class,
       adapters = Title.class,
       resourceType = "myproject/components/pageHeadline")
public class PageHeadline implements Title {
    @ScriptVariable private Page currentPage;
    @Self @Via(type = ResourceSuperType.class)
    private Title title;
    @Override public String getText() {
        return currentPage.getTitle();
    }
    @Override public String getType() {
        return title.getType();
    }
}

如需委派模式的詳細資訊，請參閱核心元件GitHub Wiki文章 Delegation Pattern for Sling Models。

自定義標籤

有時，進階樣式需要元件的不同標籤結構。

您可輕鬆將需要從核心元件修改的HTL檔案複製至proxy元件。

再舉核心階層連結元件的範例，若要自訂其標籤輸出，必須將breadcrumb.html檔案複製至具有指向核心階層連結元件之sling:resourceSuperTypes的網站特定元件。

設定元件的樣式

第一種自訂形式是套用CSS樣式。

為了讓這更簡單，核心元件會轉換語義標籤並遵循受Bootstrap啟發而制定的標準化命名慣例。 此外，為了輕鬆定位和命名個別元件的樣式，每個核心元件都會封裝在DIV元素中，並包含" cmp"和" cmp-<name>"類別。

例如，查看v1核心階層連結元件的HTL檔案：breadcrumb.html，我們看到元素輸出的階層為ol.breadcrumb > li.breadcrumb-item > a。 因此，若要確定CSS規則只影響該元件的階層連結類別，所有規則都應以如下所示的名稱命名：

.cmp-breadcrumb .breadcrumb {}  
.cmp-breadcrumb .breadcrumb-item {}  
.cmp-breadcrumb a {}

此外，每個核心元件都運用AEM Style System功能，讓範本作者定義其他CSS類別名稱，頁面作者可套用至元件。 這允許為每個模板定義一個允許的元件樣式清單，以及其中一個樣式是否預設應用於該類型的所有元件。

自定義的升級相容性

有三種不同的升級方式：

  • 升級AEM版本
  • 將核心元件升級到新的次要版本
  • 將核心元件升級到主要版本

一般而言，將AEM升級至新版本不會影響核心元件或自訂作業，但元件版本也支援要移轉至的新AEM版本，且自訂作業不會使用已過時或移除的API。

升級核心元件而不切換至較新的主要版本時，只要使用本頁所述的自訂模式，就不會影響自訂。

切換至較新的主要核心元件版本僅與內容結構相容，但自訂可能需要重新構圖。 將為每個元件版本發佈清除更改日誌，以突出顯示將影響本頁所述的自定義類型的更改。

支援自定義

和任何AEM元件一樣，在自訂設定方面有許多需要注意的事項：

  1. 切勿直接修改核心元件的程式碼。

    這會使這些元件完全不受支援，並讓元件的未來更新變得十分痛苦。 請改用本頁所述的自訂方法。

  2. 自訂代碼是您自己的責任。

    我們的支援計畫不涵蓋自訂程式碼，而且報告的問題無法與當做檔案記錄使用的Vanilla Core Components重制。

  3. 觀看已過時和移除的功能。

    在將每個新AEM版本升級至時，請留意「已過時和已移除的功能」頁面，以確保所有使用的API仍為主題。

另請參閱核心元件支援部分。

閱讀下一節內容:

本頁內容