建立自訂程式碼範本

開發者可以利用 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. 若存在任何程式碼錯誤，系統將顯示錯誤訊息。請參閱程式碼編輯器下方的錯誤主控台，以了解這些錯誤的詳細資訊：

• • 在頁面頂端的錯誤訊息中，點擊「錯誤控制台」即可開啟程式碼編輯器下方的控制台。
  • 或者，您也可以前往程式碼編輯器的左下角，並點選「顯示詳細資訊」。