建立自訂編碼範本

開發人員可以使用 HTML + HubL 從頭建立部落格、網站頁面、登陸頁面和電子郵件範本。您也可以將拖放的範本版面複製為 HTML，然後自訂為編碼範本。

在我們的開發人員文件中了解更多關於設計自訂資產的資訊。

開始之前

在您開始使用此功能之前，請務必事先完全瞭解應採取的步驟，以及此功能的限制和使用此功能的潛在後果。

瞭解需求

• 確認您擁有在設計管理員中建立和編輯範本的設計工具權限。
• 如果您將需要編輯全局網頁資產和部落格/網站設定，建議您也擁有全局內容和主題設定以及網站設定權限。

瞭解限制與注意事項

• 建立電子郵件範本需要訂閱Marketing Hub Professional 或Enterprise。 Content Hub 帳戶可以使用拖放電子郵件編輯器建立電子郵件。
• 自訂編碼範本可以使用許多預定義變數。其中一些變數是建立電子郵件和網頁所必需的，而其他變數則是可選的。進一步瞭解如何新增所需的電子郵件、網站和登陸頁面HubL 變數。

建立新的 HTML + HubL 檔案

1. 在你的 HubSpot 帳戶中，瀏覽「內容」>「設計管理工具」。
2. 在搜尋器頂端，按一下檔案下拉式功能表，然後選擇新檔案。

3. 在對話方塊中，點選What would you like to build today? 下拉式功能表，並選擇HTML + HubL。

4. 在What are you building? 欄位中，選擇一個選項：
   • 範本：定義將會顯示在網站頁面、登陸頁面、部落格文章或電子郵件上的內容的版面與結構。
   • 模板局部：是可重複使用的程式碼或程式碼片段，可包含在多個其他模板中。
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. 如果有任何程式碼錯誤，將會出現錯誤訊息。請在程式碼編輯器下方的錯誤控制台檢視這些錯誤的詳細資訊：

• • 在頁面頂端的錯誤訊息中，按一下錯誤控制台，以開啟代碼編輯器下方的控制台。
  • 或者，導覽至程式碼編輯器的左下方，然後按一下顯示詳細資訊。