如何在Weebly中插入原始HTML、CSS 和 JS

如何在Weebly中插入原始HTML、CSS 和 JS

Weebly 的拖放编辑器是我们在网站建设领域见过的最简单、最生动的编辑器之一。 对于普通用户而言,真正的优势是无需查看预览即可在编辑器中查看更改。 在很多情况下,您可能需要在 Weebly 网站上插入原始代码。 特别是当你在运行一个教程网站或者你是一个开发者时,你需要在网站上展示 HTML、CSS 和 JavaScript 代码。 如果您处于这种情况,请查看这篇文章,了解如何使用多个选项在 Weebly 编辑器中插入原始代码。

推荐:如何在 Weebly 中自定义主题

让我们举个例子

有四种方法可以在您的网站上插入原始小部件代码。 在进一步讨论之前,让我们以示例代码为例。 下面是用于创建表格的简单 HTML 代码:

<html>
<head><title>This is my HTML table.</title></head>
<body>
<table border=1>
<tr><td>Cell 1</td>
<td>Cell 2</td></tr>
<tr><td>Cell 3</td>
<td>Cell 4</td></tr>
</table>
</body>
</html>

当您将此代码粘贴到嵌入代码元素中时,它将被转换为如下表:

那么您应该如何按原样显示代码呢?

1. 粘贴为文本元素

最简单的方法是将代码复制并粘贴到文本元素中。 Weebly 文本元素会将代码也视为文本并按原样显示。

作为文本插入的原始代码
作为文本插入的原始代码

但是问题很明显,它看起来不像代码,您应该使用字体颜色或背景将代码与常规文本区分开来。

注意 在 Weebly 中嵌入代码元素对于插入自定义 HTML 小部件很有用。 它转换代码并显示代码的结果而不是原始代码。 这是预览在编辑器中可能无法正常工作的例外情况之一。

2.使用色块应用程序

颜色块应用程序可帮助您为任何 Weebly 元素添加背景颜色。 转到“应用程序”选项卡,搜索并将您的网站连接到色块应用程序。

Weebly 色块应用程序
Weebly 色块应用程序

您可以在颜色块元素中插入带有代码的文本元素。 可以调整背景颜色、边距和填充,以使您的代码看起来更好。

使用代码块和文本元素插入的原始代码
使用代码块和文本元素插入的原始代码

有关的: 如何在 WordPress 网站中插入原始 HTML、CSS 和 JS 代码?

3. 使用 Weebly 代码块应用程序

Weebly 通过他们的应用中心提供了一个代码块元素。 转到“应用程序”选项卡,然后单击“由 Weebly 制造”块。 将代码块应用程序连接到您的站点。

Weebly 代码块应用程序
Weebly 代码块应用程序

这个应用程序将允许您以正式的方式添加代码并支持 120 多种语言。 您可以添加带有或不带有标题的代码,以及深色或浅色样式。 它将以不同的颜色突出显示代码语法,使其美观和专业。

带有浅色样式和标题的 Weebly 代码块
带有浅色样式和标题的 Weebly 代码块

这是一个默认的 Weebly 应用程序,由 Weebly 开发。 话虽如此 – 它有自己的错误尚未解决。 尽管您可能在已发布的页面上看不到任何问题,但您可以在开发人员控制台中看到如下错误。

浏览器上的 Weebly 代码块应用程序控制台错误
浏览器上的 Weebly 代码块应用程序控制台错误

看起来 Weebly 的家伙没有时间调查此类问题,因为您可以在应用程序评论部分看到客户的反馈。

4. 使用第三方嵌入

有许多第三方网站允许您在页面上嵌入完整的项目代码以及结果。 我们喜欢 codepen.io,因为它很简单。 这里的优点是您可以使用代码和结果嵌入任何您喜欢的小部件。 代码部分有助于独立展示 HTML、CSS 和 JS,有助于用户轻松理解代码。

概括

如您所见,在 Weebly 中插入原始代码就像添加文本内容一样简单,并且您有多种选择。 但是,选择取决于您希望在站点上使用原始代码的规模。 在少数情况下,我们建议使用 Weebly Code Block 应用程序,尽管它存在控制台错误。 如果您想在多个页面上显示代码,则可以使用 Codepen 或 JSFiddle 等第三方解决方案。

推荐:Woocommerce自定义产品插件Woocommerce Custom Product Addons


发表评论