上次更新时间： 2025年10月24日
通过设计管理器，您可以创建自定义模块，为博客、页面或电子邮件添加高级功能。自定义模块提供多种功能，因此可以在页面、电子邮件或博客编辑器中完全自定义内容。
请注意：创建模块需要了解 HTML、CSS、HubL 和 HubSpot 设计管理器。HubSpot 建议与开发人员合作创建编码模块。
创建新模块
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在搜索器顶部，单击 "文件"下拉菜单并选择 "新建文件"。
- 在对话框中，单击 "今天要创建什么？"下拉菜单并选择 "模块"。
- 单击下一步。
- 在 "您希望在何处使用此模块"字段中，选择将使用模块的每种内容类型旁边的复选框（例如，博客文章、电子邮件或登陆页面）。
- 在模块内容范围字段中，选择一个选项（如 本地模块或全局模块）。如果创建的是全局模块，编辑该模块的内容将更新使用该模块的所有位置。
- 输入模块的文件名 。
- 要更改模块的文件位置，请单击 "文件位置"部分中的 "更改"。在弹出框中选择一个新位置，然后单击 "选择"。
- 完成后，单击 "创建"。
- 继续编辑模块。
请注意：电子邮件中使用的模块只能在订阅了Marketing HubProfessional或Enterprise 的账户中创建。它们不能包含 CSS 或 JavaScript。
编辑模块
在设计管理器中创建模块后，您可以自定义其功能和外观。为模块加上清晰的标签，添加和配置字段，调整字段编辑器选项（如默认内容）。设置显示条件和中继器选项，并对相关字段进行分组，以便更好地组织。您还可以复制和粘贴字段片段、编写自定义模块语法、添加有用的说明性文字，以及编辑模块可使用的模板类型。
为模块添加标签
在设计管理器中，您可以为模块添加或更新标签，以帮助用户在内容编辑器中识别模块。如果标签为空，则默认显示模块名称。
为模块添加字段
向模块添加字段可设置模块的内容或样式，并使其可在内容编辑器中编辑。进一步了解可用字段类型。
- 要编辑字段名称，请单击 编辑图标并输入新名称。要编辑 HubL 变量名，请在HubL 变量名字段中输入新名称。
自定义字段默认内容
在 "内容选项 "部分，您可以添加默认内容，当模块在模板和内容编辑器中使用时，默认内容就会出现。默认内容的选项因字段类型而异。
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在查找器中，单击打开模块。
- 在 "检查器"的 "字段"部分，将鼠标悬停在字 段上并单击 "编辑"。
- 在内容选项部分，添加或编辑默认内容选项。可用的默认内容选项取决于所选的字段类型。
例如，在模块中添加日期和时间字段类型后，可以选择默认日期和时间。还可以输入默认时间间隔。
设置字段编辑器选项
在 "编辑器选项 "部分，您可以在内容编辑器中将字段设置为必填字段并阻止编辑。还可以自定义帮助文本。
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在查找器中，单击打开模块。
- 在 "检查器"的 "字段"部分，将鼠标悬停在字段上并单击 "编辑"。
- 在 "编辑器选项"部分，要使字段成为必填字段，请打开 "使此字段成为必填字段"开关。这将防止用户在内容编辑器中将字段留空。
- 要防止字段内容被编辑，请打开 "防止在内容编辑器中编辑"开关。字段内容仍可在设计管理器中的模板级别进行自定义。此选项不适用于全局模块。
- 要添加有关如何使用字段的上下文或说明，请在工具提示帮助文本字段或内联帮助文本字段 中输入文本 。
- 工具提示帮助文本：当用户在内容编辑器中将鼠标悬停在info 图标上时，该文本将显示在工具提示中。
- 内联帮助文本：当用户在内容编辑器中编辑模块时，该文本将显示在字段下方。
设置字段显示条件
在 "显示条件"部分，您可以使用字段显示条件设置模块字段，使其仅在另一个字段满足特定条件时才显示。
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在查找器中，单击打开模块。
- 在 "检查器"的 "字段"部分，将鼠标悬停在字段上并单击 "编辑"。
- 在显示条件部分，单击HubL 变量 下拉菜单并选择一个变量。
- 单击第二个下拉菜单并选择一个 选项（例如，等于 或 不为空）。根据所选选项，可能需要更多条件字段。例如，如果选择 "等于"，则需要额外的值字段。
- 默认情况下，一旦配置了条件，就会自动打开显示条件。要关闭显示条件，请切换显示 条件开关。
设置字段中继器选项
在中继器选项部分，可以为字段和组配置中继器选项。打开中继器选项后，将使用for 循环创建和显示多个对象。
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在查找器中，单击打开一个模块。
- 在 "检查器"的 "字段"部分，将鼠标悬停在字段上并单击 "编辑"。
- 在中继器选项 部分，在最小和最大 （可选）字段中输入一个数字。这将设置字段在模块中出现的最小次数，直至最大值。
- 要设置字段的默认显示次数，请在 "默认对象计数"字段中输入一个数字。
- 默认情况下，中继器选项一经配置就会自动开启。要关闭中继器选项，请切换中继器选项 开关。
例如，更改图像字段的中继器选项，可显示至少三个、最多五个图像字段。默认值为四个图像字段。在内容编辑器中，用户将默认看到四个图像字段，并可增加一个图像字段或删除一个现有图像字段。
分组模块字段
创建字段后，可以对它们进行分组，以便按相关性对字段进行组织。字段组可用于建立自定义字段逻辑。您最多可以将四个字段分组。进一步了解模块字段组。
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在查找器中，单击打开一个模块。
- 在检查器的 "字段"部分，单击 "操作"下拉菜单并选择 "分组"。
- 选择要分组的一个或多个字段，然后单击创建分组。
为模块添加帮助文本
在 "编辑器选项"部分，您可以添加帮助文本，为用户提供编辑模块时的上下文。该文本将显示在模块字段的上方。
管理模块的内容类型和可用性
添加或删除用户可以使用模块的内容类型，如博客文章或登陆页面。您还可以在模板和页面中打开或关闭模块的可用性。
-
- 在对话框中，选择或清除将使用或不使用模块的每种内容类型（如博客文章、电子邮件或登陆页面）旁边的复选框。
- 完成后，单击更新。
- 要管理模块在模板或页面中的可用性，请切换右上角的 "使模板和页面可用 "开关。 要测试模块功能或关闭模块在模板和页面中的可用性，请切换 "使模块在模板和页面中可用 "开关。
请注意：关闭模板或页面可用性 开关不会从任何现有模板或页面中移除模块。
复制和粘贴字段片段
在模块中加入字段时，可将字段片段复制并粘贴到模块编辑器中的module.html (HTML + HubL)部分。
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在查找器中，点击打开模块。
- 在检查器中，将鼠标悬停在模块字段上，然后单击字段部分的操作下拉菜单。然后选择复制片段。
- 在模块编辑器中，将字段片段粘贴到module.html (HTML. + HubL)部分所需的位置。您可以使用键盘快捷键Cmd+V 或 Ctrl+V。
编写模块语法
编辑模块时，可在module.html (HTML + HubL)、module.css 和module.js 模块编辑器部分编写模块语法。了解有关模块编辑器和模块概述的更多信息。
预览和发布模块
完成模块编辑（包括添加字段和编写模块语法）后，就可以预览和发布模块了。
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在查找器中，单击打开模块。
- 要预览模块，请单击右上角的 "预览"。你将被引导到一个新的浏览器标签页来预览模块。该预览会与模块编辑器同步，并在编辑发生时自动刷新。
- 要发布模块，请单击 "发布更改"。
将模块添加到模板中
发布模块后，可以将其添加到设计管理器中的拖放模板或自定义编码模板中，从而在不同模板中使用。要在内容编辑器中添加模块，请了解有关在内容编辑器中添加和编辑模块的更多信息。
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在查找器中，单击打开模板。
- 要在布局编辑器的拖放模板中添加模块，请单击检查器顶部的+ 添加选项卡。
- 在 "搜索 "字段中输入模块名称。要将搜索范围缩小到自定义模块，请单击 "按类别或标签过滤"下拉菜单，然后选择 "自定义模块"。
- 单击 拖放图标，将模块移动到布局编辑器中的位置。
- 将模块添加到自定义编码模板中：
- 完成后，单击右上角的 "发布更改"。
示例
创建倒计时模块
-
- 选择日期和时间字段。输入名称"事件日期和时间"。这将把HubL 变量名称字段更新为
event_date_and_time。
- 选择日期和时间字段。输入名称"事件日期和时间"。这将把HubL 变量名称字段更新为
-
- 选择颜色字段。输入名称"计时器字体颜色"。这将更新HubL 变量名字段为
timer_font_color。
- 选择颜色字段。输入名称"计时器字体颜色"。这将更新HubL 变量名字段为
请注意：HubL 变量名必须与下面 module.html （HTML + HubL）代码部分包含的变量名一致。
- 在模块编辑器中，将以下代码复制并粘贴到module.html (HTML + HubL) 部分：
<! -- 隐藏 span 以存储目标日期 -->
<span id="target-date" style="display: none;"></span> <!
<!-- 显示倒计时计时器 -->
<div style="float: left; width: 100%; color: ;"></span> <!
<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
分钟
</div
<div class="time_container">
<span id="seconds"></span><br
秒
</div
</div
- 将以下代码复制并粘贴到module.css部分：
.time_container {
float: left；
width: 10%；
text-align: center；
}
.time_container span {
font-weight: bold；
font-size: 200%；
}
- 将以下代码复制并粘贴到module.js部分：
// 计算和显示倒计时的函数
function updateCountdown() {
// 从隐藏跨度中获取目标日期
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()；
