零基础小白保姆级LiveCanvas外贸建站指南

Allenon 4 months ago

LiveCanvas 是一个 WordPress 插件，它能让你用现成的 Bootstrap 5 模块快速搭建网页，而且直接保存纯 HTML 代码，让你完全掌控网页结构。

您还可以定义并重用自己的自定义 HTML 块——使用一些独特的 HTML5 属性使文本区域可编辑。

它作为一个方便的、零配置的 WordPress 插件出现，具有极小的占用空间。不添加任何冗余——LC 插件不添加任何 JS 或 CSS。

最重要的是，您的网站将达到一种感觉就像您安装了缓存插件的速度——但实际上您并没有安装。

安装 LiveCanvas

听到要装主题、装插件的，你可能有点犯怵，怕太复杂。其实，LiveCanvas 的安装过程还是挺标准的 WordPress 操作。

安装 LiveCanvas 包括下载并安装推荐的 Picostrap 主题，然后下载并安装 LiveCanvas 插件，最后激活许可证。

具体步骤其实不难。你得先去下载 Picostrap 主题，然后在 WordPress 后台的“外观”->“主题”里上传安装它 。就像你平时装其他 WordPress 主题一样。安装picostrap5 Theme 和 picostrap5 blank child theme，激活picostrap5 blank child theme。

主题装好激活了，再去会员区下载 LiveCanvas 插件的 .zip 包。然后到“插件”->“添加新插件”，上传这个 LiveCanvas 的压缩包安装激活。

最后一步是激活许可证。插件更新对于享受新功能、最大稳定性和安全性非常重要。要启用自动插件更新，需要有效的许可证代码。请从会员区获取，将其复制到剪贴板，然后插入到 WordPress 后台的 LiveCanvas > 许可证页面中。

创建您的第一个 LC 页面

安装 LiveCanvas 插件后，让我们创建您的第一个 LiveCanvas 页面。

在顶部的 WordPress 管理栏中，点击 新建 > LiveCanvas 页面草稿。

系统会提示您为页面命名。

确认后，LiveCanvas 编辑器将在该新页面上启动。

LiveCanvas 会创建一个新的页面草稿，并设置一个自定义字段，以便系统知道您想在该特定页面上使用 LiveCanvas 编辑器。页面模板：

  • 默认模板

  • Blank NoFooter Page Template

  • Blank Page Template

  • Bootstrap Demo Template

  • Default Without Jumbotron

  • Empty Page Template

  • Page with Sidebar on the Left

  • Page with Sidebar on the Right

主要编辑器界面


这个黑色的工具条就是 LiveCanvas 的主要控制区了 。

左边是Universal Selection功能，一项选择工具。右侧的响应式预览功能挺实用的，你可以快速切换不同的设备尺寸（XS, SM, MD, LG, XL, XXL, RETINA13, 100%），看看你的页面在不同屏幕上的显示效果 。这个功能对于做响应式网站来说非常重要，能省不少来回调整的时间。

其余的功能比如还原，重做，直接编辑整个页面的 HTML 代码、Tree View层级管理。

选项菜单显示一些高级选项：

  • 编辑主 HTML：查看和编辑所有生成的代码。

  • 编辑全局 CSS：为网站添加您自己的可选 CSS。

  • 历史记录：查看和恢复过去的编辑步骤。

  • 以 HTML 格式下载：将您的页面内容导出为独立的 index.html 文件。

  • 重置页面：删除您的页面并从头开始。

  • 全屏模式

  • 现成页面库

  • 编辑设计系统

  • LiveCanvas 设置

  • 键盘快捷键和文档

属性面板

该面板允许您通过简单的小部件编辑所选元素的视觉属性，这些小部件与元素的 HTML 类或属性交互。

一个好处是通过此面板应用的属性仅使用原生 Bootstrap 类；这使您能够与元素交互而不会产生冗余代码。

让我们从上到下深入了解界面。


首先，该面板的颜色部分允许我们使用简单的调色板小部件分配文本和背景颜色。

该调色板直接从您自己的 Bootstrap CSS 中提取颜色值，帮助您实现一致的颜色选择，始终与您的项目“同步”。

如果您使用的是 picostrap 主题，这些颜色可以通过自定义器即时重新定义，因此即使在完成网站后，您也可以从一个点即时更改每种颜色。

点击所需颜色后，如果向下滚动到面板的“HTML 属性”部分，您将看到应用的类。

在这里，您还可以添加或删除类，或者为元素指定自定义 ID，或应用一些内联 CSS 以快速样式化。

回到面板顶部，在颜色（COLORS）部分之后，你会看到一些用于控制元素对齐（ALIGNMENT）、内边距（PADDING）和外边距（MARGIN）的工具。

这些工具只是应用相应的 Bootstrap 间距实用类，因此，在这种情况下，所有操作都是在没有任何额外 CSS 的情况下完成的。

稍微往下，我们有装饰（DECORATION）工具。

第一个“背景”（Background）允许我们添加你选择的背景图案或背景图片。

你甚至可以使用 UnSplash 作为来源，快速获取一些漂亮的免费图片。

背景图片是通过内联 CSS 应用的：

赋予背景后，如果你向下滚动到 HTML 属性区域，你会在内联样式文本框中看到代码。

回到装饰工具，在“背景”之后，我们有“形状分割器”工具。它可以为区块增添美感，实现一种不那么线性、更现代的布局。

这个功能实际上是通过直接在 HTML 代码中添加一些 SVG 形状分隔符来实现的，因此不会因为额外的资源请求而减慢您的页面速度。*

然后最后一个装饰工具是阴影。它使用标准的 Bootstrap 阴影类为元素添加外部阴影。它可以用来给盒子或其他元素添加一些小的装饰效果。

现在，在装饰工具之后，我们有动画部分。

让我们退一步。现在，虽然我们希望 LiveCanvas 提供高性能的网站，但这并不意味着它们看起来或感觉上必须单调乏味。

LiveCanvas 插件不会向您的网站添加任何 CSS 和 Javascript，但作为一个纯粹的自选功能，它会添加 AOS 库（滚动动画）。

您需要在 WordPress 后台的 LiveCanvas > 可选附加功能 > 添加动画 中启用 AOS。

在面板的此区域，您将能够应用和控制这些动画；这完全通过 HTML 属性完成——如果您查看父元素的 HTML 代码编辑器，将很容易发现（data-aos 属性）。

上下文菜单

在 LiveCanvas 编辑器中，当鼠标悬停在页面上时，会弹出一些上下文菜单，不同的颜色代表 Bootstrap 结构中的不同元素。

我们可以以 Section 的上下文菜单作为典型示例。

点击汉堡菜单，会显示许多有用的选项：

  • HTML 编辑器，用于查看和编辑负责该特定元素的代码——并且可以轻松聚焦于该特定代码块。

  • 编辑属性，显示一个面板，处理元素所应用的类，以易于使用的选择方式展示。

  • Al 助理

  • 替换区块，显示一个面板，可以用另一个现成的区块

  • 替换Section，将内容替换为节/网格

  • 保存到库，保存html到模板库

  • 复制、粘贴、复制副本和删除：你熟悉的常用编辑工具；复制和粘贴是一个非常有用的功能。在 Chrome 浏览器中，该功能将直接与系统剪贴板交互，因此你可以直接从其他网站和浏览器标签页复制和粘贴 HTML 代码。

  • 上移和下移：快速排列网页中的元素。

  • 添加元素在前，添加元素在后

一些简单的快捷方式可以更快速地触发最常用的选项，无需打开上下文编辑器：

Mouse-based shortcuts 基于鼠标的快捷方式

  • 双击上下文菜单主标签（例如“Section”）将打开相应的属性面板

  • 右键点击上下文菜单主标签（例如“Section”）将打开相应的代码编辑器

历史管理

在编辑页面时，你可能会犯某种错误，想要回到之前的某个时间点。

这就是历史面板派上用场的时候。只需进入“附加功能 > 历史”。

你会看到一个面板，列出当前会话中所有之前的编辑步骤，从第一个到当前步骤，并显示它们的时间。

点击步骤，你将立即恢复该步骤到编辑器中。

观看历史工具的演示

视频播放器

00:00

00:02

Blocks 目录

块面板显示了一个分类的 HTML 代码片段目录。

点击它们将用您选择的元素填充您的块。

与区块一样，您可以点击并自由尝试测试，看看它们如何组合在一起。

块以手风琴形式组织，包括：

Basic基本的：标题、示例段落、图片、图标、按钮或引用块
lmage and Text图像和文本
lcons and Text图标和文本
Cards卡片
Video / Media / Embed视频/媒体/嵌入：嵌入内容，基本上是 iframe，一键集成来自 YouTube、SoundCloud……或谷歌地图的素材。
Bootstrap 5 blocksBootstrap 5 个区块，包含模糊框、卡片、警告框、手风琴和轮播等项目。你可能需要调整它们的代码以满足你的需求。
WordPress IntegrationWordPress 集成，首先，有一个通用的短代码元素——这样你就可以将任何第三方 WordPress 插件集成到你的页面中。
WooCommerce IntegrationWooCommerce 集成
Your Custom Blocks您的自定义块

此外，LiveCanvas 具有一些强大且多功能的内置短代码：获取文章（get post）和获取分类（get categories）。它们拥有可视化界面，也可以通过 PHP 代码进行扩展。

最后，我们有一个自定义区块目录，所有自定义区块都会存储在这里。正如你所见，有一个链接可以带你进入区块存档部分，在那里你可以添加、存储和管理你的自定义 HTML 区块。可以想象，这对网页设计师来说非常有用。

插入区块后，可以通过点击每个区块来单独编辑其内容——从文本到图片、视频嵌入、图标、按钮——当然，根据不同的上下文会显示不同的面板。

添加 Sections

Using Readymade sections

使用现成的区块

我们为 LiveCanvas 增加了一系列实用的现成区块，帮助您快速启动项目。

点击添加新区块，屏幕右下角的大按钮。

如您所见，现成区块被组织在文件夹中，方便查阅和选择。

点击缩略图，您可以立即将它们插入所选的页面部分，并查看它们在页面中的适配效果。

所有这些现成的部分都是纯 HTML 代码，特别是使用 Bootstrap 类的干净、简约的 HTML5，旨在最大化速度性能。

您可以自由编辑它们，并根据需要进行调整。

视频播放器

00:00

00:03

Build your own custom sections via HTML coding

通过 HTML 编码构建您自己的自定义部分

在 LiveCanvas 中，您也可以从零开始构建自己的区块。

只需从区块的上下文菜单中打开 HTML 编辑器功能，自由编写您的杰作。

里面有一个强大的 HTML 编辑器，支持自动缩进、代码折叠和自动补全。

您可以使用该功能。

editable="inline"

和

editable="rich"

属性用于划定必须“保持”可编辑的区域。

Store and reuse 存储并重用

您还可以将自定义部分存储在本地库中，这样就可以构建自己的页面部分，在您的网站中重复使用和混合。

这是在 WordPress 后台通过进入 LiveCanvas > Sections 页面完成的。

视频播放器

00:00

00:04

Build your own section from scratch via the Grid builder

通过网格构建器从头开始构建您自己的区块

在填充新区块时，您可以使用网格构建器将水平空间划分为列，这些列会在屏幕宽度低于某个值时垂直堆叠。

让我们点击“添加新区块”，并在面板中选择网格构建器标签。

如您所见，有许多实用的现成网格，涵盖了典型需求，并且可以通过简单选项进行自定义。

通过“容器宽度”单选按钮，您可以决定网格是放置在标准容器内还是全宽容器内——符合 Bootstrap 的典型结构。

“添加章节标题行”复选框是一个方便的功能，它会在您选择的列方案之前添加一整行，包含一个漂亮的标题和一段文字，您可以轻松编辑。

列方案按钮是真正触发网格构建器的“开关”。

点击这些按钮后，您的区块将填充干净且非常简约的代码，实现所需的网格布局。

让我们来看一个例子：

<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="display-2 text-center mt-3 mb-0">Section Title</h2>
The subheading text goes here. Explain whats going on in here.</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="lc-block"></div>
<!-- /lc-block --></div>
<!-- /col -->
<div class="col-md-4">
<div class="lc-block"></div>
<!-- /lc-block --></div>
<!-- /col -->
<div class="col-md-4">
<div class="lc-block"></div>
<!-- /lc-block --></div>
<!-- /col --></div>
</div>

如您所见，网格构建器使用的是普通的 Bootstrap 类来定义容器、行和列。

在另一侧有一些带有.lc-block 类的空 div 元素。

在 LiveCanvas 中，lc-block 类用于划定我们希望单独编辑的 HTML “块”。

在编辑时，实际上这里的空 lc-block 元素表现得像按钮，点击后会打开一个包含现成块目录的面板，方便你填充该块本身。

LiveCanvas HTML 结构

LiveCanvas 构建了一个基于一些简单规则的 HTML 代码结构——它主要遵循 HTML 最佳实践和 Bootstrap 4 / 5，并有一些补充。

首先，网页有一个单一的 <main> 元素，所有页面内容（除页眉和页脚外）都位于其中。

下面是一般结构的示意：

页面头部 [由 WordPress 和主题控制]

<main> 内容 [由 LiveCanvas 控制]


页面页脚 [由 WordPress 和主题控制]

这个 <main> 内容的内部代码是你使用 LiveCanvas 界面编辑和构建的内容——并且可以通过右上角的“选项 > 编辑主 HTML”菜单元素直接编辑。

让我们深入了解<main>的架构是什么样的。一个<main>包含一个或多个<section>元素。

这里是一个典型结构的概述，自上而下

区块 - <section> 标签


容器（标准的 Bootstrap 容器）- <div class="container/container-fluid">


行（标准的 Bootstrap 行） - <div class="row">


列（标准的 Bootstrap 列） - <div class="col/col-xx-yy">


块（任何带有特殊 lc-block 类的 div） - <div class="lc-block">

以上所有元素在编辑界面中都会用边框高亮显示，并且拥有其上下文菜单，允许编辑它们的属性和内部 HTML 代码

Sections 区块

<section>
元素是 HTML 代码块——它们几乎可以包含任何内容——并且它们用于承载“边到边”的全宽内容。它们不能嵌套。
</section>

LiveCanvas 提供了一个预制（现成）区块的库——并且允许构建个性化的区块库。

Containers, Rows and Columns 容器、行和列

这些元素是 Bootstrap 网格的基础。

没有什么可补充的。

Blocks 块

块是带有 lc-block 类的<div>。例如：

<div class="lc-block" style="border:5px dotted red"> <h1 editable="inline">My Custom Section Title</h1> <h1 editable="inline">我的自定义章节标题</h1> </div>

块理想情况下是比章节更原子级别的 HTML 片段。

它们是构建的最小“砖块”。

LiveCanvas 提供了一个预制区块库，并且允许构建个性化的区块库。

请注意，如上面示例代码所示，可编辑的元素和区域可以在任何地方定义。

创建可编辑区域

Defining simple, plaintext regions 定义简单的纯文本区域

您可以通过向任何 HTML 标签添加 editable="inline"属性来限定仅允许包含纯文本的可编辑区域。

一些 HTML 示例

<h1 editable="inline">I am an editable heading</h1>
<p editable="inline">I am an editable paragraph</p>
<span editable="inline">I am an editable span element</span>

当 LiveCanvas 编辑器启动时，点击这些元素将使它们变为可编辑内容。

您将能够轻松地通过粘贴文本或书写来替换它们的内容。

在顶部栏，您会注意到有一个 B 和一个 I 图标，用于加粗或斜体您的选中内容。

请注意，这些区域内只允许使用<b和<i>标签：设计上，失去焦点时，所有其他标签都会被剥离。

Defining rich text regions 定义富文本区域

您可以通过在任何 HTML 标签中添加 editable="rich"属性来划定允许包含富文本的可编辑区域

HTML 示例代码：

<div editable="rich">
<h1>I am a rich-editable area</h1>
<p>I can contain more than one element</p>
</div>

当 LiveCanvas 编辑器启动时，点击这些元素将使它们变成 contenteditable 项目。

您将能够轻松地通过粘贴文本或直接输入来替换它们的内容。

在顶部栏，您会注意到一些工具，允许您为所选内容设置样式，使用

  • <ul> 和<ol>

  • Heading tags (H1- H6)
    标题标签（H1-H6）

  • Display classes (D1-D4) 显示类（D1-D4）

  • The usual suspects: Bold and Italic
    常见的样式：加粗和斜体

  • Blockquote, Code and KBD
    引用块、代码和键盘输入

  • Links 链接

它看起来是这样的：请注意，只有这些标签在这些区域内是合法的：设计上，失去焦点时，所有其他标签都会被剥离。

RFS：响应式字体大小调整

LiveCanvas 集成了 Bootstrap 5 的响应式排版功能 ，特别是利用了 RFS 技术，能让文字大小根据屏幕尺寸自动调整 。

RFS 代表响应式字体大小（Responsive Font Sizing） ，它是一个软件模块，能让文本大小根据视口大小流畅地缩放 ，同时保持一定的可读性范围 。

说白了，RFS 就是一个能让字体“活”起来的技术 。它不是简单地把字体放大或缩小，而是在不同屏幕尺寸之间平滑过渡 。更棒的是，你其实不用专门去了解 RFS 的工作原理 ，因为它在 Bootstrap 5 里是默认开启的 ，而且会自动作用于标题和一些大型文本 。这意味着，你用 LiveCanvas 搭网站，只要用到了标题或者 Bootstrap 的一些显示类 ，字体大小就会自动响应设备尺寸 。这感觉就像是 LiveCanvas 给你装了个“智能”字体助手 。

既然 RFS 能让标题大小自动调整 ，那是不是网站上的所有文字，比如正文段落 ，都能享受这个福利呢？

不是所有文字都默认应用了响应式字体大小 。默认情况下，RFS 会作用于所有标题 ，但段落元素默认是不开启的 。

我用 LiveCanvas 搭了个简单的测试页面 。一个 H2 标题 ，我在桌面端看，它是 48 像素 ，但在手机上就变成了 31 像素 ，确实自动变小了 。一个普通的引导段落 ，在桌面和手机上都是 20 像素 ，大小没变 。这说明 RFS 不是对所有文字都一视同仁 。它默认只对标题这种比较醒目的元素生效 。如果你想让段落文字也响应式缩放，可能需要一些额外的设置 。

LiveCanvas 集成的 Picostrap 主题提供了一些特殊的实用类 ，可以在 LiveCanvas 编辑器中手动控制响应式字体大小 ，通过添加 rfs-XX 这样的类来实现 。

CSS 编辑器

LiveCanvas 的理念是，您的 HTML 结合 Boostrap 的强大功能，应该足以完成一个完整的网站，

但您可能想添加一些额外的 CSS 代码来视觉上增强您的页面，调整某些内容，或添加您自定义的有用类。

这就是为什么 LiveCanvas 内置了一个工具，可以实时编辑您自己可选的 CSS 规则到网站中。

只需进入 Extras > 全局 CSS 编辑器。

一个强大的实时 CSS 编辑器将会出现。

这可以是一种简单且高效的方式来放置通用声明：您在这里添加的 CSS 将以内联方式在网站的每个 URL 中提供。

该功能使用的是与 WordPress 自定义器内置 CSS 编辑器相同的 WordPress API。

如果您关闭 LiveCanvas 插件，这段 CSS 代码仍将继续被提供。

在 LiveCanvas 页面或网站中添加 JS

我们将向您展示如何在 LiveCanvas 页面中实现并添加 JavaScript。

我们正在探讨如何在 LiveCanvas 的 HTML 编辑器中添加 JavaScript 代码。

我们将分享一些关于使用 async 和 onload 优化页面加载速度的技巧，以确保 JavaScript 运行时不会影响页面加载时间。

我可以在哪里添加我的 JS？

请记住，您可以在 LiveCanvas 内部插入 JavaScript，或者在 PicoStrap 主题中全局使用它（请参阅带有示例的 function.php 文件）。

Global JS 全局 JS

在 HTML 和 CSS 编辑器旁的 JS 面板，允许您插入全局 JavaScript。

在 HTML 代码编辑器中向特定页面添加 JS

让我们专注于这个具体的例子：在页面级别实现 JavaScript，确保它只在单个页面的上下文中运行。

解决渲染阻塞资源问题

Google 的 PageSpeed Insights 经常会标记渲染阻塞资源，这些资源是会延迟网页渲染的脚本和样式。为了解决这个问题，我们建议异步加载非关键的 JavaScript 和 CSS。
实现这一点的一个强大技术是使用 async 属性和 onload 事件来加载脚本。这些属性使脚本异步加载，并确保某些操作仅在脚本完全加载后执行，从而防止页面渲染被阻塞。

这里有一个说明该概念的通用示例：

<!-- Synchronous script loading that blocks page rendering -->
<script src="https://example.com/library.js"&gt;&lt;/script>
<script>
// Code that depends on the library
function init() {
// Initialization code
}
init();
</script>

After Optimization: 优化后：

<!-- Asynchronous script loading that does not block page rendering -->
<script async src="https://example.com/library.js" onload="initLibrary();"></script>
<script>
function initLibrary() {
// Code that depends on the library
function init() {
// Initialization code
}
init();
}
</script>