创建自定义编码模板

开发人员可以使用 HTML + HubL 从零开始创建博客、网站页面、登陆页面和电子邮件模板。您还可以将拖放模板布局克隆为 HTML，然后将其定制为编码模板。

有关设计自定义资产的更多信息，请参阅我们的开发人员文档。

开始之前

在开始使用该功能之前，请务必充分了解应提前采取的步骤，以及该功能的限制和使用该功能的潜在后果。

了解需求

• 确认你拥有在设计管理器中创建和编辑模板的设计工具权限。
• 如果需要编辑全局网络资产和博客/网站设置，建议同时拥有全局内容和主题设置以及网站设置权限。

了解限制和注意事项

• 创建电子邮件模板需要订阅Marketing Hub 专业版或企业版。 Content Hub 账户可以使用拖放电子邮件编辑器创建电子邮件。
• 自定义编码模板可以使用许多预定义变量。其中一些变量是创建电子邮件和页面所必需的，而其他变量则是可选的。了解更多有关添加必备电子邮件、网站和着陆页HubL 变量的信息。

创建新的 HTML + HubL 文件

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

3. 在对话框中，单击 "今天要创建什么？"下拉菜单，然后选择HTML + HubL。

4. 在 "您要创建什么？"字段中，选择一个选项：
   • 模板：定义将在网站页面、登陆页面、博客文章或电子邮件中显示的内容的布局和结构。
   • 模板局部：是可重复使用的代码或代码片段，可包含在多个其他模板中。
5. 点击模板类型下拉菜单，选择自定义编码模板的类型（页面、博文/列表、电子邮件或系统页面）。了解有关模板类型的更多信息。
6. 在文件名字段中输入文件名。
7. 要更新文件位置，请单击 "文件位置"部分中的 "更改"并选择文件夹。
8. 完成后，单击 创建。

在模板中添加 HTML + HubL

配置好新文件后，系统会引导你进入代码编辑器，添加自定义代码并预览代码在实时页面上的显示效果。

添加 HTML + HubL

1. 输入模板的HTML。了解有关向自定义编码模板添加CSS和JavaScript文件的更多信息。
2. 要显示 HTML + HubL 的渲染效果，请切换左上角的显示输出开关。右侧将打开一个面板，显示渲染预览。

添加所需的 HTML + HubL

自定义编码模板需要特定的 HTML 或HubL 变量才能运行。如果缺少这些必要变量，在尝试发布模板时可能会出现错误信息。

• 页面和博客模板需要以下变量：

<!-- Enter above the closing </header> tag -->
{{ standard_header_includes }}

<!-- Enter above the closing </body> tag -->
{{ standard_footer_includes }}

• 电子邮件模板需要以下变量才能符合 CAN-SPAM 标准：

<!-- Enter variables above the closing </body> tag -->
{{ site_settings.company_name }}
{{ site_settings.company_street_address_1 }}
{{ site_settings.company_city }}
{{ site_settings.company_state }}
{{ site_settings.company_zip }}
{{ site_settings.company_country }}

<!-- Choose one unsubscribe variable -->
{{ unsubscribe_link }}
{{ unsubscribe_link_all }}

• 电子邮件模板需要以下代码才能在某些电子邮件客户端中显示预览文本：

<!-- Preview text (text which appears right after subject in certain email clients) -->

<div id="preview_text" style="display:none!important">{% text "preview_text" label="Preview Text <span class=help-text>This will be used as the preview text that displays in some email clients</span>", value="", no_wrapper=True %}
</div>

将模板克隆为 HTML

除了从头开始创建模板，你还可以将博客、网站页面和登陆页面的模板拖拽克隆为 HTML。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在查找器中，点击要克隆的模板名称。
3. 单击 "操作"下拉菜单并选择 "克隆为 HTML"。HTML 文件将在与原始文件相同的文件夹中创建。

预览并发布模板

创建模板后，您可以预览它在实时页面上的显示效果，然后将其发布。

1. 在 HubSpot 帐户中，导航到内容 > 设计管理器。
2. 在查找器中，单击要预览或发布的模板名称。
3. 在右上角，点击预览下拉菜单并选择一个选项：
   • 如果选择带显示选项的实时预览，则可以通过选择视口预设来预览模板在其他设备上的显示效果。
   • 如果选择不带显示选项的预览，则只能预览模板在浏览器上的显示效果。
4. 完成后，单击 "发布更改"。
5. 如果有任何代码错误，将会出现错误信息。在代码编辑器下方的错误控制台中查看有关这些错误的更多信息：

• • 在页面顶部的错误信息中，单击错误控制台打开代码编辑器下方的控制台。
  • 或者，导航到代码编辑器的左下方并单击显示详细信息。