如何在Weebly博客中添加和自定义Read More

您 Weebly建站博客上的每篇文章也将出现在博客页面上。您可以在“设置 > 博客 > 每页帖子”。假设您在博客页面上显示了最后 10 篇文章，并且每篇文章都有超过 600 字的较长内容。在这种情况下，博客页面将显示最后 10 个帖子，每个帖子都占用很长的空间。这将导致糟糕的用户体验，用户几乎不可能查看旧帖子的内容。

推荐：如何修复Windows To Run This Application,You Must Install .NET Core错误

什么是阅读更多休息？

由于博客页面作为导航的一部分起着至关重要的作用，因此保持页面的吸引力和“阅读更多”元素有助于做到这一点。您可以使用“阅读更多” 元素，当您不想在博客页面上显示所有冗长的帖子内容时。这将限制内容并显示在您的博客页面上。用户可以点击阅读更多链接或按钮阅读完整的博客文章。这是保持博客页面整洁并轻轻地将用户推送到博客文章的巧妙方法。

如何在 Weebly 中添加 Read More？

Weebly 编辑器在侧边栏上显示拖放元素，您可以将其插入网站的任何位置。但是，当您在 Weebly 博客编辑器中编辑博客文章时，侧边栏元素会自动更改。您会发现只能在 Weebly 博客页面或帖子上使用的其他博客元素。你可以看到一个“阅读更多” 显示在 “基本的” 元素的类别。拖放元素后，将有占位符文本提及“此行下方的内容仅在单击“阅读更多”后显示”，如下图所示。

例如，添加“阅读更多” 在您所有博客文章的第一段之后。这有助于在博客页面上仅显示第一段帖子，并允许用户单击“阅读更多”链接或按钮以阅读每个帖子的更多内容。下面是阅读更多按钮在您的 Weebly 博客页面上的外观。

这使得博客页面在可滚动长度内更具吸引力，并且只显示每篇文章的介绍。单击阅读更多按钮或链接时，Weebly 将显示完整的博客文章，并在折线下方显示隐藏内容。

使用 Read More Break 时的注意事项

虽然在 Weebly 博客中阅读更多中断很容易使用，但请记住以下几点以避免混淆。

“阅读更多” 元素不会影响您发布的网站上单个博客文章的显示。
实际的阅读更多按钮或链接只会显示在编辑器和已发布网站的博客页面上。
添加多个“阅读更多” 元素不会产生任何影响，第一个元素将用于破坏博客页面上的内容。
Weebly 还允许您在博客侧边栏中添加阅读更多中断。但是，它不会对已发布的站点产生任何影响。
Weebly 没有在博客页面上显示阅读更多链接的标准方式。正如您在上面的屏幕截图中看到的那样，它显示为一个按钮，而在许多主题上它只是添加了一个“阅读更多” 博客文章之间的文本链接。一些 Weebly 主题显示“详细信息”和“立即阅读”链接，并忽略您在博客文章中插入的阅读更多中断。

在 Weebly 博客页面中自定义阅读更多链接

如果您的主题忽略了阅读更多中断元素，那么唯一的选择是更改显示按钮或文本链接的主题。对于文本和按钮链接，Weebly 不提供任何默认设置来自定义外观。这不如“阅读更多”链接在某些主题上无法正确显示，使用户认为帖子只有很小的内容。好的部分是您可以通过编辑 Weebly 主题文件来自定义元素的颜色和对齐方式。

首先，在新的浏览器窗口中打开您的博客页面。右键单击页面并选择“检查”选项以打开开发人员工具。检查源代码以找到用于“阅读更多”链接的 CSS 类的名称。

正如您在上面的屏幕中看到的，Weebly 使用以下代码来对齐右侧的阅读更多链接。在您的情况下，它可以在左侧使用“text-align:left;” 您需要修改此 CSS 类的样式以自定义 Weebly 博客页面上的阅读更多链接。

.blog-post .blog-read-more {
text-align: right;
}

在 Weebly 中添加自定义阅读更多 CSS

转到“主题”选项卡，然后单击“编辑 HTML / CSS”按钮以打开 Weebly 代码编辑器。

每个 Weebly 主题使用不同的源代码集，因此找到 .blog-阅读更多 CSS 类将是一项艰巨的任务。例如，一些主题使用 _blog.less 而其他几个主题使用 无博客 或部分。如果找到代码，很容易将左对齐或右对齐更改为居中并添加其他样式。但是，如果您找不到 CSS 类，请不要担心。很简单，去 main.less 在“样式”部分下的文件，并在编辑器末尾添加您的 CSS 代码。

您可以添加 CSS 样式来自定义“阅读更多”博客页面上的链接。下面是一个示例代码，用于在框中创建链接并对齐到中心。

.blog-post .blog-read-more {
text-align: center;
font-size: 26px;
box-shadow: 5px 5px 5px lightgrey;
border: 2px solid;
padding: 5px;
border-radius: 5px;
background: rgb(255 235 59);
}

保存在代码编辑器上所做的更改，如果这是您第一次编辑代码，Weebly 会要求您为您的主题提供一个名称。输入名称并单击“保存”按钮关闭代码编辑器。确保发布您的网站并在浏览器上查看博客页面。现在，阅读更多文本链接将如下所示：

您可以自定义 CSS 以更改背景颜色、链接颜色、悬停颜色、框宽、边距、填充等，以使按钮与您的博客布局对齐。另外，请记住上面的代码是将文本链接更改为按钮。如果您的博客页面已经显示了阅读更多按钮，则仅使用所需的样式，如背景、字体大小、对齐方式等，并使用 ！重要的 优先考虑您的 CSS 以覆盖默认样式。

如何在Weebly博客中添加和自定义Read More