在設計管理器中建立和編輯模組

透過設計管理員，您可以建立自訂模組，為部落格、頁面或電子郵件增加進階功能。自訂模組提供廣泛的功能，因此可以在頁面、電子郵件或部落格編輯器中完全自訂內容。

請注意：建立模組需要 HTML、CSS、HubL 和 HubSpot 設計管理員的知識。HubSpot 建議與開發人員合作建立編碼模組。

建立新模組

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

3. 在對話方塊中，點選What would you like to build today?下拉式功能表，並選擇Module。
4. 按一下下一步。
5. 在Where would you like to use this module（您想在哪裡使用這個模組）欄位中，選擇要使用模組的每種內容類型（例如，部落格文章、電子郵件或登陸頁面）旁邊的核取方塊。
6. 在「模組內容範圍」欄位中，選擇選項(例如： 本地模組或全局模組)。如果您建立的是全局模組，編輯此模組內容將會更新使用模組的每個位置。
7. 輸入模組的檔案名稱 。
8. 若要變更模組的檔案位置，請按一下檔案位置區段中的變更。在彈出框中，選擇新位置，然後按一下「選取」。
9. 完成後，按一下建立。
10. 繼續編輯模組。

請注意：電子郵件中使用的模組只能在具有Marketing HubProfessional或Enterprise訂閱的帳戶中建立。它們不能包含 CSS 或 JavaScript。

編輯模組

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

為模組新增標籤

在設計管理員中，您可以為模組新增或更新標籤，以協助使用者在內容編輯器中識別模組。如果標籤為空白，預設會顯示模組的名稱。

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

為模組新增欄位

新增欄位至模組，以設定模組的內容或樣式，並使其可在內容編輯器中編輯。進一步瞭解可用的欄位類型。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器中，點選開啟一個模組。
3. 在檢閱器的「欄位」部分，按一下新增欄位下拉式功能表。然後選擇要新增到模組的欄位。

4. 要編輯欄位名稱，點選edit 編輯圖示並輸入新名稱。要編輯 HubL 變數名稱，請在HubL 變數名稱欄位輸入新名稱。

自訂欄位預設內容

在內容選項 部分，您可以新增預設內容，當模組用於範本和內容編輯器時，預設內容就會出現。預設內容的選項會依欄位類型而有所不同。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器中，按一下開啟模組。
3. 在檢閱器的「欄位」部分，將滑鼠懸停在欄位上，然後按一下「編輯」。
4. 在內容選項部分，新增或編輯預設內容選項。可用的預設內容選項取決於選取的欄位類型。

例如，在模組中加入日期和時間欄位類型，就可以選擇預設日期和時間。您也可以輸入預設時間間隔。

設定欄位編輯器選項

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

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器中，按一下開啟一個模組。
3. 在檢閱器的「欄位」部分，將滑鼠懸停在欄位上，然後按一下「編輯」。
4. 在編輯器選項部分，若要使欄位為必填欄位，請切換開啟「使此欄位為必填欄位」開關。這將防止使用者在內容編輯器中將欄位留空。
5. 若要防止欄位的內容被編輯，請切換「防止在內容編輯器中編輯」開關。欄位的內容仍可在範本層級的設計管理員中自訂。此選項不適用於全局模組。
6. 若要新增使用欄位的上下文或說明，請在工具提示說明文字欄位或內嵌 說明文字 欄位中輸入文字 。
   • 工具提示說明文字：當使用者在內容編輯器中將滑鼠移至infoCircleIcon info 圖示上時，此文字會出現在工具提示中。
   • 內嵌說明文字：當使用者在內容編輯器中編輯模組時，此文字會出現在欄位下方。

設定欄位顯示條件

在顯示條件部分，您可以使用欄位顯示條件，設定模組欄位只有在另一個欄位符合特定條件時才會出現。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器中，點選開啟一個模組。
3. 在檢閱器的「欄位」部分，將滑鼠懸停在欄位上，然後按一下「編輯」。
4. 在顯示條件部分，按一下HubL 變數 下拉式功能表，然後選擇一個變數。
5. 按一下第二個下拉式功能表，然後選擇一個 選項(例如，等於 或 不為空)。根據選取的選項，可能需要更多的條件欄位。例如，如果選擇等於，則需要額外的值欄位。
6. 根據預設，設定條件後，顯示條件會自動開啟。若要關閉顯示條件，請切換關閉顯示條件 開關。

設定欄位中繼器選項

在中繼器選項部分，您可以設定欄位和群組的中繼器選項。當中繼器選項開啟時，將會使用for 循環建立並顯示多個物件。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在尋找器中，按一下開啟一個模組。
3. 在檢閱器的「欄位」部分，將滑鼠懸停在欄位上，然後按一下「編輯」。
4. 在Repeater 選項 部分，在Minimum和Maximum （選擇性）欄位輸入一個數字。這將設定欄位在模組中出現的最小次數，直到最大值。
5. 若要設定欄位的預設顯示次數，請在Default object count（預設物件計數）欄位輸入一個數字。
6. 預設情況下，中繼器選項一經設定就會自動開啟。若要關閉中繼器選項，請切換中繼器選項 開關。

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

群組模組欄位

建立欄位後，您可以將它們組合起來，讓您的欄位依相關性來組織。欄位群組可用於建立自訂欄位邏輯。您最多可以將四個欄位群組在一起。進一步了解模組欄位群組。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器中，點選開啟一個模組。
3. 在檢閱器的「欄位」區段中，按一下「動作」下拉式功能表，然後選擇「群組」。
4. 選取一個或多個欄位進行群組，然後按一下建立群組。

在模組中加入說明文字

在「編輯器」選項部分，您可以新增說明文字，讓使用者在編輯模組時了解內容。文字會顯示在模組欄位的上方。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器中，按一下開啟一個模組。
3. 在檢閱器的「編輯器選項 」部分，在「內嵌式」幫助文字欄位輸入文字。

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

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

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

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

4. 若要管理模組在範本或頁面中的可用性，請切換右上方的「使範本和頁面可用 」開關。 若要測試模組的功能或關閉模組在範本和頁面中的可用性，請切換關閉模組在範本和頁面中的可用性開關。

請注意：關閉模板或頁面的可用性 開關不會從任何現有模板或頁面中移除模組。

複製和貼上欄位片段

將欄位加入模組時，您可以複製欄位片段並貼到模組編輯器內的module.html (HTML + HubL)區段。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器中，點選開啟一個模組。
3. 在檢閱器中，將滑鼠懸停在模組欄位上，然後點選欄位部分的動作下拉式功能表。然後選擇複製片段。
4. 在模組編輯器中，將欄位片段貼到module.html (HTML. + HubL)區段中所需的位置。您可以使用鍵盤快捷鍵Cmd+V 或 Ctrl+V。

編寫模組語法

當您編輯您的模組時，您可以在module.html (HTML + HubL)、module .css 和module.js 模組編輯器部分寫入模組語法。進一步了解模組編輯器和模組總覽。

預覽與發佈模組

一旦完成編輯模組，包括新增欄位和撰寫模組語法，您就可以預覽和發佈模組。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器中，按一下開啟模組。
3. 若要預覽模組，請按一下右上方的預覽。您會被引導到一個新的瀏覽器索引標籤，以預覽模組。此預覽會與模組編輯器同步，並在編輯發生時自動刷新。
4. 若要發佈模組，請按一下發佈變更。

將模組加入模板

發佈模組後，您可以將模組加到設計管理員中的拖放模組或自訂編碼模組中，在不同的模組中使用。若要在內容編輯器中加入模組，請瞭解更多關於在內容編輯器中加入和編輯模組的資訊。

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器中，按一下開啟範本。
3. 若要在版面編輯器中將模組新增至拖放範本，請按一下檢閱器頂端的+ 新增索引標籤。
   • 在「搜尋」欄位中，輸入模組的名稱。若要將搜尋範圍縮小為自訂模組，請按一下依類別或標籤篩選下拉式功能表，然後選擇自訂模組。
   • 按一下dragHandleIcon 拖放圖示，將模組移到版面編輯器中的位置。
4. 若要在自訂編碼範本中加入模組，請
   • 在搜尋器中的模組上 按一下滑鼠右鍵或按住 Ctrl+，然後選擇複製片段。或者，按一下以開啟模組，然後在檢閱器的「模組使用」區段中，按一下「複製片段」。
   • 在自訂編碼範本中，在程式碼編輯器中貼上模組片段。
5. 完成後，按一下右上方的「發佈變更」。

範例

建立一個倒數模組

1. 在設計管理員中建立一個模組，並命名為「倒數計時器」。
2. 在檢閱器的「欄位」部分，按一下新增欄位下拉式功能表。

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

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

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

3. 在模組編輯器中，複製並貼上下列程式碼到 module.html (HTML + HubL) 區段：

<!-- 隱藏 span 來儲存目標日期 -->
<span id="target-date" style="display: none;"></span>

<!-- 顯示倒數計時器 -->
<div style="float: left; width: 100%; color: ;"> <!
<div class="time_container" style="margin-left: 30%;">
<span id="days"></span><br> 天數
天數
</div
<div class="time_container">
<span id="hours"></span><br
小時
</div
<div class="time_container"> <span id="minutes"></span><br> 時間
<span id="minutes"></span><br
分鐘
</div
<div class="time_container"> <span id=「秒」></span><br>分
<span id="seconds"></span><br
秒
</div
</div

4. 複製並貼上下列程式碼到module.css區段：

.time_container {
float: left；
width: 10%；
text-align: center；
}
.time_container span {
font-weight: bold；
font-size: 200%；
}

5. 複製並貼上下列程式碼到module.js區段：

// 計算和顯示倒計時的函數
function updateCountdown() {
// 從隱藏 span 取得目標日期
const targetDate = new Date(document.getElementById('target-date').textContent)；
// 取得目前日期
const currentDate = new Date()；
// 計算剩餘時間（以毫秒為單位）
const timeRemaining = targetDate - currentDate；
// 檢查目標日期是否已過
if (timeRemaining <= 0) { document.getElementById('countdown').innerText = 'Countdown expired'；
返回；
}
// 計算剩餘的天數、小時、分鐘和秒數
const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24))；
const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24))/ (1000 * 60 * 60));
const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60))；
const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000)；
// 顯示倒數
document.getElementById('days').innerText = `${days}`；
document.getElementById('hours').innerText = `${hours}`；
document.getElementById('minutes').innerText = `${minutes}`；
document.getElementById('seconds').innerText = `${seconds}`；
}
// 每秒更新倒數
setInterval(updateCountdown, 1000)；
// 初始呼叫立即更新倒數
updateCountdown()；

6. 完成後，預覽並發佈模組。
7. 繼續將模組加到模板中。