开发人员可以使用 HTML + HubL 从零开始创建博客、网站页面、登陆页面和电子邮件模板。您还可以将拖放模板布局克隆为 HTML，然后将其定制为编码模板。
在我们的开发人员文档中了解有关设计自定义资产的更多信息。
开始之前
在开始使用该功能之前，请务必充分了解应提前采取的步骤，以及该功能的限制和使用该功能的潜在后果。
了解要求
了解局限性和注意事项
- 创建电子邮件模板需要订阅Marketing Hub 专业版或企业版。Content Hub 账户可使用拖放电子邮件编辑器创建电子邮件。
- 自定义编码模板可以使用许多预定义变量。其中一些变量是创建电子邮件和页面所必需的，而其他变量则是可选的。了解更多有关添加必备电子邮件、网站和着陆页HubL 变量的信息。
创建新的 HTML + HubL 文件
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
- 在左栏顶部，单击 文件 菜单，然后选择 新建文件。
- 在 "新建文件"对话框中，单击 "今天要创建什么？"下拉菜单，选择 HTML + HubL，然后单击 "下一步"。
- 在设置新 HTML + HUBL 模板对话框中，输入新文件的详细信息：
- 选择 "您要创建什么？
- 模板：定义将在网站页面、登陆页面、博客文章或电子邮件中显示的内容的布局和结构。
- 模板局部：是可重复使用的代码或代码片段，可包含在多个其他模板中。
- 点击模板类型下拉菜单，选择自定义编码模板的类型（页面、博文/列表、电子邮件或系统页面）。了解有关模板类型的更多信息。
- 在文件名字段中输入文件名。
- 要更新文件位置，请单击 "文件位置"部分中的 "更改 "并选择文件夹。
- 单击 创建。
在模板中添加 HTML + HubL
配置好新文件后，您将被引导至代码编辑器，添加自定义代码并预览其在实时页面上的显示效果。
添加 HTML + HubL
- 输入模板的 HTML。了解更多有关在自定义编码模板中添加CSS和JavaScript文件的信息。
- 要显示 HubL 的渲染效果，请单击打开 "显示输出"开关。右侧将打开一个面板，显示渲染预览。
添加所需的 HubL
自定义编码模板需要特定的HubL 变量才能运行。如果缺少其中任何一个所需变量，尝试发布模板时就会出现错误信息。
- 页面和博客模板需要以下变量：
{{standard_footer_includes}}{{standard_header_includes}}
- 电子邮件模板需要以下变量才能符合 CAN-SPAM 标准。
{{unsubscribe_link}} 或 {{unsubscribe_link_all}}(至少包含一个）{{unsubscribe_anchor}}{{site_settings.company_name}}{{site_settings.company_street_address_1}}{{site_settings.company_city}}{{site_settings.company_state}}{{site_settings.company_zip}}
将模板克隆为 HTML
除了从头开始创建模板外，您还可以将博客、网站页面和登陆页面的模板拖放到 HTML 中进行克隆。
- 创建现有模板的编码版本：
- 在 HubSpot 帐户中，导航到内容 > 设计管理器。
-
- 在左侧边栏中，打开要克隆的模板。
- 单击 "操作"下拉菜单，选择 "克隆为 HTML"。HTML 文件将在与原始文件相同的文件夹中创建。
预览和发布模板
创建模板后，您可以预览它在实时页面上的显示效果，然后将其发布。
- 在右上角单击 "预览"。
- 如果选择带显示选项的实时预览，则可以通过选择视口预设来预览模板在其他设备上的显示效果。
- 如果选择不带显示选项的预览，则只能预览模板在浏览器上的显示效果。
- 编辑完成后，单击右上角的 "发布更改"。
- 如果出现任何代码错误，将显示错误信息。在代码编辑器下方的错误控制台中查看有关这些错误的更多信息：
- 在页面顶部的错误信息中，单击错误控制台打开代码编辑器下方的控制台。
- 或者，导航到代码编辑器底部并单击显示详细信息。
Design Manager
