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