> ## 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 的代碼編輯器。

您可以在模板編輯器中變更文件的外觀和列印內容。編輯器會以全螢幕視窗開啟在**模板**頁面上方。大多數模板都有兩種編輯方式：**視覺化**編輯器讓您不必撰寫代碼，直接用區塊組成文件；**代碼**編輯器則讓您直接編輯模板的 Liquid 和 HTML。無論您變更什麼，頁面預覽都會隨著您的編輯同步更新。

![視覺化模式下的模板編輯器](https://mintcdn.com/foliant-dev/AoWxppgqeHqT1nDZ/template-editor/images/editor-overview.png?fit=max\&auto=format\&n=AoWxppgqeHqT1nDZ\&q=85\&s=4c16c3872dcf20e9f32165be1563b3b2)

## 開啟編輯器

1. 在 Foliant 中，前往**模板**。
2. 開啟模板的**動作**選單，然後選擇**編輯模板**。您也可以開啟模板的**設定**頁面，並在該頁面點擊**編輯模板**。

編輯器一律開啟已存在的模板。若要建立新模板，請先在模板頁面使用**建立模板**（請參閱[建立模板](https://foliant-help.iforiti.com/zh-Hant/templates/create-a-template.md)）；新模板建立後，編輯器就會開啟該模板。

若要關閉編輯器，請使用 Shopify 管理介面中視窗的關閉按鈕。您會回到原本所在的頁面。

## 您會看到的內容

**頂部列**會顯示模板名稱和以下動作：

| 動作 | 用途 |
| - | - |
| **歷史記錄** | 開啟模板的版本歷史記錄。開啟期間，按鈕會顯示為**返回編輯器**。 |
| **發布** | 當**需要發布**已開啟且模板有未發布的草稿時，會取代歷史記錄成為主要按鈕。請參閱[儲存變更並發布](https://foliant-help.iforiti.com/zh-Hant/template-editor/save-and-publish.md)。 |
| **範本設定** | 關閉編輯器並開啟模板的設定頁面：模板適用對象、名稱、文件類型、語言和寄送方式。 |
| **以 JSON 檢視區塊** | 僅限視覺化模板。以資料形式顯示區塊，方便您匯出或匯入。請參閱[以 JSON 匯出和匯入區塊](https://foliant-help.iforiti.com/zh-Hant/template-editor/export-import-blocks.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)以及[日期、語言和翻譯](https://foliant-help.iforiti.com/zh-Hant/template-editor/liquid-dates-and-languages.md)。
* 需要發布時，會顯示**已發布**或**草稿 — 有未發布的變更**標籤。
* 您有待儲存的變更時，會顯示**未儲存的變更**標籤。
* 在視覺化編輯器中：**復原**、**重做**、**單據樣式**和區塊數量。

**主要區域**依模式而定：

* **視覺化**：左側是區塊面板，中間是頁面，右側是檢查器。請參閱[新增、移動和移除區塊](https://foliant-help.iforiti.com/zh-Hant/template-editor/add-and-arrange-blocks.md)。
* **代碼**：左側是代碼編輯器，附有 **Liquid 變數**和**中繼欄位**參考資料，右側是即時預覽。請參閱[編輯模板的代碼](https://foliant-help.iforiti.com/zh-Hant/template-editor/code-editor.md)。

在頁面上方，您還會看到**預覽 PDF**、**浮水印：開** / **浮水印：關**按鈕（請參閱[新增浮水印或印章](https://foliant-help.iforiti.com/zh-Hant/template-editor/watermarks.md)）、預覽訂單選擇器和縮放按鈕。

## 模板會在哪個編輯器中開啟

* 以區塊建立的模板，若您的方案包含視覺化編輯器，會在**視覺化**中開啟。否則會在**代碼**中開啟。請參閱[視覺化編輯器的方案適用範圍](https://foliant-help.iforiti.com/zh-Hant/template-editor/visual-editor-plans.md)。
* 以代碼撰寫的模板會在**代碼**中開啟。您可以透過**視覺化**分頁將其轉換為區塊。
* 以購買的設計建立的模板，則會改在設計編輯器中開啟。請參閱[自訂設計](https://foliant-help.iforiti.com/zh-Hant/designs/customize-a-design.md)。

## 注意事項

* 離開編輯器的連結（例如**範本設定**、品牌設定或方案頁面）會關閉視窗。如果您有未儲存的變更，Foliant 會先請您選擇**儲存並繼續**或**捨棄並繼續**。
* 對於已開立過文件的發票和折讓單模板，橫幅會提醒您：變更只會套用到今後開立的文件。請參閱[鎖定已開立的發票](https://foliant-help.iforiti.com/zh-Hant/invoices-and-numbering/locked-invoices.md)。
* 為所有選取的訂單列印同一份文件的模板（貨運清單、訂單摘要、揀貨單）有其專屬的區塊和欄位。這類模板的預覽會使用三筆範例訂單，且區塊無法設定條件。

## 相關文章

* [在視覺化和代碼之間切換](https://foliant-help.iforiti.com/zh-Hant/template-editor/visual-and-code-modes.md)
* [新增、移動和移除區塊](https://foliant-help.iforiti.com/zh-Hant/template-editor/add-and-arrange-blocks.md)
* [編輯模板的代碼](https://foliant-help.iforiti.com/zh-Hant/template-editor/code-editor.md)
* [儲存變更並發布](https://foliant-help.iforiti.com/zh-Hant/template-editor/save-and-publish.md)
* [建立模板](https://foliant-help.iforiti.com/zh-Hant/templates/create-a-template.md)


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