建立頁面範本 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執行個體中 全域 資料夾已存在於範本主控台中。 此檔案會保留預設範本,並在目前資料夾中找不到原則及/或範本型別時,做為遞補內容。 建議最佳實務使用 為您的專案建立的範本資料夾. -
選取 建立,後接 建立範本 以開啟精靈。
-
選取 範本型別,然後選取 下一個.
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
由於範本在轉譯頁面時為參考狀態,因此必須發佈已完整設定的範本,才能用於發佈環境。
- 在 範本主控台,選取範本。
- 選取 發佈 以開啟精靈。
- 選取 內容原則 將一同發佈。
- 選取 發佈 工具列以完成動作。
編輯範本 — 範本作者 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)方塊。
- 透過拖曳資產(從 資產 (例如側面板中的瀏覽器)直接在範本上原地產生適當的元件。
新增後,每個元件都會標示:
- 邊框
- 顯示元件型別的標籤
- 解鎖元件時顯示的標籤
元件動作 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會發出明確警告。 -
-
建立您自己的資料夾 您網站專屬範本的URL。
-
發佈您的範本 從 範本 主控台。