在网站之间复制和插入

在站点之间复制和粘贴以重复使用元素、布局、样式、交互和其他内容 - 并更快地构建站点。
在网站之间复制和插入使您能够回收组件、布局、设计、功能和其他内容,从而节省您的时间并确保跨网站的一致性。

在此教学课程中,您将掌握:

  1. 网站间复制和插入的方法
  2. 防止类名和样式冲突的策略
  3. 避免交互名称和操作冲突的方法
  4. 如何处理例外和特殊情况

网站间复制插入的方法

您可以复制任何网站中的任何元素或元素组并将其插入另一个网站。所有底层元素、设计、资源、配置和功能均会保留。

要利用不同网站中的元素和模块:

  1. 在设计器中访问初始站点(您希望复制的站点)
  2. 使用以下方式复制元素 命令 + C (Mac)或 控制 + C (视窗)
  3. 访问设计器中的第二个网站并选择您要插入的元素
  4. 插入到你的元素中 命令 + (Mac)或 控制 + (视窗)

您还可以选择使用以下方法逆转插入过程: 命令 + (Mac)或 控制 + (视窗)。

至关重要的:无法从只读模式下的网站进行复制。 

解决问题

如果遇到消息“无法读取本地剪贴板数据”或“剪贴板为空”,请验证:

  • 您正在设计器中从实时站点复制元素,而不是从只读模式复制元素。
  • 您没有设置可以覆盖设备上默认复制/粘贴功能的系统偏好设置。具体来说, 命令 + C命令 + (Mac)或 Control + CControl + V (Windows) 保留其默认功能,不会因自定义快捷方式而改变。如果为这些快捷方式分配了自定义功能,请确保在网站之间复制和插入时删除它们。
Mac 系统偏好设置中的键盘设置。

防止类名和样式冲突的方法

如果目标站点与源站点中存在相似的类从而导致冲突,则有几种策略可以解决此问题。

相同的类名,不同的样式

在源网站和目标网站中的类共享相同名称但具有不同样式的情况下,Webflow 将通过附加数字来更改插入元素的类名(例如“classname 1”,“classname 2”等)。

设计器中的警告内容为:“将‘内容包装器’类重命名为‘内容包装器 2’,以避免冲突。” 

相同的类名,相同的样式

如果两个网站中存在名称匹配的类(不考虑附加的数字,例如“类名”、“类名 2”、“类名 3”等)且样式相同,则 Webflow 会将插入的类与目标网站中的现有类合并。这样可以减少目标网站中重复样式的数量。

例如,假设您要将站点 A 中类为“按钮”的按钮插入到站点 B。站点 B 有一个名为“按钮 3”的类,它是站点 A 中“按钮”的镜像。Webflow 将识别相同的类,并将站点 B 的“按钮 3”类应用于插入的按钮。

风格冲突

插入另一个元素可能会影响复制元素的样式,因为继承自插入其中的父元素(例如,上级元素)。 

如果复制的元素先前位于使用文本对齐方式居中的元素内(例如,居中对齐文本),但接收元素具有子元素右对齐的对比样式,则粘贴的元素在插入时将右对齐。

防止交互名称和操作冲突的方法

Webflow 致力于融合相同的互动,但可能会出现复杂性。以下是有关我们如何处理互动冲突的详细分析。

元素激活

交互面板的上部允许添加元素激活,在与元素交互时启动动画 - 例如悬停或单击。

一旦连接到重复元素,这些激活就会集成到您粘贴内容的站点中。

元素在 Webflow 设计器的交互面板中触发。

名称相同,行动迥然不同

如果目标网站中存在相同的交互 姓名 和你粘贴的一样,但不同 行动,粘贴的交互名称后将添加数字后缀,以表示重复(例如“交互名称 2”、“交互名称 3”等)。

相同的名字,相同的动作

与类名冲突解决类似,如果目标站点中的交互共享相同的 姓名 与粘贴的内容一致,忽略任何附加的数字(例如,“交互”、“交互 2”、“交互 3”等),并且完全相同 行动,我们就会将它们识别为相同的,并将粘贴的交互与目标中现有的交互相结合。

页面触发器

您可以在交互面板的下部添加页面触发器,当页面状态改变时(例如页面加载时)启动动画。

与元素触发器不同,将元素粘贴到网站时不包含页面触发器。

特殊情况和边界场景

在特定情况下,某些设置或复制的内容可能无法传输到目标站点。

个性化字体

如果复制粘贴了个性化字体的文本元素,则在新网站中未设置原始字体的情况下,文本元素将使用默认字体。

如果您希望保留自定义字体,请确保在粘贴元素之前将其添加到新网站。了解有关导入自定义字体的更多信息。

站点设置的“字体”选项卡中的“自定义字体”部分允许您将自定义字体上传到您的网站。

来自外部内容编辑器的内容

第三方内容编辑器(例如 Microsoft Word、Google Docs 等)在复制到 Webflow CMS 内的富文本字段时可能会损坏内容,需要手动重新格式化。

Google Docs 为 CMS 中的富文本字段提供了更清晰的粘贴选项,无需额外格式化,确保各种内容元素的正确标记。

链接的连接设置

从另一个网站粘贴元素将重置指向网站内特定页面或部分的链接设置,除非同时粘贴这些部分。

表单通知配置

复制的表单元素将继承目标网站的表单通知设置。有关更多详细信息,请参阅表单通知设置。

站点设置的“表单”选项卡允许您设置表单通知设置,如收件人电子邮件地址、主题行和回复地址。

地图 API 身份验证

要将地图元素从一个站点合并到另一个站点,必须在目标中添加 Google Maps API 密钥。其他设置将自动从源站点传输到新站点。

站点设置中集成选项卡的 Google 地图部分允许您输入 Google 地图 API 密钥。

继承的文本格式

复制的文本元素将照常从其父元素继承格式。因此,如果复制的元素缺少在新网站中父级设置的特定样式,则这些样式将应用于粘贴的元素。

基础 HTML 标签

当副本粘贴到新网站时,与源网站元素的基本 HTML 标签相关的样式(例如应用于“所有 H1 标题”或“所有段落”的样式)将被排除。

与 CMS 数据的连接

粘贴整个收藏夹列表只会生成一个空的收藏夹列表元素,因为收藏夹数据不会转移到新站点。 

但是,这里有一个实用的解决方案,可以重复使用您构建的 Collection 项的布局: 

  1. 整合 分区块 进入 收藏品
  2. 组织所有元素 收藏品 在下面 分区块
  3. 复制并粘贴容器 分区块 访问新网站

粘贴的元素不会链接到任何 CMS 数据(例如,H1 将转换为普通的“标题”),但您的所有类都将被复制并可在整个新网站中重复使用。也可利用此技术在 Collection 页面上重复使用布局。

建筑模块

在原始网站中保存为构建块的元素不会在目标网站中保持该状态。要将它们重新设置为构建块,请在设计板上选择元素,然后按 命令 + 转移 + A (在 Mac 上)或 控制 + 转移 + A (在 Windows 上)。

颜色定义

当粘贴在源站点中将颜色指定为变量的类时,该颜色将不会被识别为目标站点中的变量。

专家提示: 嵌入类后,如果您打算在多个元素中使用该类,请确保将颜色定义为变量。了解有关颜色变量的更多信息。

重要的: 如果原始网站被删除,那么从原始网站复制/粘贴的引用资产 URL(图像、视频、documents 等)的元素将无法访问。

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