Webflow 作为无代码开发平台被广泛推销,这被视为其最大优势。 但是,这并不意味着您不能在设计中添加代码。
虽然 Webflow 提供了广泛的设计选项,但您可能希望进一步自定义您的网站。 这就是自定义代码发挥作用的地方,因为添加它们可以实现更多功能。
继续阅读以了解如何在 Webflow 中添加自定义代码。
添加自定义代码的限制
在学习如何在 Webflow 中添加自定义代码之前,了解一些基本规则很重要。
请记住,自定义代码是高级修改。 因此,它们可能会与 Webflow 的功能发生冲突,从而导致您的网站出现意外行为。 因此,无法保证每个自定义代码都完全兼容或正常运行。
一般来说,Webflow 支持以下类型的代码:
- HTML
- CSS
- JavaScript
添加自定义 JavaScript 代码可以为您的网站添加许多功能。 出于这个原因,Webflow 还配备了一个更简单的 JavaScript 版本,称为 jQuery。 您可以将它与 JavaScript 一起使用,以简化编写过程。
导入 jQuery 时,必须注意其版本。 该版本应与当前导入的 Webflow 版本相匹配,以避免冲突和意外行为。 此外,影响 DOM 事件的 onClick 和 onHover 等脚本也可能导致您的网站出现意外行为。
集成自定义代码时,您不能使用任何服务器端语言,包括:
- Perl
- Python
- PHP
- 红宝石
另一个需要考虑的关键方面是自定义代码的长度。 Webflow 施加了以下字符限制:
- 10,000 个字符用于嵌入元素
- 10,000 个字符的代码约一页
- 关于整个网站的代码 20,000 个字符
如果您要嵌入的代码超出了这些字符限制,则无法直接嵌入。 但是,您可以将代码存储在另一台服务器上,然后在您的代码中引用该脚本。 或者,您可以使用第三方工具来缩小您的自定义代码。
大多数自定义代码不会影响设计器模式中的元素,以避免任何意外行为。 因此,您只有在发布网站后才能看到结果。
不幸的是,如果您的自定义代码不起作用,Webflow 支持团队将不会提供太多帮助,因为自定义编码超出了他们的范围 客户支持政策. 尝试仔细检查您的代码并访问 网流论坛 如果需要,请寻求更多帮助。
Webflow 如何添加自定义代码
自定义代码使您能够根据您的特定需求定制您的网站。 Webflow 确保适应一系列场景,允许用户仅将自定义代码添加到整个站点或单个页面。 此外,您还可以自定义特定的帖子。 最好的部分是,您只需单击几下即可添加自定义代码,而不管位置如何。
如何将自定义代码添加到整个网站
如果您的自定义代码需要应用于您网站上的每个页面,“网站设置”就是您的理想之选。 在那里添加自定义代码将确保您网站所有元素的无缝体验。
关于整个网站的代码可以放在页眉或页脚代码部分。 要在 Head 代码部分添加自定义代码,请执行以下操作:
- 打开“网站设置”。
- 导航到“自定义代码”选项卡。
- 将自定义代码添加到“Head Code”字段。
- 按“保存更改”。
此部分允许您使用自定义样式、链接到外部资源和添加元数据。
如果您想将自定义代码添加到页脚代码部分,请再次转到“自定义代码”选项卡,然后按照以下步骤操作:
- 将自定义代码添加到“页脚代码”字段。
- 点击“保存更改”。
如何将自定义代码添加到单个页面
有时您可能只想自定义网站上的一个或几个特定页面。 Webflow 使这个过程相当简单。 添加代码后,它将跟随您网站标记中的任何站点范围的代码。
将自定义代码添加到单个页面时,您可以选择放置它的位置。
您应该始终将 HTML 和 CSS 代码放在
标记内。 但是,JavaScript 代码应该放在 标记部分,在 标记之前。 通常,这将提高网站的性能,因为添加到 标记部分的- 在“自定义代码”选项卡下找到“在 标记之前”部分。
- 将自定义代码添加到该部分。
- 点击“保存更改”。
如何将自定义代码添加到单个帖子
假设您不需要自定义整个网站或页面。 在这种情况下,您可以将自定义代码添加到您想要修饰的特定帖子中。 对于单个帖子,嵌入是游戏的名称。
您可以将自定义代码嵌入网站设计或富文本元素的任何位置。 除了自定义代码外,此选项还非常适合嵌入第三方元素,例如实时聊天应用程序、Google 文档和社交媒体源。
向富文本元素添加代码时,第一步是转到您要自定义的集合项。
- 打开“编辑器”。
- 点击“收藏选项卡”。
- 选择“带有富文本的集合”。
- 选择您想要的收藏项目。
接下来,您需要打开富文本字段。 您可以将多种内容选项添加到富文本字段中。 您可以选择给定选项之一或输入文本。
要添加自定义代码,您需要显示可用选项。 您可以通过单击空白字段中的任意位置来执行此操作。 从那里,执行以下操作:
- 点击“加号”图标。
- 选择“自定义代码”选项。
- 将您的代码粘贴到“HTML 嵌入代码编辑器”弹出窗口中。
- 单击窗口左下角的“保存并关闭”。
如果您想直接在您的网站设计中添加自定义代码,请执行以下操作:
- 复制您要嵌入的自定义代码。
- 转到“添加面板”选项。
- 选择“嵌入元素”选项。
- 将您的自定义代码粘贴到 Webflow 画布上的嵌入元素中。
- 点击“保存并关闭”。
编写自定义代码时,不应包含
、 或 标签。 否则,您的网站将崩溃。 但是,如果有的话,不要忘记包括开始和结束标签。轻松编码
在使用 Webflow 时,您无需成为经验丰富的 Web 开发人员即可使用自定义代码。 如果您不确定如何编写代码,通常可以在 Google 快速搜索中找到适合您需求的代码。 之后,只需按照我们的指南在您想要的任何地方实现代码。 结果将是您梦想中的定制网站。
您是否尝试过将自定义代码添加到 Webflow 站点? 您想自定义哪个元素? 在下面的评论部分让我们知道。