建立頁面範本 creating-page-templates
建立頁面時,您必須選取範本,作為建立新頁面的基礎。 範本會定義結果頁面的結構、任何初始內容以及可以使用的元件。
使用范 本編輯器,建立和維護範本不再是開發人員專屬的工作。也可以涉及一種稱為模板作 者的權 力用戶。開發人員仍需要設定環境、建立用戶端程式庫和建立要使用的元件,但是當這些基本功能準備就緒後,範本作者就可以彈性地建立和設定範本,而不需要開發專案。
範本主控台 允許範本作者:
- 建立範本或複製現有範本。
- 管理範本的生命週期。
範本編輯器 允許範本作者:
- 將元件新增至範本,並將其放置在回應式格線上。
- 預先設定元件。
- 定義在使用範本建立的頁面上可編輯哪些元件。
本檔案說明 範本作者 如何使用範本主控台和編輯器來建立和管理可編輯的範本。
如需技術層面可編輯範本如何運作的詳細資訊,請參閱開發人員檔案頁面範本 — 可編輯以取得詳細資訊。
在您開始之前 before-you-start
開始之前,請務必考慮以下幾點:
角色 roles
使用 範本主控台 和 範本編輯器 建立範本需要下列角色之間的共同作業:
-
管理員:
-
建立範本的新資料夾需要
admin
許可權。 -
這類工作通常也可以由開發人員完成
-
-
開發人員:
- 著重於技術/內部細節
- 需要開發環境的經驗。
- 為範本作者提供必要資訊。
-
範本作者:
-
此為群組
template-authors
成員的特定作者- 這會配置所需的許可權和許可權。
-
可以設定元件和其他高階詳細資訊的使用,這些需要:
-
一些技術知識
- 例如,在定義路徑時使用模式。
-
來自開發人員的技術資訊。
-
-
由於某些工作的性質(例如建立資料夾),需要開發環境,而這需要知識/經驗。
本檔案中詳細列出的任務以及負責執行這些任務的角色。
可編輯和靜態範本 editable-and-static-templates
AEM現在提供兩種基本型別的範本:
-
靜態範本
根據定義,範本控制檯和範本編輯器只允許建立和編輯可編輯的範本。 因此,本檔案僅側重於可編輯的範本。
使用範本建立頁面 using-a-template-to-create-a-page
使用範本來建立頁面時,靜態範本與可編輯範本之間沒有可見的差異,也沒有任何指示。 對於頁面作者,程式是透明的。
建立和管理範本 creating-and-managing-templates
建立可編輯的範本時,您可以:
建立範本資料夾 — 管理員 creating-a-template-folder-admin
您應該為專案建立範本資料夾,以儲存專案特定的範本。 這是一項管理員工作,在頁面範本 — 可編輯檔案中有所說明。
建立新範本 — 範本作者 creating-a-new-template-template-author
-
開啟 範本主控台 (透過 工具> 一般),然後導覽至所需的資料夾。
note note NOTE 在標準AEM執行個體中,global 資料夾已存在於範本主控台中。 此檔案會保留預設範本,並在目前資料夾中找不到原則及/或範本型別時,做為遞補內容。 建議最好使用專案🔗所建立的範本資料夾。 -
選取 建立,接著選取 建立範本 以開啟精靈。
-
選取 範本型別,然後選取 下一步。
note note NOTE 範本型別是預先定義的範本配置,可視為範本的範本。 這些是由開發人員或系統管理員預先定義的。 如需詳細資訊,請參閱開發人員檔案頁面範本 — 可編輯。 -
完成 範本詳細資料:
- 範本名稱
- 說明
-
選擇 建立。顯示確認訊息,選取 開啟 以開始編輯範本或 完成 以返回範本主控台。
note note NOTE 建立新範本時,會在主控台中將其標示為 草稿,這表示頁面作者還不能使用此範本。
定義範本屬性 — 範本作者 defining-template-properties-template-author
範本可以有下列屬性:
-
影像
-
要做為範本🔗的縮圖以輔助選取的影像,例如「建立頁面」精靈中的選取。
- 可以上傳
- 可根據範本內容產生
-
-
標題
- 用於識別範本的標題,例如 建立頁面 精靈中的標題。
-
說明
- 選用的說明,可提供範本及其使用方式的詳細資訊,例如 建立頁面 精靈中顯示的說明。
若要檢視和/或編輯屬性:
- 在 範本主控台 中,選取範本。
- 從工 具欄中選擇 「查看屬性」(View Properties)或快速選項以開啟對話框。
- 您現在可以檢視或編輯範本屬性。
範本縮圖影像 template-thumbnail-image
若要定義範本縮圖:
-
編輯範本屬性。
-
選擇您要上傳縮圖或是從範本內容產生縮圖。
- 如果要上傳縮圖,請按一下 上傳影像
- 如果您想要產生縮圖,請按一下 產生預覽
-
對於這兩種方法,都會顯示縮圖的預覽。
如果不滿意,請按一下[清除]上傳其他影像或重新產生縮圖。
-
如果您對縮圖感到滿意,請按一下[儲存並關閉]。
啟用和允許範本 — 範本作者 enabling-and-allowing-a-template-template-author
若要在建立頁面時使用範本,您需要:
啟用範本 — 範本作者 enabling-a-template-template-author
可以啟用或停用範本,使其在 建立頁面 精靈中可用或無法使用。
允許範本 — 作者 allowing-a-template-author
範本可以供某些頁面分支使用或無法使用。
發佈範本 — 範本作者 publishing-a-template-template-author
由於範本在轉譯頁面時為參考狀態,因此需要發佈已完整設定的範本,才能用於發佈環境。
-
在 範本主控台 中,選取範本。
-
從工具列選取 Publish 以開啟精靈。
-
選取要同時發佈的 內容原則。
-
從工具列選取 Publish 以完成動作。
編輯範本 — 範本作者 editing-templates-template-authors
建立或編輯範本時,您可以定義多個方面。 編輯範本類似於頁面製作。
可以編輯範本的下列方面:
-
頁面作者無法移動/移除結果頁面中新增的元件。 如果您希望頁面作者能夠在產生的頁面中新增和移除元件,則需將段落系統新增至範本。
鎖定元件後,您可以新增頁面作者無法編輯的內容。 您可以解除鎖定元件,以定義初始內容。
note note NOTE 在結構模式中,任何作為已解鎖元件之父件的元件都無法移動、剪下或刪除。 -
解鎖元件後,您可以定義要複製到產生頁面(使用範本建立)的初始內容。 您可以在產生的頁面上編輯這些已解鎖的元件。
note note NOTE 在 初始內容 模式和結果頁面中,可以刪除任何具有可存取父項的已解鎖元件(亦即配置容器內的元件)。 -
您可以在此處預先定義所需裝置格式的範本配置。 範本製作的 「版面」模式與頁面製作的「版面 」模式功能相同。
-
在頁面原則底下,您可以將預先定義的頁面原則連結至頁面。 這些頁面原則會定義各種設計配置。
-
樣式系統可讓範本作者在元件的內容原則中定義樣式類別,讓內容作者在編輯頁面上的元件時能夠選取這些類別。 這些樣式可作為元件的替代視覺變體,使其更靈活。
如需詳細資訊,請參閱樣式系統檔案。
工具列中的 模式 選取器可讓您選取並編輯範本的適當外觀:
雖然 頁面資訊 功能表上的 頁面原則 選項可讓您選取必要的頁面原則:
編輯範本 — 結構 — 範本作者 editing-a-template-structure-template-author
在 結構 模式中,您可為範本定義元件和內容,並為範本及其元件定義原則。
-
範本結構中定義的元件無法在產生的頁面上移動,也無法從任何產生的頁面中刪除。
-
如果您希望頁面作者能夠新增和移除元件,請新增段落系統至範本。
-
您可以解除鎖定元件,然後再將其鎖定,讓您定義初始內容。
-
元件和頁面的設計原則已定義。
在範本編輯器的 結構 模式中:
-
新增元件
將元件新增至範本的機制有幾種:
-
從側面板中的 元件 瀏覽器。
-
使用範本上現有元件工具列上的 插入元件 選項(+ 圖示)或 將元件拖曳到這裡 方塊。
-
將資產(從側面板中的 Assets 瀏覽器)直接拖曳到範本上,就地產生適當的元件。
新增後,每個元件都會標示:
- 邊框
- 顯示元件型別的標籤
- 解鎖元件時顯示的標籤
note note NOTE 將現成可用的標題元件新增至範本時 ,其中會包含預設的文字 結構。 如果您變更此專案,並新增您自己的文字,則從範本建立頁面時,會使用此更新的文字。 如果您保留預設文字(結構),則標題將預設為後續頁面的名稱。 note note NOTE 將元件和資產新增至範本時,雖然並不完全相同,但在頁面製作時,與類似的動作有許多相似之處。 -
-
元件動作
將元件新增至範本後,請對元件執行動作。 每個個別例項都有可讓您存取可用動作的工具列,工具列視元件型別而定。
也可以取決於所採取的動作,例如當原則已與元件相關聯時,則設計設定圖示會變為可用。
-
編輯和設定
透過這兩個動作,您可以將內容新增至元件。
-
框線表示結構
在 結構 模式下工作時,橘色邊框表示目前選取的元件。 虛線也表示父元件。
例如,在 文字 元件下方的熒幕擷圖中,已選取 配置容器 (responsivegrid)中的元件。
-
原則與屬性(一般)
內容(或設計)原則會定義元件的設計屬性。 例如,可用的元件或最小/最大尺寸。 這些適用於範本(以及使用範本建立的頁面)。
為元件建立內容原則,或選取現有的原則。 這可讓您定義設計詳細資訊。
設定視窗分為兩個部分。
- 在對話方塊左側的 原則 下,您可以選取現有原則或選取現有原則。
- 在對話方塊右側的 屬性 下,您可以設定元件型別的特定屬性。
可用的屬性取決於所選的元件。 例如,對於文字元件,屬性會定義複製和貼上選項、格式選項以及段落樣式等選項。
原則
內容(或設計)原則會定義元件的設計屬性。 例如,可用的元件或最小/最大尺寸。 這些適用於範本(以及使用範本建立的頁面)。
在 原則 下,您可以透過下拉式清單選取要套用至元件的現有原則。
選取 選取原則 下拉式清單旁的新增按鈕,即可新增原則。 然後,原則標題 欄位中應該會提供新標題。
在 選取原則 下拉式清單中選取的現有原則,可以使用下拉式清單旁的複製按鈕來復製為新原則。 然後,原則標題 欄位中應該會提供新標題。 依預設,複製的原則標題為 X 的副本,其中X是複製原則的標題。
在 原則說明 欄位中,原則的說明是選擇性的。
在 其他範本也使用選取的原則 區段中,您可以輕鬆檢視其他哪些範本使用在 選取原則 下拉式清單中選取的原則。
note note NOTE 如果將相同型別的多個元件新增為初始內容,則相同原則會套用至所有元件。 這會在靜態範本🔗的 設計模式 中映象相同的限制。 屬性
在 屬性 標題下,您可以定義元件的設定。 標題有兩個標籤:
- 主要
- 功能
主要
在 主要 標籤上,元件最重要的設定已定義。
例如,對於影像元件,可定義允許的寬度並啟用延遲載入。
如果設定允許多個組態,請按一下 新增 按鈕以新增另一個組態。
若要移除設定,請按一下設定右側的 刪除 按鈕。
若要移除設定,請按一下 刪除 按鈕。
功能
功能 索引標籤可讓您啟用或停用元件的其他功能。
例如,對於影像元件,您可以定義裁切比例、允許的影像定向以及是否允許上傳。
note caution CAUTION 請注意,在AEM中,裁切比例定義為 高度/寬度。 這和寬度/高度比的傳統定義不同,並且是由於舊有相容性的原因完成的。只要您清楚地定義 Name,頁面編寫使用者就不會察覺到任何差異,因為這是UI中顯示的內容。 note note NOTE 實作RTF編輯器的元件的內容原則只能為RTE透過其UI設定提供的選項定義。🔗 🔗 -
原則與屬性(配置容器)
配置容器的原則與屬性設定與一般使用方式類似,但有一些差異。
note note NOTE 容器元件必須設定原則,因為它可讓您定義容器中可用的元件。 設定視窗分為兩個部分,就像視窗的一般使用方式一樣。
原則
內容(或設計)原則會定義元件的設計屬性。 例如,可用的元件或最小/最大尺寸。 這些適用於範本(以及使用範本建立的頁面)。
在 原則 下,您可以透過下拉式清單選取要套用至元件的現有原則。 其運作方式與視窗的一般使用方式相同。
屬性
在 屬性 標題下,您可以選擇哪些元件可用於配置容器並定義其設定。 標題有三個索引標籤:
- 已允許的元件
- 預設元件
- 回應式設定
允許的元件
在 允許的元件 索引標籤上,您定義哪些元件可用於配置容器。
- 元件會依其元件群組分組,這些群組可展開和摺疊。
- 勾選群組名稱即可選取整個群組,取消勾選可取消選取所有群組。
- 減號表示至少選取了一個群組中的專案,但並未選取所有專案。
- 搜尋可依名稱篩選元件。
- 無論篩選條件為何,元件群組名稱右側所列的計數代表這些群組中選取的元件總數。
預設元件
在 預設元件 索引標籤上,您可以定義哪些元件會自動與指定的媒體型別建立關聯,這樣當作者從資產瀏覽器拖曳資產時,AEM就會知道要與哪個元件建立關聯。 請注意,只有具備拖放區域的元件才適用於此類設定。
按一下 新增對應 以新增全新的元件和MIME型別對應。
在清單中選取元件,然後按一下 新增型別,將其他MIME型別新增至已對應的元件。 按一下「 刪除 」圖示以移除MIME類型。
回應式設定
在 回應式設定 標籤上,您可以設定配置容器之產生格線中的欄數。
-
解除鎖定/鎖定元件
您解鎖/鎖定元件,以定義內容是否可在 初始內容 模式中變更。
解鎖元件後:
-
開啟的掛鎖指示器會顯示在邊框中。
-
元件工具列將據此調整。
-
已輸入的任何內容將不再以 結構 模式顯示。
- 已輸入的內容會視為初始內容,而且僅可在 初始內容 模式中顯示。
-
無法移動、剪下或刪除已解鎖元件的父件。
這包括解除鎖定容器元件,以便在初始內容模式或產生的頁 面中新增其他元件 。如果您在解除鎖定容器之前已將元件/內容新增至容器,則這些元件/內容在 結構 模式中不再顯示,但會以 初始內容 模式顯示。 在 結構模式 中,只有容器元件本身會顯示其 允許的元件 清單。
為了節省空間,配置容器不會為了容納允許的元件清單而增大。 容器會變成可捲動清單。
可配置的元件以「策略」表徵圖顯示 ,可以點選或按一下該表徵圖以編輯該元件的策略和屬性。
-
-
與現有頁面的關係
如果在根據範本建立頁面後更新結構,則這些頁面將反映範本的變更。 工具列中會顯示警告訊息,提醒您這個事實以及確認對話方塊。
編輯範本 — 初始內容 — 作者 editing-a-template-initial-content-author
初始內容 模式用於定義首次根據範本建立頁面時顯示的內容。 然後,頁面作者可以編輯初始內容。
雖然在「結構 」模式下建立的所有內容在「初始內容」中都可 見 ,但只能選擇和編輯已解鎖的元件。
-
可編輯的已解除鎖定元件會加上標籤。 選取時,它們具有藍色邊框:
-
已解鎖的元件有可讓您編輯及設定內容的工具列:
-
如果容器元件已解除鎖定(在「結 構 」模式中),則您可以在「初始內容 」模式中新增元件至容器。在「初始內 容」模式中新增的元件 ,可在產生的頁面上移動或從中刪除。
您可以使用「拖曳元件到此處 」區域,或從適當容器的工具列 中使用「插入新元件 」選項來新增元件。
-
如果在根據範本建立頁面後更新範本的初始內容,則範本中初始內容的變更不會影響這些頁面。
編輯範本 — 版面 — 範本作者 editing-a-template-layout-template-author
您可以為一系列裝置定義範本配置。 範本的回應式佈局運作方式與頁面製作相同。
編輯範本 — 頁面設計 — 範本作者/開發人員 editing-a-template-page-design-template-author-developer
頁面設計 (包括所需的用戶端程式庫和頁面原則) 會保留在「頁面資訊」功能表的「 頁面設計 」選 項下。
若要存取 頁面設計 對話方塊:
頁面原則 page-policies
您可以將內容原則套用至範本或結果頁面。 這會定義頁面上主要段落系統的內容原則。
-
您可以從 選取原則 下拉式清單中選取頁面的現有原則。
選取 選取原則 下拉式清單旁的新增按鈕,即可新增原則。 然後,原則標題 欄位中應該會提供新標題。
在 選取原則 下拉式清單中選取的現有原則,可以使用下拉式清單旁的複製按鈕來復製為新原則。 然後,原則標題 欄位中應該會提供新標題。 依預設,複製的原則標題為 X 的副本,其中X是複製原則的標題。
-
在 原則標題 欄位中定義原則的標題。 原則必須有標題,才能在 選取原則 下拉式清單中輕鬆選取原則。
-
在 原則說明 欄位中,原則的說明是選擇性的。
-
在 其他範本也使用選取的原則 區段中,您可以輕鬆檢視其他哪些範本使用在 選取原則 下拉式清單中選取的原則。
頁面屬性 page-properties
使用頁面屬性,您可以使用 頁面設計 對話方塊來定義所需的使用者端程式庫。 這些使用者端程式庫包含要與範本及使用該範本建立的頁面一起載入的樣式表和JavaScript。
-
指定您要套用至使用此範本建立之頁面的使用者端程式庫。 在 使用者端資料庫 區段的文字欄位中輸入資料庫名稱。
-
如果需要多個程式庫,請按一下「新增」按鈕,為程式庫名稱新增其他文字欄位。
視需要為您的使用者端資料庫新增任意數目的文字欄位。
-
使用拖曳控點來拖曳欄位,視需要定義物件庫的相對位置。
編輯範本 — 初始頁面屬性 — 作者 editing-a-template-initial-page-properties-author
使用 初始頁面屬性 選項,您可以定義建立結果頁面時要使用的初始頁面屬性。
-
在範本編輯器中,從工具列選取 頁面資訊,然後選取 初始頁面屬性 以開啟對話方塊。
-
在對話方塊中,您可以定義要套用至使用此範本建立的頁面的屬性。
-
使用 完成 確認您的定義。
最佳做法 best-practices
建立範本時,您應考慮:
-
從該範本建立頁面後,變更對範本的影響。
以下是範本上可能進行的不同操作清單,以及這些操作如何影響根據範本建立的頁面:
-
結構的變更:
- 這些會立即套用至產生的頁面。
- 訪客仍需發佈已變更的範本,才能看到變更。
-
內容原則和設計設定的變更:
- 這些會立即套用至產生的頁面。
- 訪客需要發佈變更才能檢視變更。
-
初始內容的變更:
- 這些僅適用於範本變更後建立的頁面。
-
配置圖變更取決於修改的元件是否屬於下列專案:
- 僅限結構 — 立即套用
- 包含初始內容 — 僅適用於變更後建立的頁面
發生下列情況時請特別小心:
-
在啟用的範本上鎖定或解除鎖定元件。
-
這會產生副作用,因為現有頁面已可使用它。 通常:
- 現有頁面上將會遺失解除鎖定元件(已鎖定)。
- 鎖定元件(可編輯的)將會隱藏該內容,使其無法在頁面上顯示。
note note NOTE 變更不再是草稿之範本上元件的鎖定狀態時,AEM會發出明確警告。 -
-
從 範本 主控台Publish您的範本。