如何在Weebly中使用嵌入代码元素

如何在Weebly中使用嵌入代码元素

“嵌入代码”是 Weebly 站点编辑器中归类为“基本”类别的重要元素之一。 它用于嵌入任何 HTML、CSS 或 JavaScript 代码,以向您的网站添加其他功能,例如新闻订阅、号召性用语、自定义按钮等。使用嵌入代码元素的方法有多种,所有 Weebly建站 用户都必须了解使网站加载速度快。

推荐:如何修复Windows We’ll Need Your Current Windows Password错误

功能组件

添加新功能或修改现有功能需要三个组件:

一些小部件可能只有 HTML 代码,而其他功能可能需要复杂的 CSS 和 JavaScript。 由于 Weebly 使用所见即所得的站点编辑器,您可以在编辑器上看到嵌入的 HTML/CSS 代码的结果,而无需发布站点。

使用独立的嵌入代码元素

具有简单 HTML 和 CSS 代码的较小小部件可以使用嵌入代码元素直接插入到页面上。 这通常被称为内联样式,结果可以立即在站点编辑器上看到,而无需发布站点。 例如,当您在嵌入代码元素中添加 HTML 表格代码时,可以立即看到输出。

当您有脚本和较大的 CSS 代码时,不建议使用独立的嵌入代码元素。

页面级功能

在嵌入代码元素中粘贴大量代码将大大降低页面加载速度。 此外,由于代码的所有部分都放置在 HTML 页面的正文中,因此该功能可能无法按预期工作。 强烈建议按以下方式放置代码:

    • 使用嵌入代码元素的页面主体内的 HTML 代码
  • 使用页面的“标题代码”部分将 CSS 插入页面标题
  • 使用页面的“页脚代码”部分关闭正文之前的脚本

大多数情况下,您只会在特定页面上添加一个小部件,但具有巨大的 CSS 和脚本。 在这种情况下,将代码分离为 HTML、CSS 和 JavaScript,并将代码分别粘贴到嵌入代码元素、页眉代码段和页脚代码段中。

Weebly 站点编辑器可能无法执行粘贴在屏幕上页眉和页脚代码部分的代码。 您需要发布页面才能看到代码的结果。

 

 

 

站点级功能

与页面级功能类似,有时您可能需要添加在站点级别有效的功能。 例如,您想在网站的不同页面上添加自定义按钮。 在这种情况下,需要使用嵌入代码元素将所需的 HTML 部分嵌入到不同的页面中。 可以通过以下方式添加常用的 CSS 和脚本:

    • 将 CSS 和脚本分别粘贴到站点设置的页眉和页脚代码部分下。
  • 将 CSS 粘贴到“main_style.css”文件中或上传 CSS 文件并将它们链接到站点设置的标题代码部分下。
  • 上传脚本文件并将它们链接到站点设置的页脚代码部分。

Weebly 站点编辑器将在屏幕上执行粘贴在“main_style.css”文件中的代码,但上传的脚本不会在编辑器上运行。 您需要发布页面才能看到代码的结果。

 

 

 

完整的页面结构

为了快速加载,页面结构应该如下所示,因此将上述代码嵌入到适当的位置。

<html>
<head>
Linked external CSS under header code section uploaded in code editor
Embed CSS within <style>…</style> tags
</head>
<body>
.
.
.
Embed HTML code using embed code element.
.
.
.
Linked external scripts under footer code section uploaded in code editor
Embed scripts using <script>…</script> tags.
</body>
</html>

嵌入代码元素的自定义选项

单击嵌入代码元素将只显示一个定位选项,如下所示。

Weebly 嵌入代码元素

Weebly 嵌入代码元素

基本上,您不需要在小部件中使用单独的代码进行对齐。 使用定位选项将小部件左、中或右对齐。

使用嵌入代码元素之前要记住的要点

尽管嵌入代码元素提供了无限的机会,但在您的 Weebly 网站上大量使用它存在一定的风险。

    • 有时它可能会影响其他默认的 Weebly 功能。 通常 jQuery 脚本可能会与 Weebly 上的其他默认脚本发生冲突。
  • 由于故障排除范围广泛,Weebly 支持无法解决由嵌入在您网站上的自定义代码引起的问题。
  • 您网站上的每条嵌入代码都会直接影响页面加载速度。 这反过来会影响搜索引擎排名和用户体验。

因此,使用嵌入代码元素需要您自担风险,即使您是商业计划用户,也无需期待 Weebly 的任何支持。

“嵌入代码”元素以前称为“自定义 HTML”元素。

推荐:材料设计WordPress主题Zephyr


发表评论