如何在 Dreamweaver 中建立巢狀範本

上次更新時間 2024年4月25日

了解如何在 Dreamweaver 中建立巢狀範本,以便控制共用設計元素之頁面的內容。

巢狀範本是一個範本,其設計和可編輯區域是以另一個範本為基礎。巢狀模板對於控制地點中共用許多設計元素但頁面間有小幅變化版本的頁面內容很有用。例如,基底模板可能包含較廣泛的設計區域,可供地點的許多內容投稿人使用,而巢狀模板則可能進一步定義地點中特定區段頁面的可編輯區域。

基底模板中的可編輯區域會傳遞至巢狀模板,並在從巢狀模板建立的頁面中保持可編輯狀態,除非在這些區域中插入新的模板區域。

對基底模板的變更會自動更新以基底模板為基礎的模板,以及以主要模板和巢狀模板為基礎的所有模板文件。

在下列範例中,模板 trioHome 包含三個可編輯區域,名為 BodyNavBarFooter

具有三個可編輯區域的範本

若要建立巢狀模板,需先建立以模板為基礎的新文件,然後儲存為模板並命名為 TrioNested。 在巢狀模板中,已在名為 Body 的可編輯區域中新增兩個可編輯區域。

巢狀範本

當您在傳遞至巢狀模板的可編輯區域中新增可編輯區域時,可編輯區域的醒目提示色彩會變更為橘色。您在可編輯區域外新增的內容,例如 editableColumn 中的圖形,在以巢狀模板為基礎的文件中不再可編輯。藍色醒目提示的可編輯區域,無論是在巢狀模板中新增或從基底模板傳遞而來,在以巢狀模板為基礎的文件中都保持可編輯狀態。不包含可編輯區域的模板區域會以可編輯區域的形式傳遞至以模板為基礎的文件。

建立巢狀範本

巢狀模板可讓您建立基底模板的變化版本。您可以嵌套多個模板來定義越來越特定的版面配置。

依預設,來自基底模板的所有可編輯模板區域都會透過巢狀模板傳遞至以巢狀模板為基礎的文件。也就是說,如果您在基底模板中建立可編輯區域,然後建立巢狀模板,該可編輯區域會出現在以巢狀模板為基礎的文件中 (如果您沒有在巢狀模板的該區域中插入任何新的模板區域)。

備註

您可以在可編輯區域內插入模板標記,使其不會作為可編輯區域傳遞至以巢狀模板為基礎的文件中。此類區域會有橘色邊框而非藍色邊框。

從您要用來當做巢狀範本基礎的範本中建立文件。 請執行下列其中一項作業:

  • 在「資源」面板中,按一下左窗格的「範本」。 選取最下方窗格中的「新增範本」。

  • 選取「檔案 > 開新檔案」。 在「新增文件」對話框中,選取「從模板頁面」類別,然後選取包含您要使用的模板的地點。在「模板」清單中,按兩下模板以建立新文件。

選取「檔案 > 另存新檔」。 在「另存新檔」對話方塊中,從「存檔類型」下拉式清單中選取「範本檔案」。

在「另存新檔」方塊中輸入名稱,並按一下「確定」將新文件儲存為巢狀範本。

防止可編輯區域傳遞至巢狀模板

在巢狀模板中,傳遞的可編輯區域具有藍色邊框。您可以在可編輯區域內插入模板標記,使其不會作為可編輯區域傳遞至以巢狀模板為基礎的文件中。此類區域會有橘色邊框而非藍色邊框。

在「程式碼」檢視中,找到您要防止傳遞的可編輯區域。

可編輯區域是由範本註解標籤所定義。

在可編輯區域程式碼中新增下列程式碼:

@@(" ")@@

此 範本程式碼可放置在圍繞可編輯區域的 <!-- InstanceBeginEditable --><!-- InstanceEndEditable --> 標記 內的任何位置。 例如:

<!-- InstanceBeginEditable name="EditRegion1" -->

<p>@@("")@@ 可編輯 1 </p>

<!-- InstanceEndEditable -->