在您的博客文章模板中添加阅读进度条(或滚动指示器)是展示用户对给定文章的阅读进度的明智方式。 这个想法是在帖子顶部显示一个固定的进度条,它与用户在帖子内容上的滚动位置直接相关。 当用户到达文章时,进度条开始填满。 当用户到达文章末尾时,进度条已 100% 满。
在本教程中,我们将向您展示如何为 Divi 博客帖子创建一个阅读进度条,该进度条足够智能,可以知道用户何时开始和完成(通过滚动)实际帖子内容,而不是整个页面。 这将更准确地指示阅读进度。
我们将向您展示如何将此阅读进度条添加到 Divi 的默认博客帖子模板或使用 Divi 主题生成器的自定义帖子模板。
让我们开始吧!
抢先看
下面是我们将在本教程中构建的设计的快速浏览。 请注意进度条是如何固定在帖子模板顶部的。 一旦用户到达实际的帖子/文章内容,进度条就会开始填满,并在用户完成帖子内容时结束。
免费下载布局
要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。
要将部分布局导入 Divi Theme Builder,请导航到 Divi Theme Builder。
单击可移植性图标。
在可移植性弹出窗口中,选择导入选项卡并从您的计算机中选择下载文件。
然后单击导入按钮。
完成后,部分模板将出现在 Divi Theme Builder 中。
让我们进入教程,好吗?
第 1 部分:导入预制模板
对于本教程,我们将使用来自第六个主题构建器包的几个预制模板。 我们将导入默认网站模板,该模板将为我们提供一个有效的全局标题,我们将在其中添加帖子信息栏。 我们将导入博客文章模板以在实时文章中测试我们的结果。
重要提示:最好在测试站点上导入这些模板,这样您就不会弄乱实时站点。
导入默认网站模板
首先,您需要下载 Divi 的第四个免费主题构建器包。 然后解压文件。
从 WordPress 仪表板,导航到 Divi > Theme Builder。 然后单击右上角的可移植性图标。 在可移植性弹出窗口中,选择导入选项卡。 然后从下载的文件夹中选择默认的网站模板 JSON 文件,然后单击导入按钮。 这将导入具有全局页眉和页脚的新默认网站模板。
导入帖子模板
重复此过程以从同一个下载文件夹中导入帖子模板。 打开可移植性弹出窗口,选择帖子模板 json 文件,然后单击导入按钮。 这将为您提供分配给整个站点的所有帖子的帖子模板,以及默认页眉页脚。
在帖子模板标题上禁用全局
我们将把动态帖子信息栏添加到帖子模板的标题中。 但是,因为我们只希望帖子模板上的帖子信息栏,我们需要在标题上禁用全局,以便我们的栏不会添加到站点范围内的所有标题中。 要在全局标题上禁用全局,请打开全局标题上的设置菜单,然后选择“禁用全局”。
现在标题应该是带有“自定义标题”标签的灰色。 准备就绪后,单击编辑图标以编辑标题布局模板。
设计阅读进度条
添加节和行
在标题布局编辑器中,在包含标题的当前部分下创建一个新的常规部分。
然后将一列添加到该部分。
部分设置
打开部分设置并更新以下内容:
- 内边距:0px 顶部,0px 底部
行设置
添加部分设置后,打开该行的设置并更新以下内容:
- 背景颜色:#2b2b2b
在设计选项卡下,更新以下内容:
- 天沟宽度:1
- 宽度:100%
- 最大宽度:100%
- 内边距:0px 顶部,0px 底部
使用分隔模块创建滚动条
进度条将逐渐变宽以占据空容器/行。 为了构建它,我们将使用具有自定义背景颜色的分隔模块。 一旦我们设计了我们希望进度条看起来的分隔线样式,我们将添加必要的代码以在向下滚动页面时使分隔线在正确的时间增加宽度。
添加分频器模块
在列内创建一个新的分隔模块。
然后禁用分隔线的可见性。 我们将添加背景颜色作为进度条颜色。 更新以下内容:
- 显示分隔线:否
- 背景渐变左颜色:#ff4349
- 背景渐变正确颜色:#fe7f47
- 渐变方向:90度
在设计选项卡下,更新进度条的高度:
在高级选项卡下,给分隔符一个自定义 CSS ID,如下所示:
稍后我们将需要它来定位滚动条以实现 jQuery 的功能。
添加进度条百分比计数器标签
要添加进度条百分比计数器标签,请在分隔符模块下方添加一个文本模块。
然后将以下 HTML 添加到正文内容中:
<p>Reading Progress: <span></span></p>
这 span
标签在这里很重要,因为我们将使用 jQuery 来填充 span
带有百分比计数器的标签。
在设计选项卡下,更新以下内容:
- 文字字体:Heebo
- 文字字体粗细:粗体
- 文字字体样式:TT
- 文字文字颜色:#ffffff
- 文字文字大小:13px
- 文字字母间距:3px
- 文本行高:1em
然后稍微更新一下左边的填充:
在高级选项卡下,给文本模块在列/行中心的绝对位置。 这将确保它不会占用文档中的任何实际空间并保持垂直居中在栏内。
- 职位:绝对
- 位置:左中
在离开文本模块之前,添加一个 CSS 类,以便我们可以使用 jQuery 代码来定位它。
- CSS 类:et-progress-label
添加 jQuery 代码
为了给进度条提供它需要的神奇功能,我们需要添加必要的 jQuery 代码。
为此,请在文本模块下添加一个新代码模块。
然后粘贴以下代码:
<script> (function($) { $(document).ready(function(){ var winHeight = $(window).height(); var $scrollBar = $('#scrollBar'); var $progressLabel = $('.et-progress-label p span'); var $postContent = $('.et-post-content'); $scrollBar.css('width', 0); $progressLabel.html('0%'); $(window).scroll(function(){ var postContentHeight = $postContent.height(); var postContentStartPosition = $postContent.offset().top; var winScrollTop = $(window).scrollTop(); var postScrollTop = postContentStartPosition - winScrollTop; var postScrollableArea = postContentHeight - winHeight; var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100); if (postScrollTop > 0) { $scrollBar.css('width', 0); $progressLabel.html('0%'); } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) { $scrollBar.css('width', (postScrollPercentage + '%')); $progressLabel.html( Math.round(postScrollPercentage) + '%'); } else if (postScrollTop < -postScrollableArea) { $scrollBar.css('width', '100' + '%'); $progressLabel.html('100%'); } }); }); })( jQuery ); </script>
最后一步,我们需要给我们的部分一个固定的位置。 我们最后保存了这个,因为这将隐藏包含标题内容的上述部分后面的部分。
打开包含进度条的部分的部分设置并更新以下内容:
- 位置:固定
- Z指数:998
然后打开包含标题内容的顶部部分的设置并更新 Z 索引,如下所示:
现在进度条最初将隐藏在标题的顶部后面。 然后当用户向下滚动帖子时,您会看到它固定在页面顶部。
不要忘记保存更改。
将选择器(CSS 类)添加到正文区域模板中的帖子内容模块。
现在,编写代码以识别具有“et-post-content”类的元素作为帖子的主要帖子内容。
由于我们为帖子的正文使用自定义模板,我们需要将该 CSS 类应用到模板的帖子内容模块,以便我们的代码可以在用户向下滚动帖子时充分计算阅读进度。
为此,请在主题构建器中打开帖子模板的正文区域模板。
打开 Post Content Module Settings 并添加以下 CSS 类:
- CSS 类:et-post-content
然后保存更改。
完成后,将更改保存到布局和主题构建器。
最后结果
要查看实际效果,请在您的网站上打开实时帖子。 确保帖子有足够的内容,以便有向下滚动页面的空间。
在 Divi 的默认帖子模板(不是自定义模板)上使用阅读进度条
如果您没有为帖子使用自定义正文模板,并且希望将阅读进度条添加到 Divi 中的默认博客帖子模板,您所要做的就是在代码中更新单个 CSS 类。
首先,确保帖子模板的自定义正文区域已被删除。
然后打开自定义页眉模板布局,通过替换这行代码更新代码模块……
var $postContent = $('.et-post-content');
有了这个…
var $postContent = $('.entry-content');
“entry-content”类将针对包含博客文章内容的默认文章模板中的 div(不包括标题、特色图片、上面的元数据和下面的评论,它们会扭曲文章的实际长度)。
结果
这是使用默认帖子模板的帖子的结果。
最后的想法
这个阅读进度条比显示整个页面/文档的滚动进度的典型滚动指示器要智能得多。 此栏仅针对用户将阅读的实际帖子内容,准确描述阅读进度。 这对于那些往往有长文案和评论的博客来说非常有用。 我也会为在线课程工作,为这些学生提供继续学习的额外动力!
我期待在评论中收到您的来信。
干杯!