> ## 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。**視覺化**編輯器會根據區塊和文件樣式為您產生這些代碼；**代碼**編輯器則直接顯示代碼本身。您可以使用編輯器頂端的**視覺化**和**代碼**分頁來切換。切換時，Foliant 絕不會丟棄代碼：無法轉換為一般區塊的內容，都會保留為**自訂 Liquid** 區塊。

## 開始之前

**視覺化**分頁是否可用，取決於您的方案。如果無法使用，該分頁會顯示包含此功能的方案，代碼編輯器則照常運作。請參閱[視覺化編輯器的方案適用範圍](https://foliant-help.iforiti.com/zh-Hant/template-editor/visual-editor-plans.md)。

## 將代碼範本轉換為區塊

1. 在編輯器中開啟範本。範本會以**代碼**模式開啟。
2. 按一下**視覺化**分頁。**轉換為視覺化**對話方塊隨即開啟。
3. 選擇開始方式：

| 選項 | 會發生什麼事 |
| - | - |
| **從區塊版面開始** | 選擇一個**版面**（例如**發票**、**出貨單**或**退貨表單**），然後按一下**使用區塊版面**。您目前的代碼會被該版面取代。在您儲存之前，按一下**捨棄**即可還原您的代碼；儲存之後，代碼仍會保留在版本記錄中。 |
| **將我的程式碼保留為自訂 Liquid 區塊** | 按一下**保留我的程式碼**。您的代碼會被保留，您也可以在其周圍新增區塊。對於 Foliant 能辨識的段落（例如頁首、地址、品項表格或總計），只要印出的訂單資訊相同，就會轉換為一般區塊；其餘內容則會在原位置保留為自訂 Liquid 區塊。 |

4. 檢查頁面，然後儲存。

可用的版面取決於範本：每筆訂單一份文件（發票、貸項通知單、報價單、出貨單、退貨表單、商業發票、採購單、一般訂單文件、運送標籤、收據），或所有選取的訂單共用一份文件（揀貨單、訂單摘要）。如果範本尚未設定文件類型，套用某個文件類型的版面後，範本就會變成該類型，因此套用發票版面的範本會以發票的方式編號。

## 查看或編輯視覺化範本的代碼

1. 在視覺化範本中，按一下**代碼**分頁。您會看到**編譯後的 Liquid**：也就是 Foliant 根據您的區塊和文件樣式產生的代碼。此代碼為唯讀。
2. 如要修改，請按一下**編輯程式碼**。從此時起，代碼編輯器即為使用中狀態，儲存時會儲存您的代碼。
3. 儲存時，Foliant 會從您的代碼讀回區塊，因此範本仍維持視覺化。

您也可以開啟單一區塊的編譯後代碼：選取該區塊，然後在其**內容**分頁中按一下**查看編譯後的 Liquid**。

## 編輯代碼後切換回視覺化

按一下**視覺化**分頁。Foliant 會從您的代碼讀取區塊：

* 您未修改代碼的區塊，會維持原樣。
* 如果部分代碼已與其區塊不符，或是寫在任何區塊之外，**要切換回視覺化模式嗎？**對話方塊會在**保留為自訂 Liquid 的部分**下方列出這些部分及原因：
  * **已編輯的代碼**：區塊的代碼已變更，因此會變成自訂 Liquid 區塊。
  * **寫在任何區塊之外**：您在區塊之間新增的代碼。
* 按一下**切換到視覺化**以繼續，或按一下**留在 Liquid** 以繼續編輯代碼。

不會刪除任何內容，您也可以復原此次切換。切換前，您需要先修正所有代碼錯誤。

## 以起始範本取代範本

頂端列的**替換為起始範本…**會以起始範本或設計取代編輯器中的所有內容。起始範本都是代碼範本，因此視覺化範本會變成代碼範本。在您儲存之前不會有任何變更，按一下**捨棄**即可還原原本的內容。

## 注意事項

* 自訂 Liquid 區塊和其他區塊一樣，可以移動、設定樣式及加上條件。其代碼會完全依照撰寫內容印出。
* 轉換是以範本為單位，而且只有在您選擇時才會進行。
* 以購買的設計建立的範本使用設計編輯器，無法在此切換為視覺化或代碼。

## 相關文章

* [開啟範本編輯器](https://foliant-help.iforiti.com/zh-Hant/template-editor/editor-overview.md)
* [編輯範本的代碼](https://foliant-help.iforiti.com/zh-Hant/template-editor/code-editor.md)
* [區塊參考](https://foliant-help.iforiti.com/zh-Hant/template-editor/block-catalogue.md)
* [視覺化編輯器的方案適用範圍](https://foliant-help.iforiti.com/zh-Hant/template-editor/visual-editor-plans.md)


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