Webflow导出后编辑难题: 修改与CMS数据迁移

Webflow 设计导出后的编辑困境

使用 Webflow 构建网站，并导出后在外部添加功能是很常见的工作流。但是，如果之后需要修改设计，直接导入 Webflow 似乎不可行，这造成了一个难题：如何在导出后编辑 Webflow 设计？同时，也带来了另一个问题，Webflow 的 CMS 数据是否可以方便地导出和迁移？本篇文章将围绕这些问题，分析原因，并提供解决方案。

导出后设计修改的挑战

Webflow 本质上是一个可视化的网站构建器。它会生成结构化的 HTML、CSS 和 JavaScript 代码，一旦导出这些代码，它们就不再与 Webflow 编辑器同步。这使得在 Webflow 中进行后续设计修改并应用到已导出代码中变得困难。

使用导出代码意味着你需要直接操作代码进行设计调整。而想要重新在 Webflow 中编辑就需要将其导入，但Webflow 并没有直接导入HTML并转换为Webflow项目的能力。所以，你面临的主要挑战就是如何选择合适的编辑器来对已导出的设计进行修改。

可视化编辑方案：VS Code 与插件

选择代码编辑器至关重要。一个理想的方案是使用 Visual Studio Code (VS Code)。VS Code 不仅是一个强大的代码编辑器，通过安装插件可以支持 HTML、CSS 和 JavaScript 的可视化编辑。

解决方案步骤：

1. 安装 VS Code: 如果还没有安装，请从官方网站下载并安装。

2. 安装 Live Server 插件： Live Server 是一个本地开发服务器，能够实时预览你的代码更改。 在 VS Code 扩展商店搜索“Live Server”并安装。

3. 安装 HTML CSS Support 插件： 提供 CSS 类名的智能提示，在编辑 HTML 和 CSS 代码时非常有帮助。 在 VS Code 扩展商店搜索“HTML CSS Support”并安装。

4. 安装 HTML Preview 插件： 这是一个简单但在编辑HTML时非常有用的插件，允许你预览 HTML 代码的效果。在VS Code扩展商店搜索“HTML Preview”并安装。

5. 打开项目文件夹： 在 VS Code 中打开你的 Webflow 导出项目文件夹。

6. 开始编辑： 现在你可以使用 VS Code 直接编辑 HTML、CSS 和 JavaScript 文件，并在 Live Server 的帮助下实时预览你的修改。

示例代码/操作：

1. 在VS Code中点击左侧侧边栏的 “扩展” 按钮，或使用快捷键 Ctrl+Shift+X (Windows)或 Command+Shift+X (Mac)。
2. 在搜索框输入 Live Server，点击对应的扩展条目并点击 "安装" 按钮。重复该步骤安装 “HTML CSS Support” 和“HTML Preview” 。
3. 点击 文件 > 打开文件夹... (File > Open Folder...) ，然后选择你的导出项目文件夹。
4. 选择你想要修改的 index.html 文件，然后右键点击文件选择Open With Live Server，实时预览你的更改。

建议：使用 Ctrl+Shift+I (Windows)或 Command+Option+I (Mac) 打开浏览器开发者工具， 检查并修改样式

使用 VS Code 并安装相应的插件可以在一定程度上模拟 Webflow 的可视化编辑，提供良好的代码补全，代码片段，实时预览能力， 并通过浏览器开发工具辅助设计调整。 虽然不能完全取代 Webflow， 但也能提供更高效的开发和修改工作流。

Webflow CMS 数据导出和迁移

Webflow CMS 系统，也像大多数内容管理系统一样，会将内容存储在其自己的数据库中，导出网站并不能导出其中的CMS数据。 如果想将整个网站 (包括CMS数据) 迁移到其它平台，目前无法直接将 Webflow CMS 的数据导出。

Webflow CMS 导出局限性

• 无法直接导出： Webflow 并未提供直接导出 CMS 数据的工具。 即使导出了代码，CMS 的内容仍然是 Webflow 特有的。

数据迁移方案：

• 手动导出： 对于小型站点，可以手动复制粘贴 CMS 内容，然后迁移到新的 CMS。

• API 接口： 如果你是高级用户并且有一定的开发经验，你可以尝试利用 Webflow 的 API 来访问和导出你的 CMS 数据。 之后利用其他CMS API或其它方法写入新的数据库中。

示例 (利用Webflow API) 步骤 (非代码示例，操作):

1. 获取Webflow API Token: 前往Webflow的集成设置页面获取你的API Token。

2. 编写脚本或使用工具： 使用脚本或工具(如 curl 或者其它客户端请求库)，请求 Webflow 的 API Endpoint ，并将响应数据保存成文件。 这部分操作需要编写少量代码完成，以下是 curl 工具的简单演示。

    curl --header "Authorization: Bearer <YOUR_API_TOKEN>"  https://api.webflow.com/v2/collections/<collection_id>/items
   
   

   解释 ：
   * curl: 是一个在命令行中传输数据的工具。
   * --header "Authorization: Bearer <YOUR_API_TOKEN>": 添加HTTP授权请求头，YOUR_API_TOKEN替换成实际的令牌。
   * https://api.webflow.com/v2/collections/<collection_id>/items： 指的是Webflow API请求的目标地址，将<collection_id>替换为需要导出数据集合的ID，通常是页面分类，博客分类ID。

3. 解析JSON数据： 将 curl 命令返回的 JSON 数据解析，并导出你需要的内容。

4. 将数据导入新CMS： 最后需要将解析的数据导入到目标 CMS 中。可能需要按照新 CMS 的 API 或数据结构进行适配，以便成功导入。

额外的建议：

• 备份策略： 建议在修改或导出任何数据之前进行网站和数据的完整备份。

• 安全性： 使用 API 时，务必妥善保管你的 API 令牌，不要将其泄露或上传到公共存储库中。

总结

直接在导出后的 HTML 文件中编辑网站可能会带来一些麻烦。为了避免这个困难，可以利用 VS Code 并安装一些有助于可视化编辑的扩展。使用 Webflow API 可以让你一定程度上处理 Webflow CMS 数据的导出。但是直接将 Webflow CMS数据完全移植到其他CMS可能比较困难，必须提前做好规划，并权衡不同方案之间的利弊，这样才能使项目成功进行。