> ## Documentation Index
> Fetch the complete documentation index at: https://foliant-help.iforiti.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 編輯範本程式碼

> 在程式碼編輯器中編輯範本的 Liquid、HTML 和 CSS，插入訂單欄位、使用變數參考並修正程式碼錯誤。

程式碼編輯器讓您完整掌控範本。範本由 HTML 和 CSS 搭配 Liquid 組成，Liquid 也是 Shopify 使用的範本語言：`{{ order_name }}` 會印出訂單名稱，`{% for line_item in line_items %}` 會針對每個品項重複執行。Foliant 的訂單變數沿用 Shopify Order Printer 的變數，因此為其撰寫的範本大多可直接使用。所有方案皆提供程式碼編輯器。

## 開啟程式碼編輯器

在編輯器中開啟範本，然後點擊 **代碼** 分頁。程式碼範本會直接在此開啟。若是視覺化範本，您會先看到編譯後的程式碼；點擊 **編輯程式碼** 即可修改。請參閱[在視覺化與程式碼模式間切換](https://foliant-help.iforiti.com/zh-Hant/template-editor/visual-and-code-modes.md)。

左側窗格有三個分頁：

| 分頁 | 顯示內容 |
| - | - |
| **代碼** | 範本的程式碼，並有語法醒目提示。目前的行號和欄號會顯示在底部。 |
| **Liquid 變數** | 您可使用的變數和篩選器，依類別分組（一般變數、訂單項目詳細資料、顧客詳細資料…），並提供 **搜尋參考**。 |
| **中繼欄位** | 如何印出訂單、顧客、產品和子類的中繼欄位。請參閱[範本中的中繼欄位](https://foliant-help.iforiti.com/zh-Hant/template-editor/metafields.md)。 |

右側窗格是即時預覽。您停止輸入後不久就會更新。

## 插入欄位

1. 將游標放在欄位要插入的位置。
2. 點擊 **插入欄位**。
3. 在 **搜尋欄位** 中搜尋欄位（例如「tracking」或「SKU」），然後點擊該欄位。

Foliant 會在游標處插入對應的 Liquid，例如 `{{ shipping_address.city }}`。訂單項目欄位（例如 `{{ line_item.sku }}`）只能在訂單項目迴圈內使用：請插入 **訂單項目** 來建立迴圈本身。

## 搜尋程式碼

點擊 **插入欄位** 旁的搜尋按鈕（或在程式碼中按下 ⌘F / Ctrl+F），即可在範本中尋找文字。

## 程式碼錯誤

編輯器會在您輸入時檢查程式碼，並在邊界標示問題：

* **錯誤** 會讓您無法儲存，並暫停預覽。未關閉的 `{{` 或 `{%` 就屬於錯誤。錯誤會列在編輯器上方的 **程式碼錯誤** 橫幅中，每一項都附有 **跳至該行**。
* **警告** 會指出可能有誤但不影響儲存的地方，例如不明的 Liquid 篩選器、標籤或物件、不明的 HTML 標籤或 CSS 屬性，或未關閉的 HTML 標籤。

儲存時，Foliant 也會檢查範本：Liquid 必須可讀取、HTML 標籤必須成對，且內嵌 SVG 只能包含繪圖元素。若有問題，儲存會失敗，並由 **更新失敗** 橫幅列出最多五個問題，已知時會附上行號。

若範本已儲存但無法算繪預覽，橫幅會顯示 Liquid 的訊息，已知時也會顯示行號。

## 撰寫良好的範本

* 金額以分為單位：請一律搭配金額篩選器印出，例如 `{{ total_price | money }}`。請參閱[範本中的金額與幣別](https://foliant-help.iforiti.com/zh-Hant/template-editor/liquid-money-and-currency.md)。
* 對顧客輸入的文字（例如備註和地址）使用 `| escape`：`{{ note | escape }}`。
* 對需隨文件語言變化的字詞使用 `{{ 'subtotal' | t }}`。請參閱[日期、語言與翻譯](https://foliant-help.iforiti.com/zh-Hant/template-editor/liquid-dates-and-languages.md)。
* 使用 Foliant 內建的 VAT 片段：`{% include 'vat_breakdown' %}` 會印出 VAT 明細表，`{% include 'legal_notes' %}` 則印出法律說明（反向收費、出口、IOSS…）。

## 注意事項

* 若有編號的範本（發票、折讓單或報價單）沒有在任何地方印出 `document_number`，Foliant 會在文件結尾加上一小行編號。請參閱[範本中的文件編號](https://foliant-help.iforiti.com/zh-Hant/template-editor/liquid-document-numbers.md)。
* 程式碼範本的頁碼和重複的表格標題，位於範本設定頁面的 **頁面版面** 下。
* 若要從 Shopify Order Printer 或 Order Printer Pro 移入範本，請在範本頁面使用 **匯入範本**。請參閱[從 Order Printer 匯入範本](https://foliant-help.iforiti.com/zh-Hant/templates/import-from-order-printer.md)。

## 相關文章

* [訂單物件與常用變數](https://foliant-help.iforiti.com/zh-Hant/template-editor/liquid-order-variables.md)
* [Liquid 篩選器](https://foliant-help.iforiti.com/zh-Hant/template-editor/liquid-filters.md)
* [在視覺化與程式碼模式間切換](https://foliant-help.iforiti.com/zh-Hant/template-editor/visual-and-code-modes.md)
* [預覽、紙張大小與縮放](https://foliant-help.iforiti.com/zh-Hant/template-editor/preview-paper-and-zoom.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.