数据提取

导出您的 Webflow 站点的 HTML、CSS、JavaScript 和资产。

使用时 付费工作区计划,您可以选择直接从 Webflow Designer 中提取网站的 HTML、CSS、JavaScript 和资源。这对于创建代码备份或根据要求将其提供给客户非常有用。您还可以利用提取的代码在任何所需平台上托管,而无需归属。 

本教程将涵盖以下领域:

  1. 提取代码的方法
  2. 提取缩小的 HTML 的过程
  3. 解压文件的内容
  4. 从提取的文件中排除
  5. 常见问题和故障排除技巧

提取代码的方法

  1. 启动您的网站的设计器
  2. 选择 出口 选项 
  3. 点击 准备 ZIP 
  4. 继续下载 ZIP 文件

笔记: 提取的代码中不包含来自 CMS、用户帐户和电子商务(数据库)的内容以及逻辑流。集合列表将显示为空状态,并且集合页面将缺少附加到集合字段的内容。提取邮政编码后,页面的密码保护将失效。此外,为了遵守 GDPR 法规,站点搜索功能和表单(包括文件上传和 reCAPTCHA)将停止在导出的站点上运行。请参阅导出站点上表单提交的其他指南。

提取最小化 HTML 的方法

通过压缩优化 HTML 可以消除不必要的空格、注释以及浏览器渲染时不需要的其他非必要代码元素,从而提高页面加载速度。要提取压缩后的 HTML,请执行以下操作:

  1. 点击 出口 位于设计器顶部的按钮
  2. Control + O 在你的键盘上
  3. 勾选 最小化 HTML 出现在导出窗口中
  4. 点击 准备 ZIP 
  5. 保存 ZIP 文件

解压文件的内容

下载的 ZIP 文件将包含您网站的所有页面、样式、脚本和图像:

  1. CSS 目录 包含您网站的所有样式,共 3 个 .css 文件:
  • CSS 文件 (例如,your-site-name.css)包含所有自定义样式
  • webflow.css 其中包括 Webflow 布局系统的基本样式以及导航栏、滑块和选项卡等各种组件
  • 规范化.css 确保浏览器以一致的方式呈现元素并符合现代标准。它特别关注需要规范化的样式。
  1. JS 目录 住房 Webflow.js 文件。此文件包含必要的 JavaScript,可启用页面上的交互元素。表单、导航栏、滑块、选项卡和交互等元素都依赖于 webflow.js。 删除此文件可能会导致您的页面出现正确但功能不正常。
  2. 图像目录 包含您网站资产管理器中上传的图片
  3. .html 文件 针对所有网站页面(包括没有内容的 Collection 模板页面)

笔记: 提取的代码中不包含来自 CMS、用户帐户和电子商务(数据库)的内容以及逻辑流。集合列表将显示为空状态,并且集合页面将缺少附加到集合字段的内容。提取邮政编码后,页面的密码保护将失效。此外,为了遵守 GDPR 法规,站点搜索功能和表单(包括文件上传和 reCAPTCHA)将停止在导出的站点上运行。请参阅导出站点上表单提交的其他指南。

深刻见解: 要了解 Webflow 导出的代码,请查看 我们的主页 右键单击并选择查看页面源代码。一切都是使用 Webflow 制作的!

从提取的文件中排除

下列功能和内容将从提取的代码中排除,并且不会在导出的网站上按预期运行: 

  • CMS 内容和功能(包括收藏项和列表)
  • 用户帐户内容和功能(包括用户和访问组)
  • 电子商务内容和功能(包括产品和结账)
  • 网站或页面密码保护
  • 表单提交处理 
  • 现有的表单提交(可以单独导出)
  • 表单中存在的 reCAPTCHA 元素
  • 网站搜索
  • 逻辑流程
请注意: 内容管理系统, 用户帐户如果您希望保留收藏品、用户帐户和产品的备份,则可以将电子商务收藏品单独导出为 CSV 格式。了解有关 CSV 导出的更多信息。

常见问题解答和疑难解答提示

类名中“w-”前缀的原理是什么?

为了避免与其他代码框架冲突,Webflow 在特定于组件的类中添加了“w-”前缀。 

我可以有选择地导出我的网站代码的部分内容吗?

目前,没有选择导出特定部分的选项。每次提取都将包含您网站的所有可导出部分。 

导出后修改代码是否可行?

导出后,您可以自由更改代码。不过,对导出文件进行手动调整可能会破坏某些 Webflow 组件。 

我可以从导出的页面的 URL 中删除 .html 扩展名吗?

要从导出的页面中删除 .html 扩展名,您可以使用 .htaccess 文件

如果我将我的网站托管在外部,是否必须将信用额度设为 Webflow?

导出后,您的导出网站无需任何属性或 Webflow 计划要求即可在外部服务器上运行。 

提取的代码是否包含我的 CMS、会员资格和电子商务内容?

CMS、用户帐户和电子商务内容(数据库)不属于提取的代码。收藏列表将显示为空状态,并且收藏页面将缺少与收藏字段绑定的内容。 

代码提取后,受密码保护的页面是否仍然安全?

否。您网站上受密码保护的页面将失去保护邮政编码导出。要使密码保护正常运行,您的网站必须托管在 Webflow 上。请参阅有关项目和页面密码的详细信息。 

如果我将代码托管在其他地方,所有网站元素是否都可以正常工作?

CMS、用户帐户、电子商务内容(数据库)和功能以及逻辑流程不包含在提取的代码中。这些功能需要托管才能正常运行。在导出的网站上,收藏夹列表将显示为空状态,并且收藏夹页面将缺少与收藏夹字段绑定的内容。网站上任何受密码保护的页面在提取代码后都将失去保护。 

此外,为了遵守 GDPR,网站搜索功能和表单(包括文件上传和 reCAPTCHA)在导出的网站上将无法使用。要收集表单提交,请考虑使用第三方工具或嵌入第三方表单集成。请参阅在导出的网站上收集表单提交的指南。

为什么我导出我的网站后,我的 Lottie 动画无法在本地运行?

出于安全协议考虑,Lottie JSON 文件不会从本地文件系统加载;因此,当本地访问网站时,Lottie 动画不会显示。Web 服务器对于动画按预期运行至关重要。

麦宜云
Ewan Mak 的最新帖子 (查看全部)