上次更新時間： 六月 28, 2023
在設計管理工具中，您可以建立自訂的編碼模組，將進階功能新增至您的網誌、網頁或電子郵件。自訂模組提供廣泛的功能，以便內容可以在頁面，電子郵件或博客編輯器中完全自訂。
請注意： 建立模組需要了解HTML、CSS、HubL和HubSpot設計管理系統。HubSpot建議與設計師合作，建立已編碼的模組。
新建模組
- 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
- 在尋找器頂部，按一下檔案下拉選單，然後選擇 新建檔案。
- 在「」對話方塊中，按一下「今天要建立甚麼？」下拉式選單，然後選擇「模組」。
- 按一下 下一步。
- 選擇使用模組的每種類型內容旁邊的核取方塊：網頁、 網誌文章、網誌列表、電子郵件或引用。電子郵件範本中使用的模組不能包含CSS或JavaScript。
請注意：用於電子郵件的自訂模組只能在擁有營銷中心專業版或企業版訂閱的帳戶中建立。
- 選擇此模組是本地模組還是全局模組。如果你建立一個 全局模組，編輯此模組的內容將更新使用該模組的每個位置。
- 輸入模組的檔案名稱，然後按一下建立。
標籤您的模組
預設情況下，內容編輯器將使用設計管理器中指定的名稱引用模組。如果您希望模組在內容編輯器中使用不同的名稱，您可以輸入標籤。
向您的模組添加欄位
將欄位新增至模組，以設定模組的內容或造型，並使之可在內容編輯器中編輯。在我們的開發人員文件中了解更多有關可用字段類型的資訊。
- 在右側的模組檢查器中，按一下新增欄位
下拉式 在 「欄位」部分的選單中，然後選擇要新增至模組的欄位。
- 按一下欄位名稱旁邊的 鉛筆圖示
添加字段預設內容
在「內容選項」部分，您可以新增模板和內容編輯器中使用模板時出現的預設內容。預設內容的選項將根據欄位類型而有所不同。
在下面的示例中，字段類型是影像字段，因此預設內容的選項是選擇預設影像並隱藏大小控制。
設置欄位編輯器選項
在「編輯器選項」部分，您可以啟用以下選項，讓用戶可以在內容編輯器中編輯模組：
- 使此字段爲必填 字段：用戶無法在內容編輯器中保留此字段爲空。
- 禁止在內容編輯器中編輯：無法在內容編輯器中編輯欄位內容；它仍然可以在範本層級編輯。此選項不適用於 全局模組，這些模組無法在頁面層級上編輯。
- 工具提示幫助文字：向欄位添加幫助文字，為用戶提供上下文或說明。當使用者在編輯時將鼠標停留在欄位上時，此說明文字會顯示在工具提示中。
- 內嵌幫助文字：向欄位添加幫助文字，為用戶提供上下文或說明。用戶編輯模組時，此幫助文字會顯示在欄位下方。
設置欄位顯示條件
您可以使用欄位顯示條件將模組欄位設定為僅在其他欄位符合特定條件時才出現。
- 在「顯示條件」部分，按一下HubL變數
下拉式 選擇模組欄位，然後按一下不是空的下拉式選單，以選擇該欄位的條件。 - 如果選擇等於的條件，請輸入值或正數。
在下面的示例中，正在為影像欄位設定顯示條件。條件是名為IMAGE_TITLE的文本欄位中的值必須等於Headshot才能使影像欄位出現在模組中。
設定條件後，顯示條件將自動啟用。若要禁用顯示條件，請按一下顯示條件右側的切換開關。
設置字段中繼器選項
您可以在「中繼器選項」區段中為欄位設定中繼器選項。中繼器是可以建立多個物件並使用for循環顯示物件的欄位和羣組。
- 在「重 複程式選項」部分中，選擇最小值和/或
最大值 此字段的必需實例數。 - 您也可以選擇設定一個預設的物件數量，該數量是預設會顯示在模組中的欄位的實例數量。
在下面的示例中，影像欄位設置為影像滑桿。已設定物件數目限制
修改其中一個選項後，中繼器選項將自動啟用。若要禁用中繼器選項，請按一下中繼器選項右側的切換開關。
分組模組欄位
建立欄位後，你可以將其中最多4個欄位分組在一起，按相關性整理欄位。字段羣可用於構建自定義字段邏輯。進一步了解模組欄位羣組。
要將模組字段分組在一起：
- 按一下模組編輯器右側邊欄中的「羣組」。
- 選擇要分組在一起的欄位。
- 按一下建立羣組。
復制並粘貼您的字段片段
- 當您準備好將欄位整合到模組中時，請將欄位片段複製並貼上到模組的HTML + HubL編輯器中。
- 如果您在欄位檢查器中，請按一下欄位HubL變量名稱右側的 C opy片段。
- 如果您在模組檢查器中，請將鼠標懸停在欄位上，然後按一下操作
下拉式 ，然後選擇複製片段。
- 按一下您想要在HTML + HubL編輯器中新增欄位的位置，然後按Ctrl + V或Cmd + V貼上片段。
撰寫您的模組語法
在編輯模組時，您可以在HTML + HubL、CSS和JS編輯器窗格中寫入其他模組語法。了解更多關於HubSpot設計師文件 中的 模 組代碼編輯器 和模組語法參考資料。在模組中新增說明文字
在「編輯器」選項區段中，新增說明文字，以便在編輯模組時為用戶提供上下文。說明文字不能長於300個字元。
用戶在內容編輯器中編輯模組時，說明文字會顯示在模組欄位上方。
預覽您的模組
您可以按一下模組編輯器右上角的「預覽」按鈕，在內容編輯器中預覽模組的顯示和功能。您的模組預覽將在新標籤中開啟。此預覽與編輯器同步，並會在您工作時自動刷新。
發佈您的模組
新增欄位並撰寫模組語法後，便可繼續發佈模組。按一下右上角的「發佈變更」。
使您的模板可用於模板
- 切換「模板可用」切 換至編輯器右上角，使此模組可用於新增至模板。
- 切換此關閉 以進行變更或測試模組的功能。如果禁用此切換，您的團隊將看到模板無法使用此模板的警報。
將模板新增至模板
發佈模組後，您可以透過將其新增至模板來在頁面上使用它。
若要將模組新增至拖放模板：
- 在模板佈局編輯器中，按一下佈局檢查器頂部的「新增」標籤，然後搜尋您的模組。您可以透過自訂模組圖示「customModules」來識別您建立的自訂模。
- 將模組拖放到模板中。
若要將模組新增到編碼模板，您可以複製模組片段並貼上到模板中：
- 若要從模組編輯器中複製模組片段，請按一下右側邊欄底部的複製片段。
- 若要從設計管理器的左側欄中複製模組片段：
- 在左側邊欄中，找到自訂模組。
- 使用滑鼠右鍵按一下模組，然後選擇複製片段。或者，您可以選擇模組，然後按一下左上角的「 操作」，然後選擇「複製片段」。
- 在編碼範本中，貼上所需的片段。
