如何為您的 Divi 博客文章構建閱讀進度條（無需插件）

將閱讀進度條（或滾動指示器）添加到您的博客文章模板是展示用戶對給定文章的閱讀進度的一種聰明方式。 這個想法是在帖子的頂部顯示一個固定的進度條，與用戶在帖子內容上的滾動位置直接相關。 當用戶到達文章時，進度條開始填滿。 當用戶到達文章末尾時，進度條已 100% 滿。

在本教程中，我們將向您展示如何為 Divi 博客文章創建一個閱讀進度條，該進度條足夠智能，可以知道用戶何時開始和完成（通過滾動）實際的文章內容，而不是整個頁面。 這將更準確地指示閱讀進度。

我們將向您展示如何使用 Divi Theme Builder 將此閱讀進度條添加到 Divi 的默認博客帖子模板或自定義帖子模板。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。 注意進度條是如何固定在帖子模板頂部的。 一旦用戶到達實際的帖子/文章內容，進度條就會開始填滿，並在用戶完成帖子內容時結束。

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將部分佈局導入 Divi Theme Builder，請導航到 Divi Theme Builder。

單擊便攜性圖標。

在可移植性彈出窗口中，選擇導入選項卡並從您的計算機中選擇下載文件。

然後點擊導入按鈕。

完成後，部分模板將出現在 Divi Theme Builder 中。

讓我們進入教程，好嗎？

第 1 部分：導入預製模板

在本教程中，我們將使用第六個主題構建器包中的幾個預製模板。 我們將導入默認網站模板，這將為我們提供一個有效的全局標題，我們將在其中添加帖子信息欄。 我們將導入博客帖子模板以在實時帖子上測試我們的結果。

重要提示：最好在測試站點上導入這些模板，以免弄亂實時站點。

導入默認網站模板

首先，您需要為 Divi 下載第四個免費主題生成器包。 然後解壓文件。

從 WordPress 儀表板，導航到 Divi > Theme Builder。 然後單擊右上角的便攜性圖標。 在可移植性彈出窗口中，選擇導入選項卡。 然後從下載的文件夾中選擇默認的網站模板 JSON 文件，然後單擊導入按鈕。 這將導入一個帶有全局頁眉和頁腳的新默認網站模板。

導入帖子模板

重複此過程以從同一下載文件夾導入帖子模板。 打開便攜彈窗，選擇post模板json文件，點擊導入按鈕。 這將為您提供一個分配給整個網站的所有帖子的帖子模板，以及默認的頁眉和頁腳。

在帖子模板標題上禁用全局

我們要將動態帖子信息欄添加到帖子模板的標題中。 但是，因為我們只希望帖子模板上的帖子信息欄，我們需要在標題上禁用全局，以便我們的欄不會添加到站點範圍內的所有標題。 要在全局標題上禁用全局，請打開全局標題上的設置菜單，然後選擇“禁用全局”。

現在標題應該是灰色的，帶有“自定義標題”標籤。 準備就緒後，單擊編輯圖標以編輯頁眉佈局模板。

設計閱讀進度條

添加節和行

在標題佈局編輯器中，在包含標題的當前部分下創建一個新的常規部分。

然後向該部分添加一列。

部分設置

打開部分設置並更新以下內容：

• 填充：0px 頂部，0px 底部

行設置

添加部分設置後，打開該行的設置並更新以下內容：

• 背景顏色：#2b2b2b

在設計選項卡下，更新以下內容：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%
• 填充：0px 頂部，0px 底部

使用分隔模塊創建滾動條

進度條將逐漸變寬以佔據空容器/行。 為了構建這個，我們將使用一個帶有自定義背景顏色的分隔線模塊。 一旦我們將分隔線設計為我們希望進度條的外觀樣式，我們將添加必要的代碼，以便在向下滾動頁面時使分隔線在正確的時間增加寬度。

添加分頻器模塊

在列內創建一個新的分隔模塊。

然後禁用分隔線的可見性。 我們將添加一個背景顏色作為進度條顏色。 更新以下內容：

• 顯示分隔線：否
• 背景漸變左顏色：#ff4349
• 背景漸變右顏色：#fe7f47
• 梯度方向：90度

在設計選項卡下，更新進度條的高度：

• 高度：20px

在高級選項卡下，為分隔符指定一個自定義 CSS ID，如下所示：

• CSS ID：滾動條

稍後我們將需要它來定位滾動條以實現 jQuery 的功能。

添加進度條百分比計數器標籤

要添加進度條百分比計數器標籤，請在分隔模塊下方添加一個文本模塊。

然後將以下 HTML 添加到正文內容中：

<p>Reading Progress: <span></span></p>

span標籤在這裡很重要，因為我們將使用 jQuery 用百分比計數器填充span標籤。

在設計選項卡下，更新以下內容：

• 文字字體：Heebo
• 文字字體粗細：粗體
• 文字字體樣式：TT
• 文字文字顏色：#ffffff
• 文字文字大小：13px
• 文字字母間距：3px
• 文本行高：1em

然後稍微更新左填充：

• 填充：左10px

在高級選項卡下，給文本模塊一個在列/行中心的絕對位置。 這將確保它不會佔用文檔中的任何實際空間，並在欄中保持垂直居中。

• 位置：絕對
• 位置：左中

在離開文本模塊之前，添加一個 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索引如下：

• Z指數：999

現在進度條最初將隱藏在標題的頂部後面。 然後當用戶向下滾動帖子時，您將看到它固定在頁面頂部。

不要忘記保存更改。

將選擇器（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（不包括標題、特色圖片、上面的元數據和下面的評論，這些評論會扭曲文章的實際長度）。

結果

這是使用默認帖子模板的帖子的結果。

最後的想法

這個閱讀進度條比典型的滾動指示器更智能，它顯示整個頁面/文檔的滾動進度。 此欄僅針對用戶將閱讀的實際帖子內容，準確描述閱讀進度。 這對於那些往往有很長的副本和評論的博客來說非常有用。 我也會為在線課程工作得很好，讓這些學生有額外的動力繼續前進！

我期待在評論中收到您的來信。

乾杯!