创建和编辑模块
上次更新时间: 二月 13, 2025
在设计管理器工具中,您可以创建自定义编码模块,为博客、页面或电子邮件添加高级功能。自定义模块提供多种功能,因此可以 在页面、电子邮件或博客编辑器中完全 自定义 内容 。
请注意:创建模块需要了解 HTML、CSS、HubL 和 HubSpot 设计管理器。HubSpot 建议与开发人员合作创建编码模块。
创建新模块
- 在 HubSpot 帐户中,导航到内容 > 设计管理器。
- 在查找器顶部,单击 "文件"下拉菜单并选择 "新建文件"。
- 在对话框中,单击 "今天要创建什么?下拉菜单,然后选择模块。
- 单击下一步。
- 选择要使用模块的每种内容类型旁边的复选框:页面、博客文章、博客列表、电子邮件或报价。电子邮件模板中使用的模块不能包含 CSS 或 JavaScript。
请注意: 用于电子邮件的自定义模块只能在订阅 了Marketing Hub 专业版或企业版 的账户中创建。
- 选择该模块是本地模块 还是全局模块。如果创建的是全局模块,那么编辑该模块的内容将更新所有使用该模块的位置。
- 输入模块的文件名 ,然后单击 "创建"。
给模块贴标签
默认情况下,内容编辑器将使用模块在设计管理器中的名称来引用模块。如果希望模块在内容编辑器中使用不同的名称,可以通过输入标签来实现。
为模块添加字段
向模块添加字段,以设置模块的内容或样式,并使其可在内容编辑器中编辑。有关可用字段类型的 更多信息,请参阅我们的开发人员文档。
- 在右侧的模块检查器中,单击 "字段 "部分的 "添加字段 " 下拉菜单 ,然后选择一个字段添加到模块中。
- 点击字段名旁的铅笔图标 edit 编辑字段名。要编辑HubL 变量名,请在HubL 变量名 文本字段中进行修改。
添加字段默认内容
在 "内容选项 "部分,您可以添加默认内容,当模块在模板和内容编辑器中使用时,这些内容就会出现。默认内容选项因字段类型而异。
在下面的示例中,字段类型是图像字段,因此默认内容选项是选择默认图像和隐藏尺寸控制。
设置字段编辑器选项
在"编辑器选项 "部分,可以针对用户如何在内容编辑器中编辑模块启用以下选项:
- 将此字段设为必填字段: 用户将无法在内容编辑器中将此字段留空。
- 防止在内容编辑器中编辑:字段内容不能在内容编辑器中编辑;仍可在模板级别上编辑。此选项不适用于全局模块,因为全局模块无法在页面级别进行编辑。
- 工具提示帮助文本:在字段中添加帮助文本,为用户提供上下文或说明。当用户在编辑时将鼠标悬停在字段上时,该帮助文本将显示在工具提示中。
- 内联帮助文本:在字段中添加帮助文本,为用户提供上下文或说明。当用户编辑模块时,帮助文本将显示在字段下方。
设置现场显示条件
您可以使用字段显示条件,将模块字段设置为只有在另一个字段满足特定条件时才显示。
- 在显示条件 部分,单击HubL 变量
下拉菜单 选择模块字段,然后单击非空 下拉菜单选择该字段的条件。 - 如果选择条件等于,请输入值 或 regex。
在下面的示例中,正在为图像字段设置显示条件。条件是名为image_title 的文本字段中的值必须等于Headshot,图像字段才能出现在模块中。
设置条件后,显示条件将自动启用。要禁用显示条件,请单击显示条件右侧的切换开关 。
设置现场中继器选项
您可以在 "中继器选项 "部分为字段设置中继器选项。中继器是可以创建多个对象并使用for
循环显示的字段和组。
- 在 "中继器选项 "部分,选择最小 和/或最大值。
最大 该字段所需实例的最小和/或最大数量。 - 您还可以选择设置默认对象数量,这将是模块中默认出现的字段实例数量。
在下面的示例中,图像字段被设置为图像滑块。对象数量限制设置
修改其中一个选项后,中继器选项将自动启用。要禁用中继器选项,请单击中继器选项右侧的切换开关 。
分组模块字段
创建字段后,您最多可以将 4 个字段分组,以便按相关性组织字段。字段组可用于建立自定义字段逻辑。进一步了解模块字段组。
将模块字段分组:
- 单击模块编辑器右侧边栏中的组。
- 选择要分组的字段。
- 单击创建组。
复制并粘贴字段片段
- 准备在模块中加入字段时,将字段片段复制并粘贴到模块的HTML + HubL 编辑器中。
- 如果在字段检查器中,单击字段HubL 变量名右侧的 "复制片段 "。
- 如果在模块检查器中,将鼠标悬停在字段上,点击 "操作"
下拉菜单 ,然后选择 "复制片段"。
- 在HTML + HubL 编辑器中点击要添加字段的位置,然后按Ctrl+V或 Cmd+V 粘贴片段。
编写模块语法
编辑模块时,您可以在HTML + HubL、CSS 和JS 编辑器面板中编写其他模块语法。有关 模块代码编辑器和 模块语法参考的更多信息, 请参阅 HubSpot 的设计器文档。为模块添加帮助文本
在"编辑器选项"部分,添加帮助文本,为用户提供编辑模块时的上下文。帮助文本不能超过 300 个字符。
用户在内容编辑器中编辑模块时,模块字段上方会显示帮助文本。
预览模块
点击模块编辑器右上方的预览 按钮,可以预览模块在内容编辑器中的外观和功能。模块预览将在新标签页中打开。该预览会与编辑器同步,并在您工作时自动刷新。
发布模块
完成添加字段和编写模块语法后,就可以发布模块了。在右上方,单击 "发布更改"。
为模板提供模块
- 打开编辑器右上角 的 "模板可用 "切换开关,即可将此模块添加到模板中。
- 关闭此切换 以 进行更改或测试模块功能。如果禁用此切换,您的团队将看到该模块不可用于模板的提示。
将模块添加到模板中
发布模块后,您可以将其添加到模板中,在页面中使用。
将模块添加到拖放模板:
- 在模板布局编辑器中,单击布局检查器顶部的添加 选项卡,然后搜索模块。您创建的自定义模块可以通过自定义模块图标识别:customModules 。
- 将模块拖放到模板中。
要在编码模板中添加模块,可以将模块片段复制并粘贴到模板中:
- 要从模块编辑器复制模块片段,请在右侧边栏底部单击 "复制片段"。
- 从设计管理器的左侧边栏复制模块片段:
- 在左侧边栏中找到自定义模块。
- 右键单击模块,然后选择复制片段。或者,也可以选择模块,然后单击左上角的操作 并选择复制片段。
- 在编码模板中,在需要的地方粘贴代码段。