--- title: "Webflow 迁移到 Astro：导出、重建与 SEO" description: "Webflow 迁移到 Astro：Webflow 的代码导出不含 CMS 内容、表单和多语言页面。要导出什么、重建什么，以及如何保住 URL 和 SEO。" url: "https://dardo.studio/zh-Hans/blog/webflow-to-astro/" language: "zh-Hans" translations: {"en":"https://dardo.studio/en/blog/webflow-to-astro/","es":"https://dardo.studio/es/blog/migrar-de-webflow-a-astro/","fr":"https://dardo.studio/fr/blog/migrer-webflow-vers-astro/","de":"https://dardo.studio/de/blog/webflow-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-webflow-ad-astro/","pt":"https://dardo.studio/pt/blog/migrar-de-webflow-para-astro/","nl":"https://dardo.studio/nl/blog/webflow-naar-astro/","sv":"https://dardo.studio/sv/blogg/migrera-webflow-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-webflow-do-astro/","uk":"https://dardo.studio/uk/blog/webflow-to-astro/","ru":"https://dardo.studio/ru/blog/webflow-to-astro/","ar":"https://dardo.studio/ar/blog/webflow-to-astro/","hi":"https://dardo.studio/hi/blog/webflow-to-astro/","th":"https://dardo.studio/th/blog/webflow-to-astro/","ja":"https://dardo.studio/ja/blog/webflow-to-astro/","ko":"https://dardo.studio/ko/blog/webflow-to-astro/","zh-Hant":"https://dardo.studio/zh-Hant/blog/webflow-to-astro/"} updated: "2026-10-13T02:20:29.650Z" --- [博客](https://dardo.studio/zh-Hans/blog/) # Webflow 迁移到 Astro：如何迁移 Webflow 网站，同时保住内容、设计和排名 Webflow 迁移到 Astro 之前要知道：代码导出不含 CMS、表单、搜索和多语言页面。哪些要从 Webflow 导出、哪些要在 Astro 中重建，以及如何保住排名。 作者： [Nicolás Cerón](https://dardo.studio/zh-Hans/studio/) ·2026年10月12日 ![夜晚，一座古老的石砌运河船闸敞开着木制闸门，一艘深红色的小船正从水流湍急的运河驶入平静的港湾，山上有一座亮着灯的天文台。](https://dardo.studio/_astro/01M4SGD5R7TZ48H2M3RJ9DSK7D_Z2nrI.webp) ## 要点 - 在付费的 Workspace 方案中，Webflow 可以导出 HTML、CSS、JavaScript 和图片，但不包括 CMS 内容、表单处理、站内搜索、密码保护和次要语言版本。 - 把每个 CMS Collection 导出为 CSV（每种语言各导出一次），或通过 Webflow Data API 读取，并下载每张图片：导出的图片字段仍然指向 Webflow 的托管服务。 - 把代码导出当作参考，而不是新网站：它包含 Webflow 的 JavaScript、jQuery 和空的 Collection 列表。 - Webflow 的 URL 不带末尾斜杠；请设置 Astro 的 trailingSlash 和 build.format 与之保持一致，并为所有发生变化的地址添加 1:1 的服务器端 301 重定向。 - 关闭 Webflow 项目之前，确认没有任何图片、PDF 或 Open Graph 图片仍从 website-files.com 加载。 ## 简短回答 离开 Webflow 比离开 Framer 容易（Framer 根本不提供 HTML 导出），但也只是容易一部分。在付费的 Workspace 方案中，你可以导出网站的 HTML、CSS、JavaScript 和图片，并把它们托管在任何地方。Webflow 帮助中心也同样明确地说明了哪些东西带不走：CMS 内容、表单处理、站内搜索、密码保护、本地化页面和代码组件（code components）都不在导出范围内，Collection 列表只会显示空状态（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code)）。 因此，从 Webflow 迁移到 Astro 一半是导出，一半是重建。先导出 Webflow 能给你的东西，再通过 CSV 或 API 取出 CMS 内容，把每个模板重建为 Astro 组件，替换表单和搜索，重做你想保留的交互，并为每个发生变化的 URL 设置永久重定向。按这个顺序来做，新网站就能保住原有的设计、内容和排名。 ## 团队为什么从 Webflow 迁移到 Astro Webflow 是一款出色的可视化建站工具，很多营销团队都应该继续使用它。离开的理由通常与所有权和成本有关，而不是设计： - **网站改由工程团队负责**。当大部分修改都由开发者完成时，放在你自己代码仓库里的代码比可视化画布更高效，而且可以和你的产品、后端和测试放在一起。 - **按站点计费的方案费用**。根据 Webflow 的[价格页面](https://webflow.com/pricing)（2026 年 10 月 13 日查询），Basic 站点方案每月 15 美元，包含 Webflow CMS 的 Premium 方案每月 25 美元，均按年付费。本地化是附加功能，每月 9 美元起。 - **需要真正后端的功能**：写入 CRM 的表单、受限访问的内容、跨多个网站的搜索，或任何必须在你自己的基础设施上运行的功能。 - **光靠导出无法真正迁出**。代码导出需要付费的 Workspace 方案，仅有站点方案并不够，而且导出内容不含 CMS。无论如何，想要干净地迁出，都需要提前规划。 如果你的营销团队每周都在可视化地发布页面，网站也运转良好，继续使用 Webflow 是合理的选择。迁移应当换来某种具体的收益。 ## Webflow 代码导出包含什么、不包含什么 | 网站组成部分 | 代码导出中有吗？ | 在 Astro 中怎么做 | | -------------------- | --------------------------------------- | ------------------- | | 静态页面 | 有，导出为 .html 文件，仅限主语言 | 重建为 Astro 页面和组件 | | 样式 | 有：网站自己的 CSS、webflow.css 和 normalize.css | 作为参考，只保留需要的 CSS | | 交互和组件 | 有，通过 Webflow 的 JavaScript 文件实现 | 用 CSS 或一小段脚本重做 | | Assets 面板中的图片 | 有 | 用 astro:assets 优化 | | CMS Collection 条目和列表 | 没有；列表显示空状态 | 导出为 CSV 或通过 API 读取 | | 表单提交 | 不处理 | 把每个表单指向你自己的端点 | | 站内搜索 | 没有 | 添加静态搜索索引或搜索服务 | | 密码保护 | 没有 | 在主机或你的应用中保护页面 | | 次要语言 | 没有；仅限主语言 | 用 Astro 的 i18n 路由重建 | | 电商、用户账户、代码组件 | 没有 | 把每一项作为独立项目来规划 | 来源：Webflow 帮助中心关于[导出网站代码](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code)的文章。 ## 检查已发布的 Webflow 网站时我们发现了什么 2026 年 10 月 13 日，我们下载了七个用 Webflow 搭建的网站首页（包括 webflow.com 本身），看看一次迁移需要带走哪些东西： - **七个网站都从 Webflow 的服务器加载 jQuery 和图片**。图片来自 cdn.prod.website-files.com，而 Webflow 自己的帮助中心也指出，导出到 CSV 的图片和文件字段是指向原项目托管位置的链接，一旦该项目被删除，这些链接就会失效（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961290794771-How-do-I-import-content-into-the-Webflow-CMS)）。每个资源都必须下载下来并重新托管。 - **七个网站的社交分享图片也都由 Webflow 提供**。Open Graph 图片很容易被遗忘，旧项目一关闭，LinkedIn 或 WhatsApp 上的链接预览就会失去图片。 - **七个网站都直接在已发布的 HTML 中渲染 CMS 列表**，每个首页有 3 到 19 个 Collection 列表。这是个好消息：我们的 [Framer 迁移到 Astro 指南](https://dardo.studio/zh-Hans/blog/framer-to-astro/)提到，Framer 网站在加载后由运行时重新构建；已发布的 Webflow 页面则不同，它是一份完整的参考，能准确告诉你哪些内容放在哪里，尽管代码导出会把这些列表留空。 - **七个网站中有五个使用了 Webflow Interactions**，其标志是 data-w-id 属性，单个首页上最多有 109 个元素带有该属性。每一个都是需要重做的一小段行为，或者需要决定是否舍弃。 ## Webflow 迁移到 Astro：分步指南 1. **盘点每个 URL**。启用相应选项后，Webflow 会自动生成 /sitemap.xml（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961355371667-Create-a-sitemap-in-Webflow)）。加入每个 Collection 页面，从 Google Search Console 导出时间范围尽可能长的“网页”报告，并在 Site settings 的 Publishing 部分把现有的 301 重定向导出为 CSV（[Webflow Help](https://help.webflow.com/hc/en-us/articles/33961211526291-Import-export-301-redirects)）。 2. **导出内容**。在 CMS 面板中把每个 CMS Collection 导出为 CSV；如果使用了 Localize，每种语言各导出一次，并保留 Item ID 列。CSV 会把结构扁平化：引用字段变成纯文本，多引用字段变成逗号分隔的文本，富文本变成 HTML。凡是涉及引用的内容，[Webflow Data API](https://developers.webflow.com/data/reference/cms/collection-items) 可以列出条目及其字段和语言版本，通常比把多个 CSV 文件重新拼接起来更干净。 3. **下载每个资源**。图片、PDF、你有授权可以自托管的字体、Open Graph 图片和网站图标（favicon）。在新网站不再指向 website-files.com 之前，不要关闭 Webflow 项目。 4. **把导出的代码当作参考**。如果你使用付费的 Workspace 方案，就导出 HTML 和 CSS。不要把它部署成新网站：它会带上 webflow.js、jQuery 和空的 CMS 列表。用它来查看精确的间距、断点和类名结构。 5. **在 Astro 中为内容建模**。把每个 Collection 转换为 Astro 的[内容集合](https://docs.astro.build/en/guides/content-collections/)或无头 CMS 模型，引用关系仍保持为引用，然后把每个模板重建为 Astro 组件，并把图片交给 [astro:assets](https://docs.astro.build/en/guides/images/) 处理。 6. **重做承载意义的交互**。大多数 Webflow Interactions 都可以改用 CSS 过渡、关键帧动画或几行 JavaScript 来实现。对于更复杂的动效，自 2025 年 4 月 Webflow 将 GSAP 免费开放以来，GSAP 已可免费用于商业用途（[Webflow](https://webflow.com/blog/gsap-becomes-free)）。无论采用哪种方式，都要遵循 prefers-reduced-motion 设置。 7. **替换表单、搜索和受保护页面**。为每个表单配置真正的端点（Cloudflare Worker、表单服务或你的 CRM）；如果网站需要搜索，就添加 [Pagefind](https://pagefind.app/) 这样的静态搜索索引；并把所有密码保护迁移到你的主机或应用中。 8. **认真重建本地化页面**。代码导出只包含主语言，因此要用 [Astro 的 i18n 路由](https://docs.astro.build/en/guides/internationalization/)构建每种语言，每种语言一个 URL，并在它们之间设置 hreflang。 9. **保持 URL 格式一致**。Webflow 提供的页面不带末尾斜杠，并会把 /pricing/ 重定向到 /pricing。请设置 Astro 的 trailingSlash 和 build.format，让新网站生成相同的地址（[Astro 配置参考](https://docs.astro.build/en/reference/configuration-reference/)）；每一处不一致，都意味着一个本不需要的重定向。 10. **在服务器端重定向，然后上线并持续观察**。未使用适配器的 Astro 静态构建，会把配置好的重定向变成 meta refresh 页面，因此要在网站的托管位置设置 1:1 的 301 重定向，例如使用 Cloudflare 的 \_redirects 文件。切换 DNS，在新网站验证无误之前保留 Webflow 项目，并在之后几周关注 Search Console 的索引编制报告。我们的[网站迁移 SEO 清单](https://dardo.studio/zh-Hans/blog/website-migration-seo-checklist/)涵盖了上线当天以及之后 90 天的工作。 ## 迁移之后有哪些变化 | 方面 | 使用 Webflow | 使用 Astro | | --- | ------------------------------ | --------------------------- | | 编辑 | 可视化 Designer 和 Webflow CMS 编辑器 | CMS 字段或代码，取决于你的选择 | | 托管 | Webflow 托管，按站点计费 | 任意静态主机或边缘平台，例如 Cloudflare | | CMS | Webflow Collections | 内容集合或无头 CMS | | 表单 | Webflow 的表单处理 | 你自己的端点和数据存储 | | 搜索 | Webflow 站内搜索（Premium 方案） | 静态索引或搜索服务 | | 本地化 | Webflow Localize 附加功能 | Astro i18n 路由，每种语言一个 URL | | 动效 | Webflow Interactions 和 GSAP | 由你掌控、可以衡量的 CSS 和 JavaScript | ## 保住 SEO Google 关于[涉及网址变更的网站迁移](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes)的指南同样适用于这里：把每个旧 URL 对应到最接近的新 URL，使用服务器端永久重定向，并至少保留一年。如果 URL 保持完全一致（对 Webflow 网站来说，细致的重建往往可以做到），你主要需要确认标题、描述、canonical 标签、结构化数据和 Open Graph 图片都已完整迁移。 Webflow 特有的陷阱是遗留的东西：仍从 website-files.com 加载的 Open Graph 图片或 PDF、仍被索引的 webflow.io 预发布地址，或者在迁移中 slug 发生了变化的 CMS 页面。关闭 Webflow 项目之前，请把这三项都检查一遍。 ## Dardo 如何执行 Webflow 迁移 我们把 Webflow 迁移作为[网站迁移](https://dardo.studio/zh-Hans/services/website-migration/)服务的一部分来执行：盘点 URL 和内容，导出 CMS，先重建一个有代表性的页面并在约定的宽度下审核，然后再完成其余的模板、表单和重定向。构建本身属于基于 Astro 的[网站开发](https://dardo.studio/zh-Hans/services/web-development/)，动效工作则属于[创意开发](https://dardo.studio/zh-Hans/services/creative-development/)。本网站 dardo.studio 使用 Astro 构建、运行在 Cloudflare Workers 上，内容存放在无头 CMS 中，我们也是通过这个 CMS 撰写和发布本博客的。 如果你正在考虑迁移，[把网站和你想改变的地方发给我们](https://dardo.studio/zh-Hans/contact/?service=website-migration)。在报价之前，我们会先告诉你离开 Webflow 是否值得。 ## 常见问题 **能把 Webflow 网站导出为 HTML 吗？** 可以，但需要付费的 Workspace 方案：Webflow 会导出 HTML、CSS、JavaScript 和图片，你可以把它们托管在任何地方，无需注明出处。仅有站点方案不包含代码导出，而且导出内容不包括 CMS 内容、表单处理、站内搜索、密码保护和次要语言版本。 **Webflow 的代码导出包含 CMS 内容吗？** 不包含。Collection 列表会显示空状态，Collection 页面也会丢失绑定到字段的内容。请在 CMS 面板中把每个 Collection 导出为 CSV，或通过 Webflow Data API 读取，它会把字段和语言版本保留在一起。 **从 Webflow 迁移到 Astro，会丢失 Google 排名吗？** 只要每个带来流量的 URL 都能继续访问，就不会。保持相同的路径（包括 Webflow 不带末尾斜杠的格式），为发生变化的地址添加永久 301 重定向，迁移标题、描述和结构化数据，并在上线后的几周内关注 Search Console。 **Webflow 的交互效果在 Astro 中还能用吗？** 不能直接使用。它们依赖 Webflow 的 JavaScript 运行，因此每个想保留的交互都要用 CSS 或一小段脚本重建。对于更复杂的动效，GSAP 自 2025 年 4 月起可免费用于商业用途。 **迁移之后，Webflow 表单会怎样？** 导出的表单不会把数据提交到任何地方，因为 Webflow 是在自己的托管服务上处理提交的。请把每个表单指向你自己的端点，例如 Cloudflare Worker、表单服务或你的 CRM，上线前测试能否正常送达，并单独从 Webflow 导出以往的提交记录。 **离开 Webflow 之后，团队还能不写代码就编辑网站吗？** 可以，前提是 Astro 网站使用无头 CMS。编辑人员在网页界面中工作，网站再根据这些内容重新构建。dardo.studio 就是这样运作的。 ## 资料来源与延伸阅读 本页内容的资料来源，并附有原出版方提供的更多详情。 - [Webflow 帮助中心：如何导出 Webflow 网站代码？](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code) · help.webflow.com - [Webflow 帮助中心：导入和导出 CMS Collection 内容](https://help.webflow.com/hc/en-us/articles/33961290794771-How-do-I-import-content-into-the-Webflow-CMS) · help.webflow.com - [Webflow 帮助中心：导入和导出 301 重定向](https://help.webflow.com/hc/en-us/articles/33961211526291-Import-export-301-redirects) · help.webflow.com - [Webflow 帮助中心：在 Webflow 中创建站点地图](https://help.webflow.com/hc/en-us/articles/33961355371667-Create-a-sitemap-in-Webflow) · help.webflow.com - [Webflow 价格](https://webflow.com/pricing) · webflow.com - [Webflow Data API：列出 Collection 条目](https://developers.webflow.com/data/reference/cms/collection-items) · developers.webflow.com - [Webflow：Webflow 让 GSAP 100% 免费](https://webflow.com/blog/gsap-becomes-free) · webflow.com - [Astro 文档：内容集合](https://docs.astro.build/en/guides/content-collections/) · docs.astro.build - [Astro 文档：图片](https://docs.astro.build/en/guides/images/) · docs.astro.build - [Astro 文档：国际化（i18n）路由](https://docs.astro.build/en/guides/internationalization/) · docs.astro.build - [Astro 文档：配置参考](https://docs.astro.build/en/reference/configuration-reference/) · docs.astro.build - [Pagefind：静态搜索](https://pagefind.app/) · pagefind.app - [Google 搜索中心：涉及网址变更的网站迁移](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) · developers.google.com [Nicolás Cerón](https://dardo.studio/zh-Hans/studio/) Nicolás Cerón是Dardo的创始人,Dardo是一家位于哥伦比亚波哥大的品牌、网页设计与开发工作室。 ## 相关文章 - [**Framer 迁移到 Astro：如何迁移 Framer 网站，同时保住设计和排名**Framer 不提供 HTML 导出，所以迁移到 Astro 只能重建。先采集什么、哪些会失效，以及如何保住设计、URL 和排名。](https://dardo.studio/zh-Hans/blog/framer-to-astro/) - [**网站迁移 SEO 清单：更换平台或域名，也不丢排名**排名下降，很少是新平台的错；真正的原因是曾带来流量的 URL 不再有响应。这份清单从 URL 盘点一直覆盖到第 90 天。](https://dardo.studio/zh-Hans/blog/website-migration-seo-checklist/) - [**WordPress 迁移到 Astro：如何迁移 WordPress 网站，无头方式或彻底迁出，同时保住排名**WordPress 迁移到 Astro 的两种方式：要导出什么，如何保住 Yoast 标题、固定链接和上传的图片，以及大多数迁移都会遗漏的 WordPress URL。](https://dardo.studio/zh-Hans/blog/wordpress-to-astro/) - [**WordPress 与定制网站怎么选？各自在什么情况下更划算**WordPress 与定制网站怎么选：何时选 WordPress，何时定制网站更划算，以及无头 WordPress 这条中间路线，从成本、速度、更新和所有权进行比较。](https://dardo.studio/zh-Hans/blog/wordpress-vs-custom-website/) ## 继续探索。 - [服务 · **网站迁移，不丢失 SEO**](https://dardo.studio/zh-Hans/services/website-migration/) - [你的项目 · **开始沟通**](https://dardo.studio/zh-Hans/contact/)