> ## 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/cn/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/cn/template-editor/editor-overview.md)
* [编辑模板的代码](https://foliant-help.iforiti.com/cn/template-editor/code-editor.md)
* [区块参考](https://foliant-help.iforiti.com/cn/template-editor/block-catalogue.md)
* [可视化编辑器的套餐适用范围](https://foliant-help.iforiti.com/cn/template-editor/visual-editor-plans.md)


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