跳到内容

创建和编辑模块

上次更新时间: 二月 13, 2025

除非另有说明,否则适用于以下任何订阅

所有产品和计划

在设计管理器工具中,您可以创建自定义编码模块,为博客、页面或电子邮件添加高级功能自定义模块提供多种功能,因此可以 在页面、电子邮件或博客编辑器中完全 自定义 内容

请注意:创建模块需要了解 HTML、CSS、HubL 和 HubSpot 设计管理器。HubSpot 建议与开发人员合作创建编码模块。

创建新模块

  • 在 HubSpot 帐户中,导航到内容 > 设计管理器
  • 查找器顶部,单击 "文件"下拉菜单并选择 "新建文件"。

  • 在对话框中,单击 "今天要创建什么?下拉菜单,然后选择模块。

  • 单击下一步。
  • 选择要使用模块的每种内容类型旁边的复选框:页面、博客文章、博客列表、电子邮件或报价。电子邮件模板中使用的模块不能包含 CSS 或 JavaScript。

请注意: 用于电子邮件的自定义模块只能在订阅 了Marketing Hub 专业版或企业版 的账户中创建

  • 选择该模块是本地模块 还是全局模块。如果创建的是全局模块,那么编辑该模块的内容将更新所有使用该模块的位置。
  • 输入模块的文件名 ,然后单击 "创建"。

给模块贴标签

默认情况下,内容编辑器将使用模块在设计管理器中的名称来引用模块。如果希望模块在内容编辑器中使用不同的名称,可以通过输入标签来实现。

为模块添加字段

向模块添加字段,以设置模块的内容或样式,并使其可在内容编辑器中编辑。有关可用字段类型的 更多信息,请参阅我们的开发人员文档。

  • 在右侧的模块检查器中,单击 "字段 "部分的 "添加字段 " 下拉菜单 ,然后选择一个字段添加到模块中。

  • 点击字段名旁的铅笔图标 edit 编辑字段名。要编辑HubL 变量名,请在HubL 变量名 文本字段中进行修改。

添加字段默认内容

在 "内容选项 "部分,您可以添加默认内容,当模块在模板和内容编辑器中使用时,这些内容就会出现。默认内容选项因字段类型而异。

在下面的示例中,字段类型是图像字段,因此默认内容选项是选择默认图像和隐藏尺寸控制。

设置字段编辑器选项

在"编辑器选项 "部分,可以针对用户如何在内容编辑器中编辑模块启用以下选项:

  • 将此字段设为必填字段: 用户将无法在内容编辑器中将此字段留空。
  • 防止在内容编辑器中编辑:字段内容不能在内容编辑器中编辑;仍可在模板级别上编辑。此选项不适用于全局模块,因为全局模块无法在页面级别进行编辑。
  • 工具提示帮助文本:在字段中添加帮助文本,为用户提供上下文或说明。当用户在编辑时将鼠标悬停在字段上时,该帮助文本将显示在工具提示中。

  • 内联帮助文本:在字段中添加帮助文本,为用户提供上下文或说明。当用户编辑模块时,帮助文本将显示在字段下方。

设置现场显示条件

您可以使用字段显示条件,将模块字段设置为只有在另一个字段满足特定条件时才显示。

  • 在显示条件 部分,单击HubL 变量 下拉菜单 选择模块字段,然后单击非空 下拉菜单选择该字段的条件。
  • 如果选择条件等于,请输入值 或 regex。

在下面的示例中,正在为图像字段设置显示条件。条件是名为image_title 的文本字段中的值必须等于Headshot,图像字段才能出现在模块中。

设置条件后,显示条件将自动启用。要禁用显示条件,请单击显示条件右侧的切换开关 。

设置现场中继器选项

您可以在 "中继器选项 "部分为字段设置中继器选项。中继器是可以创建多个对象并使用for 循环显示的字段和组。

  • 在 "中继器选项 "部分,选择最小 和/或最大值。 最大 该字段所需实例的最小和/或最大数量。
  • 您还可以选择设置默认对象数量,这将是模块中默认出现的字段实例数量。

在下面的示例中,图像字段被设置为图像滑块。对象数量限制设置 模块中最少显示3 个图像 字段,最多显示5 个图像字段。用户将看到模块中默认出现4 个图像 字段,并可选择增加一个图像字段或删除一个现有图像字段。

修改其中一个选项后,中继器选项将自动启用。要禁用中继器选项,请单击中继器选项右侧的切换开关 。

分组模块字段

创建字段后,您最多可以将 4 个字段分组,以便按相关性组织字段。字段组可用于建立自定义字段逻辑。进一步了解模块字段组

将模块字段分组:

  • 单击模块编辑器右侧边栏中的组。

  • 选择要分组的字段。
  • 单击创建组。

复制并粘贴字段片段

  • 准备在模块中加入字段时,将字段片段复制并粘贴到模块的HTML + HubL 编辑器中。
    • 如果在字段检查器中,单击字段HubL 变量名右侧的 "复制片段 "。
    • 如果在模块检查器中,将鼠标悬停在字段上,点击 "操作" 下拉菜单 ,然后选择 "复制片段"。
  • 在HTML + HubL 编辑器中点击要添加字段的位置,然后按Ctrl+V或 Cmd+V 粘贴片段。

编写模块语法

编辑模块时,您可以在HTML + HubL、CSS 和JS 编辑器面板中编写其他模块语法。有关 模块代码编辑器模块语法参考的更多信息, 请参阅 HubSpot 的设计器文档。

为模块添加帮助文本

在"编辑器选项"部分,添加帮助文本,为用户提供编辑模块时的上下文。帮助文本不能超过 300 个字符。

用户在内容编辑器中编辑模块时,模块字段上方会显示帮助文本。

预览模块

点击模块编辑器右上方的预览 按钮,可以预览模块在内容编辑器中的外观和功能。模块预览将在新标签页中打开。该预览会与编辑器同步,并在您工作时自动刷新。

发布模块

完成添加字段和编写模块语法后,就可以发布模块了。在右上方,单击 "发布更改"

为模板提供模块

  • 打开编辑器右上角 的 "模板可用 "切换开关,即可将此模块添加到模板中。

  • 关闭此切换 以 进行更改或测试模块功能。如果禁用此切换,您的团队将看到该模块不可用于模板的提示。

将模块添加到模板中

发布模块后,您可以将其添加到模板中,在页面中使用。

将模块添加到拖放模板:

  • 在模板布局编辑器中,单击布局检查器顶部的添加 选项卡,然后搜索模块。您创建的自定义模块可以通过自定义模块图标识别:customModules
  • 将模块拖放到模板中。

要在编码模板中添加模块,可以将模块片段复制并粘贴到模板中:

  • 要从模块编辑器复制模块片段,请在右侧边栏底部单击 "复制片段"。

  • 从设计管理器的左侧边栏复制模块片段:
    • 在左侧边栏中找到自定义模块。
    • 右键单击模块,然后选择复制片段。或者,也可以选择模块,然后单击左上角的操作 并选择复制片段。

  • 在编码模板中,在需要的地方粘贴代码段。

这篇文章有帮助吗?
此表单仅供记载反馈。了解如何获取 HubSpot 帮助