建立頁面範本

建立頁面時,您必須選取範本,以作為建立新頁面的基礎。 範本會定義產生的頁面、任何初始內容,以及可使用的元件。

使用范 本編輯器,建立和維護範本不再是開發人員專屬的工作。也可以涉及一種稱為模板作 者的權​力用戶。開發人員仍需要設定環境、建立用戶端程式庫和建立要使用的元件,但是當這些基本功能準備就緒後,範本作者就可以彈性地建立和設定範本,而不需要開發專案。

範本控制台​允許範本作者:

  • 建立新範本或複製現有範本。
  • 管理範本的生命週期。

範本編輯器​允許範本作者:

  • 將元件新增至範本,並將其置於回應式格線上。
  • 預先設定元件。
  • 定義可在使用範本建立的頁面上編輯的元件。

本檔案說明​範本作者​如何使用範本主控台和編輯器來建立及管理可編輯的範本。

有關可編輯模板在技術級別上如何工作的詳細資訊,請參閱開發人員文檔頁面模板 — 可編輯以了解詳細資訊。

注意

AEM 6.4.5.0或更新版本必須搭配SPA Editor使用可編輯的範本。

注意

​本編輯器不支援直接在範本層級定位。可以定位根據可編輯的範本建立的頁面,但無法定位範本本身。

注意

使用​範本控制台​建立的頁面和範本不適用於傳統UI,且不支援這類使用。

開始之前

注意

管理員必須在​Configurations Browser​中配置模板資料夾,並應用適當權限,模板作者才能在該資料夾中建立模板。

在開始前,請務必考慮下列要點:

  • 建立新模板需要協作。 因此,會為每個任務指示角色

  • 根據您的執行個體的設定方式,請注意AEM現在提供兩種基本類型的範本可能會很有用。 這不會影響您實際使用範本建立頁面的方式,但會影響您可建立的範本類型,以及頁面與其範本的關聯方式。

角色

使用「模板控制台」和「模 板編輯器 」建立新模板時 ​,需要在以下角色之間協作:

  • 管理員:

    • 為模板建立新資料夾需要admin權限。
    • 這類工作通常也可由開發人員完成
  • 開發人員:

    • 著重於技術/內部詳細資訊
    • 需要開發環境的經驗。
    • 為範本作者提供必要資訊。
  • 範本作者:

    • 這是群組成員的特定作者template-authors

      • 這會分配所需的權限和權限。
    • 可以配置元件的使用情況和其他需要的高級詳細資訊:

      • 一些技術知識

        • 例如,定義路徑時使用模式。
      • 開發人員的技術資訊。

由於某些工作(例如建立資料夾)的性質,因此需要開發環境,而這需要知識/經驗。

本文檔中詳述的任務將列出負責執行這些任務的角色。

可編輯和靜態範本

AEM現在提供兩種基本範本類型:

  • 可編輯的範本

    • 範本作者可使用​Template​主控台和編輯器,建立🔗edited。 可在​工具​控制台的​一般​區段中訪問​模板​控制台。
    • 建立新頁面後,頁面與範本之間會維持動態連線。 這表示使用該範本建立的任何頁面上,都會反映對範本結構和/或鎖定內容的變更。 不會反映對未鎖定(即初始)內容的變更。
    • 使用內容原則(可從範本編輯器定義這些原則)來保留設計屬性。 可編輯的範本不再使用頁面編輯器中的設計模式。
  • 靜態範本

    • 數個AEM版本都提供靜態範本。
    • 由您的開發人員🔗提供,因此作者無法建立或編輯這些量度。
    • 系統會複製以建立新頁面,但之後不存在動態連線(不過會註冊範本名稱以取得資訊)。
    • 使用設計模式保留設計屬性。
    • 由於編輯靜態模板是開發人員的獨有任務,有關詳細資訊,請參閱開發人員文檔頁面模板 — 靜態

根據定義,範本控制台和範本編輯器只允許建立和編輯可編輯的範本。 因此,本檔案專注於可編輯的範本。

使用範本建立頁面

使用範本建立新頁面時,靜態和可編輯的範本之間沒有可見的差異,也沒有任何指示。 對於頁面作者而言,程式是透明的。

建立和管理模板

建立新的可編輯範本時,您可以:

注意

最初設定網站時,通常會預先定義​允許的範本

注意

切勿在模板中輸入任何需要為國際化的資訊。

建立範本資料夾 — 管理員

應為您的專案建立範本資料夾,以保留專案專用範本。 這是一項管理任務,在文檔頁面模板 — 可編輯中有介紹。

建立新範本 — 範本作者

  1. 開啟​範本主控台(透過​工具 -> 一般),然後導覽至所需的資料夾。

    注意

    在標準AEM例項中,範本主控台中已存在​global​資料夾。 如果在當前資料夾中找不到策略和/或模板類型,則此選項將保留預設模板,並充當後援。

    建議使用為專案🔗建立的範本資料夾。

  2. 選擇​Create,然後選擇​Create Template​以開啟嚮導。

  3. 選擇​模板類型,然後選擇​下一步

    注意

    範本類型是預先定義的範本配置,可視為範本的範本。 這些由開發人員或系統管理員預先定義。 如需詳細資訊,請參閱開發人員檔案頁面範本 — 可編輯

  4. 完成​模板詳細資訊:

    • 範本名稱
    • 說明
  5. 選擇 建立。將顯示確認,選擇​Open​以開始編輯模板或​Done​以返回模板控制台。

    注意

    建立新範本時,在主控台中標示為​Draft,表示頁面作者尚無法使用。

定義範本屬性 — 範本作者

範本可以有下列屬性:

  • 影像

    • 要用作模板縮圖的影像以輔助選擇,例如在「建立頁面」嚮導中。

      • 可上傳
      • 可根據範本內容產生
  • 標題

    • 用於標識模板的標題,如​建立頁面​嚮導中。
  • 說明

    • 提供範本及其使用的詳細資訊的選用說明,如​建立頁面​精靈中。

要查看和/或編輯屬性:

  1. 在​範本控制台​中,選取範本。
  2. 從工 具欄中選擇 「查看屬性」(View Properties)或快速選項以開啟對話框。
  3. 您現在可以檢視或編輯範本屬性。
注意

主控台會指出範本的狀態(草稿、啟用或停用)。

範本縮圖影像

若要定義範本縮圖:

  1. 編輯範本屬性。

  2. 選擇您要上傳縮圖,還是從範本內容產生縮圖。

    • 如果您要上傳縮圖,請按一下或點選「上傳影像
    • 如果要產生縮圖,請按一下或點選「產生預覽
  3. 對於這兩種方法,都會顯示縮圖的預覽。

    如果不滿意,請按一下或點選​清除​以上傳其他影像或重新產生縮圖。

  4. 對縮圖感到滿意時,按一下或點選「儲存並關閉」。

啟用和允許範本 — 範本作者

若要在建立頁面時使用範本,您必須:

  • 啟用范 本,以便在建立頁面時使用。
  • 允許范 本指定可使用範本的內容分支。

啟用範本 — 範本作者

可以啟用或停用範本,使其在​建立頁面​精靈中可用或無法使用。

注意

範本啟用後,當範本作者開始進一步更新範本時,將會顯示警告。 這會通知使用者可能已參考範本,因此任何變更都可能影響參考範本的頁面。

  1. 在​範本控制台​中,選取範本。
  2. 從工具欄中選擇​啟用​或​禁用,然後在確認對話框中再次選擇。
  3. 現在,當建立新頁面時,您可以使用範本,不過您可能想要根據需求編輯範本
注意

主控台會指出範本的狀態(草稿、啟用或停用)。

允許範本 — 製作

範本可供某些頁面分支使用或無法使用。

  1. 開啟要讓範本可用的分支根頁面的頁面屬性

  2. 開啟​Advanced​標籤。

  3. 在「 範本設定 」下 ,使用「新增」欄位 ,指定範本的路徑。

    路徑可以是明確的或使用模式。 例如:

    /conf/<your-folder>/settings/wcm/templates/.*

    路徑的順序不相關,會掃描所有路徑並擷取任何範本。

    注意

    如果「允許的模板」清單為空,則樹將升級,直到找到值/清單。

    請參閱範本可用性 — 允許的範本原則維持不變。

  4. 按一下​儲存​以儲存對頁面屬性的變更。

注意

設定時,通常會為整個網站預先定義允許的範本。

發佈範本 — 範本作者

轉譯頁面時參照範本時,必須發佈完全設定的範本,才能在發佈環境中使用。

  1. 在​範本控制台​中,選取範本。

  2. 從工具欄中選擇​發佈​以開啟嚮導。

  3. 選取要串聯發佈的​內容原則

  4. 從工具列選取​Publish​以完成動作。

編輯範本 — 範本作者

建立或編輯範本時,您可以定義各種方面。 編輯範本類似於頁面編寫。

可編輯範本的下列方面:

  • 結構

    此處新增的元件無法由頁面作者從產生的頁面中移動/移除。 如果希望頁面作者能夠將元件添加和刪除到生成的頁面,則需要向模板添加段落系統。

    元件鎖定時,您可以新增內容,但頁面作者無法編輯內容。 您可以解除鎖定元件,以便定義初始內容

    注意

    在結構模式中,不能移動、剪切或刪除任何作為未鎖定元件父級的元件。

  • 初始內容

    元件解除鎖定後,您可以定義將複製到從範本建立的結果頁面的初始內容。 可在產生的頁面上編輯這些未鎖定的元件。

    注意

    在​初始內容​模式以及產生的頁面中,可以刪除任何具有可存取父項(即佈局容器內的元件)的未鎖定元件。

  • 配置

    您可以在此處預先定義所需裝置格式的範本版面。 範本製作的 「版面」模式與頁面製作的「版面 🔗 」模式功能相同。

  • 頁面原則

    在頁面原則下,您可以將預先定義的頁面原則連結至頁面。 這些頁面原則定義各種設計設定。

  • 樣式

    樣式系統允許模板作者在元件的內容策略中定義樣式類,以便內容作者能夠在編輯頁面上的元件時選擇它們。 這些樣式可作為元件的替代視覺變化,使其更具彈性。

    有關詳細資訊,請參閱樣式系統文檔

工具列中的​模式​選取器可讓您選取和編輯範本的適當方面:

chlimage_1-363

而​頁面資訊​功能表上的​頁面原則​選項可讓您選取所需的頁面原則:

screen_shot_2018-03-23at120604

注意

如果作者開始編輯已啟用的範本,將會顯示警告。 這會通知使用者可能已參考範本,因此任何變更都可能影響參考範本的頁面。

編輯範本 — 結構 — 範本作者

在​Structure​模式中,可定義模板的元件和內容,並定義模板及其元件的策略。

  • 在範本結構中定義的元件無法在產生的頁面上移動,也無法從任何產生的頁面中刪除。

  • 如果您希望頁面作者能夠新增和移除元件,請在範本中新增段落系統。

  • 元件可以再次解鎖和鎖定,以便定義初始內容

  • 已定義元件和頁面的設計原則。

screen_shot_2018-03-23at120819

在範本編輯器的​Structure​模式中:

  • 新增元件

    有數種機制可將元件新增至範本:

    • 從側面板的​元件​瀏覽器。
    • 使用範本上元件工具列上可用的​插入元件​選項(+​圖示)或​拖曳元件至此​方塊。
    • 將資產(從側面板的​Assets​瀏覽器)直接拖曳至範本上,就地產生適當的元件。

    新增後,每個元件都會加上:

    • 邊框
    • 顯示元件類型的標籤
    • 要在元件已解鎖時顯示的標籤
    注意

    將現成可用的標題元件新增至範本時 ​,其中會包含預設的文字 結構

    如果您變更此項目,並新增您自己的文字,則從範本建立頁面時,將會使用此更新的文字。

    如果您保留預設文字(結構),則標題會預設為後續頁面的名稱。

    注意

    將元件和資產新增至範本雖然不相同,但有許多與頁面編寫時的類似動作相似之處。

  • 元件動作

    將元件新增至範本後,對元件執行動作。 每個個別執行個體都有一個工具列,可讓您存取可用的動作,該工具列取決於元件類型。

    screen_shot_2018-03-23at120909

    它也取決於所採取的操作,例如當策略與元件關聯時,設計配置表徵圖將可用。

  • 編輯和配置

    透過這兩個動作,您可以將內容新增至元件。

  • 用於指示結構的邊框

    在​Structure​模式下工作時,橘色邊框表示當前選擇的元件。 虛線也代表上層元件。

    例如,在螢幕擷圖中,選取​Text​元件,位於​Layout Container(回應格線)內。

    chlimage_1-364

  • 策略和屬性(一般)

    內容(或設計)原則會定義元件的設計屬性。 例如,可用元件或最小/最大尺寸。 這些規則適用於範本(以及使用範本建立的頁面)。

    為元件建立內容原則或選取現有原則。 這可讓您定義設計詳細資訊。

    chlimage_1-365 chlimage_1-366

    設定視窗分為兩個部分。

    • 在​Policy​對話框的左側,您可以選擇現有策略或選擇現有策略。
    • 在對話框的右側,在​Properties​下,可以設定特定於元件類型的屬性。

    可用的屬性取決於所選元件。 例如,對於文本元件,屬性定義了複製和貼上選項、格式選項和段落樣式等選項。

    政策

    內容(或設計)原則會定義元件的設計屬性。 例如,可用元件或最小/最大尺寸。 這些規則適用於範本(以及使用範本建立的頁面)。

    在​Policy​下,可以通過下拉清單選擇要應用到元件的現有策略。

    chlimage_1-367

    通過選擇​選擇策略​下拉清單旁的添加按鈕,可以添加新策略。 然後,應在​Policy Title​欄位中指定新標題。

    chlimage_1-368

    選擇策略​下拉清單中選定的現有策略可以使用下拉清單旁邊的複製按鈕作為新策略複製。 然後,應在​Policy Title​欄位中指定新標題。 預設情況下,複製的策略的標題將為​Copy of X,其中X是複製策略的標題。

    chlimage_1-369

    策略說明在​策略說明​欄位中是可選的。

    在​還使用所選策略​部分的其他模板中,您可以輕鬆查看哪些其他模板使用在​選擇策略​下拉清單中選擇的策略。

    chlimage_1-370

    注意

    如果添加了多個相同類型的元件作為初始內容,則相同的策略適用於所有元件。 這反映了靜態模板的​**設計模式**​中的相同限制。

    屬性

    在​屬性​標題下,您可以定義元件的設定。 標題有兩個標籤:

    • 主要
    • 功能

    主要

    在​Main​標籤上,定義元件最重要的設定。

    例如,對於影像元件,可定義允許的寬度並啟用延遲載入。

    如果設定允許多個配置,請按一下或點選​Add​按鈕以添加其他配置。

    chlimage_1-371

    若要移除設定,請按一下或點選設定右側的​Delete​按鈕。

    若要移除設定,請按一下或點選 ​ Delete​按鈕。

    chlimage_1-372

    功能

    Features​標籤可讓您啟用或停用元件的其他功能。

    例如,對於影像元件,您可以定義裁切比例、允許的影像方向,以及是否允許上傳。

    chlimage_1-373

    注意

    請注意,在AEM裁切比率中,定義為​height/width。 這與傳統的寬度/高度定義不同,且是由於舊版相容性原因而完成。 如果您清楚定義​名稱,因為這是UI中顯示的內容,頁面編寫使用者將不會察覺到任何差異。

    注意

    實作RTF編輯器的元件 的內容原則只能針對RTE透過其UI設定提供的選項定義。

  • 策略和屬性(佈局容器)

    佈局容器的策略和屬性設定與一般用法類似,但有一些差異。

    注意

    容器元件必須配置策略,因為它可讓您定義容器中可用的元件。

    設定視窗分為兩個部分,如同一般使用視窗一樣。

    政策

    內容(或設計)原則會定義元件的設計屬性。 例如,可用元件或最小/最大尺寸。 這些規則適用於範本(以及使用範本建立的頁面)。

    在​Policy​下,可以通過下拉清單選擇要應用到元件的現有策略。 此功能與一般使用視窗的功能相同。

    屬性

    在​屬性​標題下,您可以選擇哪些元件可用於配置容器並定義其設定。 標題有三個標籤:

    • 允許的元件
    • 預設元件
    • 回應式設定

    允許的元件

    在「允許的元件」標籤上,定義哪些元件可用於配置容器。

    • 元件會依其元件群組分組,可展開和收合。
    • 可以通過檢查組名稱來選擇整個組,而通過取消檢查可以取消選擇所有組。
    • 減號至少表示已選取一個組中的項目,但並非全部。
    • 可使用搜尋來依名稱篩選元件。
    • 元件組名稱右側列出的計數表示這些組中選定元件的總數(無論篩選器為何)。

    chlimage_1-374

    預設元件

    在​預設元件​標籤中,您定義哪些元件會自動與指定的媒體類型相關聯,以便當作者從資產瀏覽器拖曳資產時,AEM能知道要與哪個元件建立關聯。 請注意,此類配置僅可使用帶拖放區的元件。

    按一下或點選「新增對應 」,以新增全新元件和MIME類型對應。

    在清單中選取元件,然後按一下或點選「 新增類型 」,將其他MIME類型新增至已映射的元件。按一下「 刪除 」圖示以移除MIME類型。

    chlimage_1-376

    回應式設定

    在​回應式設定​標籤上,您可以在版面容器的產生格線中設定欄數。

  • 解除鎖定/鎖定元件

    您可以解除鎖定/鎖定元件,以定義內容是否可在​初始內容​模式中進行變更。

    元件解除鎖定時:

    • 邊框中顯示開啟的掛鎖指示器。

    • 元件工具列將隨之調整。

    • 已輸入的任何內容將不再以​Structure​模式顯示。

      • 已輸入的內容被視為初始內容,且僅在​初始內容​模式中顯示。
    • 無法移動、剪切或刪除未鎖定元件的父項。

    chlimage_1-376

    這包括解除鎖定容器元件,以便在初始內容模式或產生的頁 面中新增其他元件 。如果您在解除鎖定容器之前已將元件/內容新增至容器,則這些元件/內容在「結構」模式中將不再顯示,但會以「初始內容 」模式顯示。在「 結構模式」中,只有容器元件本身會顯示其「允許的元 件」清單

    chlimage_1-377

    為了節省空間,版面容器不會成長以容納允許的元件清單。 容器反而會變成可捲動清單。

    可配置的元件以「策略」表徵圖顯示 ​,可以點選或按一下該表徵圖以編輯該元件的策略和屬性。

    chlimage_1-378

  • 與現有頁面的關係

    如果在根據範本建立頁面後更新結構,則這些頁面將反映對範本的變更。 工具列中會顯示警告,提醒您此事實以及確認對話方塊。

    chlimage_1-379

編輯範本 — 初始內容 — 作者

初始 內容模式用於定義內容,當首次根據範本建立頁面時,這些內容將會顯示。然後頁面作者就可以編輯初始內容。

雖然在「結構 」模式下建立的所有內容在「初始內容」中都可,但只能選擇和編輯已解鎖的元件。

注意

使用 該範本建立的頁面可以考慮編輯模式的初始「內容模式」。因此,策略未在​初始內容​模式中定義,而是在​**結構**​模式中定義。

  • 標籤可用於編輯的未鎖定元件。 選取後,其邊框會呈藍色:

    chlimage_1-380

  • 解除鎖定的元件有一個工具欄,允許您編輯和配置內容:

    chlimage_1-381

  • 如果容器元件已解除鎖定(在「結 」模式中),則您可以在「初始內容 ​」模式中新增元件至容器。在「初始內 容」模式中新增的元件 ,可在產生的頁面上移動或從中刪除。

    您可以使用「拖曳元件到此處 」區域,或從適當容器的工具列 中使用「插入新元件 ​」選項來新增元件。

    chlimage_1-382 chlimage_1-383

  • 如果在根據範本建立頁面後更新範本的初始內容,則這些頁面不會受到範本中初始內容變更的影響。

注意

初始內容的用途是準備元件和頁面版面,以作為建立內容的起點。 其目的並非實際內容可維持原樣。 因此,無法翻譯初始內容。

編輯範本 — 版面 — 範本作者

您可以定義裝置範圍的範本配置。 範本 的回應式版面配置在頁面製作上的運作方式與相同。

注意

版面的變更會反映在​初始內容​模式中,但在​結構​模式中未出現任何變更。

chlimage_1-384

編輯範本 — 頁面設計 — 範本作者/開發人員

頁面設計 (包括所需的用戶端程式庫和頁面原則) 會保留在「頁面資訊」功能表的「 頁面設計 」選 ​項下。

若要存取​頁面設計​對話方塊:

  1. 從​模板編輯器​中,從工具欄中選擇​頁資訊,然後選擇​頁設計​以開啟對話框。

  2. 頁面設計​對話方塊隨即開啟,並分為兩個區段:

    chlimage_1-385

頁面原則

您可以將內容原則套用至範本或產生的頁面。 這會定義頁面上主要段落系統的內容原則。

chlimage_1-386

  • 您可以從​Select policy​下拉式清單中為頁面選擇現有策略。

    chlimage_1-387

    通過選擇​選擇策略​下拉清單旁的添加按鈕,可以添加新策略。 然後,應在​Policy Title​欄位中指定新標題。

    chlimage_1-388

    選擇策略​下拉清單中選定的現有策略可以使用下拉清單旁邊的複製按鈕作為新策略複製。 然後,應在​Policy Title​欄位中指定新標題。 預設情況下,複製的策略的標題將為​Copy of X,其中X是複製策略的標題。

    chlimage_1-389

  • 在​Policy Title​欄位中定義策略的標題。 需要策略才能有標題,以便在​選擇策略​下拉清單中輕鬆選擇該標題。

    chlimage_1-390

  • 策略說明在​策略說明​欄位中是可選的。

  • 在​還使用所選策略​部分的其他模板中,您可以輕鬆查看哪些其他模板使用在​選擇策略​下拉清單中選擇的策略。

    chlimage_1-391

頁面內容

使用頁面屬性,您可以使用​頁面設計​對話方塊來定義所需的用戶端程式庫。 這些客戶端庫包括要載入模板的樣式表和javascript以及使用該模板建立的頁。

chlimage_1-392

  • 指定您要套用至使用此範本建立之頁面的用戶端程式庫。 在​用戶端程式庫​區段的文字欄位中輸入程式庫名稱。

    chlimage_1-393

  • 如果需要多個程式庫,請按一下「新增」按鈕,為程式庫名稱新增其他文字欄位。

    chlimage_1-394

    視需要為用戶端程式庫新增任意數量的文字欄位。

    chlimage_1-395

  • 使用拖曳控點拖曳欄位,視需要定義程式庫的相對位置。

    chlimage_1-396

注意

雖然範本作者可以在範本上指定頁面原則,但他/她需要從開發人員取得適當用戶端程式庫的詳細資訊。

編輯範本 — 初始頁面屬性 — 作者

使用​初始頁面屬性​選項,可以定義建立結果頁面時要使用的初始頁面屬性

  1. 從模板編輯器中,從工具欄中選擇​頁資訊,然後選擇​初始頁屬性​以開啟對話框。

  2. 在對話方塊中,您可以定義要套用至使用此範本建立之頁面的屬性。

    chlimage_1-397

  3. 使用​Done​確認定義。

最佳作法

建立範本時,您應考慮:

  1. 從該範本建立頁面後,對範本所做的變更所產生的影響。

    以下是範本上可能的不同操作清單,以及這些操作如何影響從這些操作建立的頁面:

    • 結構變更:

      • 這些會立即套用至產生的頁面。
      • 訪客仍需要發佈已變更的範本,才能看到變更。
    • 內容原則和設計設定的變更:

      • 這些規則會立即套用至產生的頁面。
      • 需要發佈變更,訪客才能看到變更。
    • 初始內容的變更:

      • 這些規則僅適用於範本變更後建立的頁面。
    • 版面的變更取決於修改的元件是否屬於:

      • 僅限結構 — 立即應用
      • 包含初始內容 — 僅限在變更後建立的頁面上

    請格外小心:

    • 在啟用的模板上鎖定或解鎖元件。

    • 這可能會產生副作用,因為現有頁面可能已在使用它。 通常:

      • 現有頁面上將缺少解鎖元件(已鎖定)。
      • 鎖定元件(可編輯)將隱藏該內容,使其不會顯示在頁面上。
    注意

    AEM在不再是草稿的範本上變更元件的鎖定狀態時,會顯示明確警告。

  2. 為網站特 定範本建立專屬資料夾。

  3. 從範本 控制台發佈 ​範本。

本頁內容