> ## 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/cn/templates/create-a-template.md)）；新模板创建后，编辑器会打开该模板。

如需关闭编辑器，请使用 Shopify 后台中窗口的关闭按钮。您会回到之前所在的页面。

## 界面介绍

**顶部栏** 显示模板名称和以下操作：

| 操作 | 作用 |
| - | - |
| **历史记录** | 打开模板的版本历史记录。打开期间，按钮显示为 **返回编辑器**。 |
| **发布** | 当 **需要发布** 已开启且模板有未发布的草稿时，作为主按钮代替历史记录显示。请参阅[保存更改并发布](https://foliant-help.iforiti.com/cn/template-editor/save-and-publish.md)。 |
| **模板设置** | 关闭编辑器并打开模板的设置页面：模板的适用对象、名称、单据类型、语言和发送方式。 |
| **以 JSON 查看区块** | 仅限可视化模板。以数据形式显示区块，便于您导出或导入。请参阅[以 JSON 导出和导入区块](https://foliant-help.iforiti.com/cn/template-editor/export-import-blocks.md)。 |
| **替换为起始模板…** | 用现成的起始模板或设计替换整个模板。在您保存之前，不会有任何更改。 |
| **删除** | 在您确认后删除模板。 |

**顶部栏下方的一行** 包含：

* 模式切换：**可视化** 和 **代码**。请参阅[在可视化和代码之间切换](https://foliant-help.iforiti.com/cn/template-editor/visual-and-code-modes.md)。
* 单据的 **纸张**、**文档语言**、**第二语言**（代码模板）和 **数字格式**。这些设置会随模板一起保存。请参阅[预览、纸张尺寸和缩放](https://foliant-help.iforiti.com/cn/template-editor/preview-paper-and-zoom.md)以及[日期、语言和翻译](https://foliant-help.iforiti.com/cn/template-editor/liquid-dates-and-languages.md)。
* 需要发布时显示的 **已发布** 或 **草稿 — 有未发布的更改** 标记。
* 有待保存的更改时显示的 **未保存的更改** 标记。
* 在可视化编辑器中：**撤销**、**重做**、**单据样式** 和区块数量。

**主区域** 取决于所选模式：

* **可视化**：左侧是区块面板，中间是页面，右侧是检查器。请参阅[添加、移动和删除区块](https://foliant-help.iforiti.com/cn/template-editor/add-and-arrange-blocks.md)。
* **代码**：左侧是代码编辑器，附有 **Liquid 变量** 和 **元字段** 参考，右侧是实时预览。请参阅[编辑模板代码](https://foliant-help.iforiti.com/cn/template-editor/code-editor.md)。

在页面上方，您还会看到 **预览 PDF**、**水印：开** / **水印：关** 按钮（请参阅[添加水印或印章](https://foliant-help.iforiti.com/cn/template-editor/watermarks.md)）、预览订单选择器和缩放按钮。

## 模板在哪个编辑器中打开

* 如果您的套餐包含可视化编辑器，用区块搭建的模板会在 **可视化** 中打开。否则会在 **代码** 中打开。请参阅[可视化编辑器的套餐适用范围](https://foliant-help.iforiti.com/cn/template-editor/visual-editor-plans.md)。
* 用代码编写的模板会在 **代码** 中打开。您可以通过 **可视化** 选项卡将其转换为区块。
* 基于已购买设计创建的模板会改为在设计编辑器中打开。请参阅[自定义设计](https://foliant-help.iforiti.com/cn/designs/customize-a-design.md)。

## 注意事项

* 离开编辑器的链接（如 **模板设置**、品牌设置或套餐页面）会关闭窗口。如果您有未保存的更改，Foliant 会先请您选择 **保存并继续** 或 **放弃并继续**。
* 对于已开具过单据的发票和贷项通知单模板，横幅会提醒您：更改仅适用于今后开具的单据。请参阅[锁定已开具的发票](https://foliant-help.iforiti.com/cn/invoices-and-numbering/locked-invoices.md)。
* 为所有选中订单打印一份单据的模板（发货清单、订单汇总、拣货单）有其专用的区块和字段。预览会为这类模板使用三个示例订单，且区块不能设置条件。

## 相关文章

* [在可视化和代码之间切换](https://foliant-help.iforiti.com/cn/template-editor/visual-and-code-modes.md)
* [添加、移动和删除区块](https://foliant-help.iforiti.com/cn/template-editor/add-and-arrange-blocks.md)
* [编辑模板代码](https://foliant-help.iforiti.com/cn/template-editor/code-editor.md)
* [保存更改并发布](https://foliant-help.iforiti.com/cn/template-editor/save-and-publish.md)
* [创建模板](https://foliant-help.iforiti.com/cn/templates/create-a-template.md)


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