如何在Weebly网站中添加JavaScript?

如何在Weebly网站中添加JavaScript

脚本通常用于提供自定义的用户触发事件和 Weebly 中任何主题的不可避免的部分。 尽管您可能不会使用脚本来添加任何附加功能,但 Weebly 网站默认会包含许多脚本。 右键单击您的 Weebly 站点并查看页面源代码以查看您的站点中有多少脚本。

在 Weebly 网站中发现的查询

Weebly 网站中发现的查询

此外,您可能还想在您的 Weebly 网站上添加脚本以添加其他功能,例如滚动到顶部。 在本文中,我们将讨论在 Weebly 站点中添加脚本的各种方法。

在 Weebly 中添加脚本的不同方法

无论是 Weebly 还是任何其他网站构建器,都可以根据需要和使用情况通过三种不同的方式添加脚本:

  1. 链接外部脚本文件——在站点级别有效
  2. 在页面的页眉或页脚中添加 – 在页面级别有效
  3. 嵌入页面内容——在元素级​​别有效

在 Weebly 中链接外部脚本文件

让我们举一个在 Weebly 网站上添加滚动到顶部功能的示例。 为了添加此功能,我们需要在站点级别集中链接一个脚本文件。 您可以在“设计 > 编辑 HTML/CSS > 资产”下上传所需的 .js 文件。 单击 + 图标,然后选择“上传文件…”并上传脚本文件。

在 Weebly 中上传脚本

在 Weebly 中上传脚本

上传文件后,下一步是使用以下代码在“设置 > SEO > 页脚代码”部分下的站点级别链接文件:

<script type="text/javascript" src="https://yoursitename.weebly.com/files/theme/scroll-to-top.js"></script>

现在发布您的网站并查看该功能(在本例中为滚动到顶部)在所有页面上都有效。

上传脚本文件被视为 Weebly 中的主题修改,因此您需要使用新名称保存主题。 这里重要的一点是,当您更改主题时,上传文件将在新站点上丢失,尽管页面级脚本链接仍然可用。 因此,请确保在更改主题时将所有自定义脚本上传到您的新主题。

在页面级别添加脚本

上述方法可以在站点级别使用脚本文件,该脚本文件适用于滚动到顶部等功能。 让我们再举一个例子,将跟踪代码添加到您的 Weebly 网站上的特定页面(例如产品页面)。 虽然这也可以以与上述类似的方式完成,但更有效的方法是在页面级别添加代码而不修改主题。 因此,即使更改了主题,脚本也会有效。

将代码粘贴到“页面 > 选择页面 > 高级设置 > 页脚代码”下并发布您的网站。 页面级别设置的页脚/页眉部分中使用的任何脚本将仅属于您网站的该页面。 您可以右键单击已发布的页面并查看页面源代码,以确保添加的脚本是代码的一部分。

尽管建议在页脚部分添加脚本文件,但某些脚本可能无法正常运行,您可以尝试在页眉级别使用,以使脚本按预期工作。

在元素级别嵌入脚本

有时您可能需要在特定元素上应用 only。 在这种情况下,使用“嵌入代码”元素将脚本与 HTML / CSS 代码一起粘贴。

冲突的脚本

除了实际功能之外,网站上的一个脚本还可能与其他脚本发生冲突。 这可以用 jQuery 脚本很好地解释,其中 Weebly 默认使用 Google 库来使用最新版本的脚本,并且特定功能所需的不同版本可能会导致冲突。 当您发现脚本未按预期运行时,请检查页面源以查找该页面中使用的脚本列表并查找它们之间可能存在的冲突。

在页面或元素级别使用时,请确保在 < script >…. 标签中使用脚本。

作为 .js 文件的站点级脚本不应在文件中包含标签。


发表评论