创建一个自定义编码的模板

开发者可以使用 HTML + HubL 从零开始构建博客、网站页面、落地页和电子邮件模板。您还可以将拖放式模板布局克隆为 HTML，然后将其作为代码模板进行自定义。

请查阅我们的开发者文档，了解有关设计自定义资源的更多信息。

创建新的 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. 如果存在任何代码错误，系统将显示错误消息。请在代码编辑器下方的错误控制台中查看有关这些错误的更多信息：

• • 在页面顶部的错误消息中，点击“错误控制台”以打开代码编辑器下方的控制台。
  • 或者，导航至代码编辑器的左下角，点击“显示详细信息”。