如何在Weebly页面和博客文章中添加侧边栏

无边栏网站是最新的设计趋势，通常在移动设备上运行良好。但是，侧边栏是桌面上网站布局的重要组成部分之一，具有将访问者转化为客户的巨大潜力。对于电子商务网站尤其如此，您可以轻松地在侧边栏上推广产品。 Weebly 不为博客提供侧边栏，但不为页面提供侧边栏。在本文中，我们将逐步介绍在 Weebly建站中为页面和博客文章添加站点范围侧边栏的过程。

Weebly 编辑器、主题和侧边栏

在我们继续之前，有必要了解以下内容：

对于标准页面，Weebly 站点编辑器会显示您的实时内容的预览。因此，您的侧边栏将与主要内容一起在编辑器中可见。这可能会导致编辑器出现空间紧缩的情况。但是，向页面添加侧边栏不会影响拖放体验。
您可以根据需要为各个页面添加全站通用侧边栏或自定义侧边栏。可以在页面侧边栏中添加任何 Weebly 元素。
Weebly 为博客文章提供了一个默认侧边栏，您可以根据需要启用或禁用它。但是，此侧边栏不会出现在您的页面上。

在 Weebly 页面中添加侧边栏

有两种方法可以将侧边栏添加到 Weebly 页面：

出现在所有页面上的全站侧边栏
不同页面的自定义侧边栏

让我们在以下部分中详细解释这两个选项。您可以查看具有 8 种不同类型侧边栏设置的实时 Weebly 站点。如果您喜欢这些布局，请免费下载完整的主题并导入您的网站以节省大量时间。

将站点范围的侧边栏添加到 Weebly 页面

该过程涉及创建一个页面布局广告，将 CSS 添加到您的主题中。如果您不熟悉，请查看我们关于如何在 Weebly 中编辑源代码的文章以了解基础知识。当您是 Weebly 网站编辑器时，转到“主题”部分并单击“编辑 HTML / CSS”按钮。您可以在屏幕的左下角找到此按钮。由于 Weebly 将这个按钮隐藏了一点，您可以按“Control 和 +”键来缩放显示以找到清晰显示的按钮。

这将带您进入 Weebly 代码编辑器，您将在其中看到不同的部分。您可以在“标题类型”部分下找到适用于您的主题的所有 HTML 页面模板。大多数 Weebly 主题提供三种标题类型：

header.html 顶部有标题图片
no-header.html 是无标题图片的模板
splash.html – 创建一个完整的页面模板（我们注意到一些主题没有这个模板）

我们需要的是创建一个重复的模板并在该模板中启用侧边栏代码。让我们在这里用 header.html 模板进行解释，如果您想将侧边栏添加到 no-header.html 模板，您可以按照相同的过程进行操作。单击 header.html 模板并从右窗格复制文件内的所有内容。现在，单击左侧边栏中“标题类型”标题旁边显示的“+”图标，然后选择“新标题类型”选项。

Weebly 将创建一个新模板并将其重命名为“sidebar.html”或您喜欢的任何名称。您可以看到新创建的模板中有默认的 HTML 代码和其他元素。

只需删除模板内的所有内容，然后从 header.html 模板中粘贴复制的内容。在代码中查找通常出现在 main-wrap div 部分中的 {content}，如下所示。

代码如下所示，可能会根据您使用的主题而变化。确保选择包含 {content} 标记的 div 部分。

<div class="main-wrap">
  {{#sections}}
       <div class="container">{content}</div>
  {{/sections}}
</div>

删除以上部分并在编辑器中将其替换为以下代码：

<div class="main-wrap">
 <div id="main-content" class="column">
  <div class="maincontent">{content global="false"}</div>
  <div class="sidebarcontent">{sidebarcontent:content}</div>
 </div>
</div>

它在代码编辑器中应该如下所示：

下一步是添加一些 CSS，为此转到“样式”部分下的“main.less”文件。复制下面的 CSS 代码并粘贴到您的“main.less”文件底部。您可以简单地粘贴在文件中任何现有代码下方的底部。

/* Sidebar Layout*/

.column {
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px;
    overflow: hidden;
    width: 100%;
}

.maincontent {
    width: 60%;
    float: left;
    margin: 15px 30px 20px 25px;
    padding: 15px 30px 0 25px;
    border-right: 1px rgba(96, 125, 139, 0.39) solid;
}

.sidebarcontent {
    width: 25%;
    float: left;
    margin: 30px 15px 20px 15px;
}

它在编辑器中如下所示：

您可以在代码部分下方看到实时预览，或单击预览按钮在新的弹出窗口中打开您的网站。如果一切正常，请单击代码编辑器右上角显示的“保存”按钮。如果这是您第一次编辑代码，Weebly 会提示您将更改保存为新主题。为您的主题提供名称并保存更改。请记住，您可以在编辑该站点时转到站点编辑器中的“主题”选项卡，为您帐户下的另一个站点选择此主题。

推荐：如何在Edge浏览器中朗读网页内容

向侧边栏添加元素

现在您已经创建了一个站点范围的侧边栏，是时候向您的侧边栏添加内容了。转到“页面”部分并创建一个新的“标准页面”。单击“标题类型”选项并选择您创建的“sidebar.html”页面布局。您将看到编辑器显示包含主要内容和侧边栏的两列。拖放内容和侧边栏区域中的元素以创建您的站点。

您可以将应用程序中的任何默认元素和自定义元素添加到侧边栏。侧边栏中添加的内容将出现在站点范围内，用于所有带有“sidebar.html”模板的页面。发布您的网站并查看漂亮的侧边栏。

注意您还可以更改站点上任何现有页面的标题类型，以向该页面添加侧边栏。当您选择“侧边栏”标题类型时，页面将自动显示侧边栏元素。这样，您只需更改标题类型即可在所有页面上统一显示侧边栏。

为不同页面创建自定义侧边栏

通常，侧边栏元素出现在站点范围内的所有页面上。但是，您也可以在不同的页面上显示不同的侧边栏。您只需在 sidebar.html 页面模板中添加的侧边栏模板标签中添加“global=”false 参数。下面是完整的代码，您可以创建一个名为 custom-sidebar.html 的附加模板。这样，您可以同时使用 sidebar.html 和 custom-sidebar.html 模板，并在创建页面时选择您需要的模板。

<div class="main-wrap">
 <div id="main-content" class="column">
  <div class="maincontent">{content global="false"}</div>
  <div class="sidebarcontent">{sidebarcontent:content global="false"}</div>
 </div>
</div>

每当您想创建带有自定义侧边栏的页面时，请选择自定义侧边栏标题类型。侧边栏部分将显示为空，您可以添加自定义元素。当您使用自定义侧边栏创建新页面时，您会再次发现侧边栏是空的，您可以在其中添加不同的元素。

Weebly 博客文章的侧边栏

让我们首先解释在 Weebly 博客文章上启用侧边栏。此侧边栏只会出现在您的博客页面和所有单独的帖子上。

登录到您的 Weebly 帐户并编辑您想要在博客文章/博客页面上添加侧边栏的站点。
转到“设置”，然后单击“博客”部分。
启用或禁用“博客侧边栏”选项。

请记住，您应该已经在您的网站上添加了一个博客页面，以便显示博客设置。否则，您将不会在设置下看到博客部分。详细了解如何创建免费的 Weebly 博客并自定义您的设置。

启用侧边栏后，从站点编辑器内的导航菜单中单击您的博客页面。或者，转到“页面”选项卡并选择您的博客页面。它将显示侧边栏，您可以在其中拖放博客元素和其他部分。 Weebly 提供了特殊的博客侧边栏元素，如作者、档案、类别、提要等，您可以在侧边栏中添加这些元素。

当您编辑或创建博客文章时，此侧边栏仍会出现。但是，您将无法添加元素，因为编辑器将冻结侧边栏，仅允许您在博客文章的内容区域中添加元素。

最后的话

新的设计趋势有助于使您的网站在所有设备上都具有吸引力。但是，诸如少边栏主题之类的东西并不适合所有网站。不幸的是，Weebly 强制所有用户使用无边栏主题，并且不为标准页面提供任何带有边栏选项的主题。如上所述，您可以创建一个新的页面模板并为页面使用站点范围的侧边栏或为不同的页面使用自定义侧边栏。或者，您也可以下载我们的免费 WebSense 主题，该主题带有 8 个侧边栏布局和 6 个整页布局。