在 設計管理工具 系統中建立和編輯模組

在 設計管理工具 中建立自訂模組，為你的網誌、 頁面或電子郵件新增進階功能。自訂模組提供多種功能，讓你可以在頁面、電子郵件或網誌編輯器中完全自訂內容。

開始之前

在開始在 設計管理工具 中建立或編輯自訂模組之前，請查看相關要求和注意事項。 

了解限制和注意事項

• 如果您不熟悉HTML、HubL HubL CSS ，建議您與開發人員合作 ，在 設計管理工具 中建立模組。

建立模組

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 尋找工具的頂部，按一下檔案下拉式選單，然後選取新檔案。

3. 在對話框中，單擊 您今天想要構建什麼？ 下拉菜單，然後選擇 模塊。
4. 按一下 下一步。
5. 在 「你想在哪裡使用此模組 」欄位中， 核取方塊 方塊（例如：部落 格文章、 電子郵件或 登陸頁面）。 
6. 在「 模組內容 範圍 」欄位中，選擇一個 選項（例如，本地模組 或 全局模組）。如果您建立全域模組，編輯此模組的內容將更新使用該模組的每個位置。 
7. 輸入模組 的檔案名稱。
8. 若要變更模組的檔案位置，請在「 檔案位置 」區段中按一下 變更。在 彈出式 中，選擇一個新 位置 ，然後按一下 選擇。
9. 完成後，按一下「 建立」。
10. 繼續 編輯模組。

請注意：電子郵件中使用的模組不包含 CSS 或JavaScript。 

編輯模組

在 設計管理工具 中建立模組後，您可以自訂其功能和外觀。為模組加上清晰度標籤、新增和設定欄位，以及調整欄位編輯器選項，例如預設內容。設置顯示條件和中繼器選項，並對相關字段進行分組，以獲得更好的組織。您還可以複製和貼上欄位片段、撰寫自訂模組語法、新增有用的教學文字，以及編輯 範本 組可用的範本類型。

新增標籤至模組

在 設計管理工具 中，為模組新增或更新標籤，以協助使用者在 內容編輯器中找到該模組。如果標籤為空白，則默認情況下將顯示模塊的名稱。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 搜尋器中，按一下以開啟您要編輯標籤的 模組 。
3. 在 Inspector中，輸入 標籤。

新增欄位至模組

將欄位新增至模組，以設定模組的內容或樣式，並在內容編輯器中進行編輯。深入瞭解 可用的欄位類型。 

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟模組。
3. 在 檢測器中的「 欄位 」部分中，單擊添加欄位 下拉菜單。然後選取要新增至模組的欄 位。

4. 若要編輯欄位名稱，請按一下 edit 編輯圖示並輸入新 名稱。若要編輯HubL HubL 數名稱，請在HubL變數 名稱欄位 HubL 輸入新名稱 。 

自訂欄位預設內容

在「內容選項」區段中，新增在範本和內容編輯器中使用模組時顯示的預設內容。預設內容的選項將根據欄位類型而有所不同。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟 模組。
3. 在 Inspector的「 欄 位」區段中，將遊標暫留於 欄 位上，然後按一下 編輯。
4. 在「內 容選項 」區段中，新增或編輯預設內容 選項。可用的預設內容選項將取決於所選的欄位類型。

例如，透過將 日期和時間 欄位類型新增到模組，您可以選擇預設日期和時間。您也可以輸入預設時間間隔。

設置欄位編輯器選項

在「編輯器選項」部分，您可以在內容編輯器中將欄位設為必填並阻止編輯。您也可以自訂說明文字。 

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟 模組。
3. 在 Inspector的「 欄 位」區段中，將遊標暫留於 欄 位上，然後按一下 編輯。
4. 在「 編輯器選項 」部分中，若要將欄位設為必填， 請將「設為此欄位為必填 」切換為開啟。這將防止用戶在內容編輯器中將字段留空。
5. 若要防止編輯欄位的內容，請將「 禁止在內容編輯器中編輯 」切換為開啟。您仍然可以在 範本 本層級的 設計管理工具 中自訂欄位內容。此選項不適用於 全域模組。
6. 若要新增有關如何使用欄位的上下文或說明，請在工具提示說明 文字 欄位或內嵌說明 文 字欄位中輸入 文字。
   • 工具提示說明文字：當使用者將遊標停留在內容編輯器中的 infoCircleIcon 資訊圖示上時，此文字會顯示在工具提示中。
   • 內嵌說明文字：當使用者在內容編輯器中編輯模組時，此文字會顯示在欄位下方。

設置欄位顯示條件

在 顯示條件 部分，使用 欄位顯示條件 將模組欄位設置為僅在其他欄位符合特定條件時才顯示。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟 模組。
3. 在 Inspector的「 欄 位」區段中，將遊標暫留於 欄 位上，然後按一下 編輯。
4. 在 顯示條件 部分，單擊HubL 變 HubL 下拉菜單，然後選擇一個 變量。 
5. 按一下第二個下 拉式選單 ，然後選擇一個選項（例如， 等於或不為空）。根據所選的選項，可能需要更多條件欄位。例如，如果選取 等於，則需要額外的值欄位。
6. 預設情況下，設定條件後會自動開啟顯示條件。若要關閉顯示條件，請將「 顯示條件」開關關閉。

設置字段中繼器選項

在「中繼 器選項 」部分，為欄位和羣組提供SEY中繼器選項 。開啟中繼器選項時，將使用for循環創建和顯示多個物件。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟 模組。
3. 在 Inspector的「 欄 位」區段中，將遊標暫留於 欄 位上，然後按一下 編輯。
4. 在中繼器選項部分，在最 小和最 大 （可選） 字段中輸入一個 數 字。這將設置字段在模塊中出現的最小次數，直至最大值。 
5. 若要設定欄位預設顯示的次數，請在預設物件計 數 欄位中輸入 數 字。
6. 根據預設，中繼器選項在設定後會自動開啟。要關閉中繼器選項，請將中繼 器選項關閉。

例如，影像欄位的中繼器選項會變更為至少顯示三個影像欄位，最多顯示五個影像欄位。預設值為四個影像欄位。在內容編輯器中，使用者預設會看到四個影像欄位，並且可以新增另一個影像欄位或移除現有的影像欄位。

羣組模組欄位

建立欄位後，將它們分組在一起，以保持按相關性組織它們。字段羣可用於構建自定義字段邏輯。最多將四個欄位組合在一起。深入瞭解 模組欄位羣組。 

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟 模組。
3. 在 檢測器中的「 欄位 」部分中，單擊 操作 下拉菜單，然後選擇 組合。
4. 選擇一個或多個 欄 位進行分組，然後按一下「 建立羣組」。

在模組中新增說明文字

在「編輯器」選項區段中，新增說明文字，以便在編輯模組時為用戶提供上下文。此文字將顯示在模組中的欄位上方。 

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟 模組。
3. 在 Inspector的「 編輯器選項」區段中，在內嵌說明 文字 欄位中輸入 文 字。

管理模組的內容類型和可用性

新增或移除用戶可以使用模組的內容類型，例如 部落格文章 或 登陸頁面。你也可以在範本和頁面中開啟或關閉單元的可用性。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟 模組。
3. 要編輯模組的內容類型，請單擊右上角 檢查器 中模組名稱下方的 內容類 型。

1. • 在對話方 核取方塊 中，選中或清除將使用或不使用單元的每種內容類型（例如部落 格文章、 電子郵件或 登陸頁面）旁邊的核取方塊。 
   • 完成後，按一下「 更新」。

4. 若要管理範本或頁面中模組的可用性， 請在右上角切換開啟適用於範本和頁面的選項。若要測試模組的功能或關閉範本和頁面中的可用性， 請將「設為可用於範本和頁面 」切換為關閉。 

請注意：切換 「可用於範本或頁面」切換為關閉，不會從任何現有的範本或頁面中刪除該模組。

複製並貼上欄位片段

將欄位整合到模組中時，請將欄位 常用回覆 複製並貼到 模組編輯器中的module.html (HTML + HubL) 部分。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟 模組。
3. 在 檢測器中，將遊標懸停在 模組欄 位上，然後單擊 欄位 部分中的 操作 下拉菜單。然後選取 複製 常用回覆。 
4. 在 模組編輯器中，將欄位常用回覆 貼到 module.html （ HTML。+ HubL) 部分。您可以使用鍵盤快捷鍵 Cmd + V或Ctrl + V。 

寫入模組語法

編輯模組時，請在module.html (HTML + HubL)、module.css和module.js 區段的 模組編輯器  中寫入 語法。深入瞭解模組編輯器 和模組概覽。

預覽並發佈模組

完成編輯模組後，包括新增欄位和撰寫模組語法，即可預覽和發佈模組。 

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 Finder中，按一下以開啟 模組。
3. 若要預覽單元，請按一下右上角的「 預覽 」。系統會引導你前往新的瀏覽器分頁，以預覽模組。此預覽與 模組編輯器同步，並會在編輯時自動重新整理。
4. 若要發佈模組，請按一下 發佈變更。 

新增模組至 範本

發佈模組後，將其新增至 設計管理工具 中的 拖放 範本或 自訂編碼 範本 ，即可跨範本使用。若要在內容編輯器中新增模組，請深入瞭解如何在 內容編輯器中新增和編輯模組。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在 尋找工具中，按一下以開啟 範本。
3. 要將模組添加到 佈局編輯器中的拖放 範本，請單擊 檢查器頂部的 +添加 選項卡。
   • 在搜尋欄位中，輸入模組 的名稱 。若要將搜尋範圍縮小至自訂模組，請按一下 按類別篩選或標籤 下拉式選單，然後選取 自訂模組。
   • 按一下 dragHandleIcon 拖放圖示， 然後在 版面配置編輯器中將 模組 移至適當位置。
4. 若要將模組新增至自訂編碼 範本：
   •  在 尋找器中按一下滑鼠右鍵或Ctrl +按一下 模組，然後選取 複製 常用回覆。或者，按一下以開啟模 組，然後在 Inspector的「範本 使用 」區段中，按一下 複製 常用回覆。
   • 在自訂編碼 範本 中，在 常用回覆 編輯器中貼上模組片段。
5. 完成後，按一下右上角的「 發佈變更 」。

範例：建立倒數計時模組

1. 在 設計管理工具 中建立一個模組 ，並命名為「倒數計時器」。
2. 在 Inspector的「 欄 位」區段中，按一下 新增欄位下拉式功能表。

• • 選擇 日期和時間 欄位。輸入 名稱 「事件 日期和時間」。這會將HubL 變 HubL 名稱 欄位更新為 event_date_and_time。

• • 選擇 顏色 字段。輸入 名稱 「計時器字體顏色」。這會將HubL 變 HubL 名稱 欄位更新為 timer_font_color。

請注意： HubL變數 HubL 稱必須與下面module.html (HTML + HubL)代碼部分中包含的變數名稱相符。

3. 在 模組編輯器中，將以下 程式碼 複製並貼到 相關 部分：

4. 完成後， 預覽並發佈 模組。
5. 繼續 將模組新增至 範本。