回到所有的课程
课程库

代码出口

导出Webflow项目的HTML、CSS、Assets和Javascript。

注意:我们正在向工作区过渡,并且正在更新我们的内容。访问Workspaces博客文章阅读更多关于这些更新和变化,或访问我们的更新了代码导出的课程.你也可以学习如何检查您的帐户是否在工作区上
本视频采用了旧的用户界面。更新版本即将到来!

账户支付计划,您可以从Webflow Designer内部导出项目的HTML、CSS、资产和JavaScript。您可以这样做来备份您的代码,并在客户要求时提供给他们。您可以使用导出的代码将其托管在您想要的任何地方。不需要归因。

在这节课中
  1. 出口代码
  2. 导出简化HTML
  3. 了解导出的文件包含什么内容
  4. 常见问题

出口代码

  1. 在设计器中打开项目
  2. 单击出口按钮在右上角
  3. 点击准备邮政
  4. 下载ZIP文件

导出简化HTML

缩小HTML可以通过删除空白、注释和其他浏览器不需要加载页面的代码元素来帮助提高页面加载时间。导出迷你HTML:

  1. 单击出口按钮
  2. 新闻控制+ O在你的键盘
  3. 检查贬低HTML复选框出现在导出窗口中
在Webflow设计器的顶部突出显示了“export”按钮。
“最小化HTML”在Webflow设计器的导出代码模式中被选中并突出显示。

了解导出的文件包含什么内容

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

  1. 一个CSS文件夹所有项目样式都包含在3中. css文件:
  • 一个CSS文件它包含网站的所有自定义样式
  • Webflow.css它包含Webflow布局系统的常见基本样式,以及所有组件,如导航条、滑块和标签
  • Normalize.css这使得浏览器呈现所有元素更加一致,并且符合现代标准。它只针对需要规范化的样式。
  1. JS文件夹这包含了Webflow.js文件。此文件包含使页面的交互元素正常工作所需的所有JavaScript。表单、导航条、滑块、标签和交互都依赖于webflow.js。如果您删除这个文件,您的页面可能会没错,但它不会像预期的那样工作。
  2. 一个图片文件夹与所有的图像上传在您的项目的资产管理器
  3. . html文件您网站的所有页面(包括没有内容的集合模板页面)
如果您想查看Webflow导出的代码示例,请检查的源代码(右键单击→查看页面源代码)我们的主页-它都是内置在Webflow!

常见问题

为什么我不能打开导出的文件?

由于Safari的URL支持有一个已知的限制,您需要添加“.zip”文件名扩展名来提取导出文件夹的内容。

为什么在类名前有一个“w-”前缀?

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

我是否可以选择只导出站点代码的一部分?

目前,您无法选择导出的内容。项目的每个可导出部分都将包含在每个导出中。

我可以编辑代码后,我导出它?

您可以在导出后编辑代码。但是,手动更改导出的文件可能会破坏一些Webflow组件。

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

如果您想从导出的页面中删除.html扩展名,可以使用htaccess文件(↗)

如果我在外部托管,我是否需要提供webflow的属性?

导出之后,您不需要提供Webflow属性,也不需要为导出的站点维护Webflow计划,以便在您自己的服务器上运行。

导出的代码是否包括我的CMS和电子商务内容?

CMS和Ecommerce内容(数据库)不导出。集合列表将显示为空状态。集合页面也不会显示绑定到集合字段的任何内容。

导出代码后,受密码保护的页面是否仍然受保护?

不。任何密码保护页面在您的网站将不“保护”后,代码导出。你的网站必须是主持与Webflow为了使密码保护能够正常工作。阅读更多关于项目和页面密码

如果我在其他地方托管代码,所有元素在我的网站上的功能吗?

网站搜索而且形式(包括文件上传而且reCAPTCHA)不能在导出站点上工作。如果您打算导出站点,您需要其中任何一个将表单数据从Webflow发送出去或嵌入第三方小部件电子商务元素也不能正常工作。

尝试Webflow——它是免费的
Baidu
map