摘要：本章集中介紹四個(gè)重要的小功能回到頂部浮動(dòng)按鈕矢量圖標(biāo)頁腳沉底和粘性側(cè)邊欄。因?yàn)槲覀兿朐谌径紦碛羞@個(gè)按鈕，所以將剛寫好的模塊引用到中在后面引入注意模塊用到了，因此要在后面引入。

本章集中介紹四個(gè)重要的小功能：回到頂部浮動(dòng)按鈕、矢量圖標(biāo)、頁腳沉底和粘性側(cè)邊欄。

這幾個(gè)功能與Django基本沒啥關(guān)系，更多的是前端知識(shí)，但是對(duì)博客網(wǎng)站都很重要，問的讀者也比較多，因此也集中講一下好了。

當(dāng)用戶拜讀完你的博文后，可能想回到文章開頭重新閱讀，或者審視其中的某些內(nèi)容。如果文章內(nèi)容較多，不?；瑒?dòng)滾輪回頁面頂部未免有點(diǎn)太讓人煩躁了。

一種解決辦法是增加一個(gè)回到頂部的浮動(dòng)按鈕。當(dāng)頁面向下滾動(dòng)到某個(gè)位置后，按鈕就呈現(xiàn)在頁面右下角；點(diǎn)擊按鈕，頁面就回到頂部。這個(gè)功能 Bootstrap 4 似乎沒有提供，但也不復(fù)雜，就自己用 JavaScript 和 CSS 寫吧。

在templates目錄新建back_to_top_func.html文件，寫入以下代碼：

templates/back_to_top_func.html

代碼分成html、javascript、css三部分。

HTML部分只有一行，用button標(biāo)簽表示了浮動(dòng)按鈕的容器。

JavaScript部分主要用到了Jquery的語法。頁面加載完成后開始監(jiān)聽兩個(gè)事件：

當(dāng)用戶點(diǎn)擊浮動(dòng)按鈕時(shí)，將頁面滾動(dòng)到頂部

當(dāng)頁面滾動(dòng)時(shí)，根據(jù)頁面距離頂部的距離，決定按鈕顯示或隱藏

CSS部分最長(zhǎng)但也很簡(jiǎn)單，主要定義了按鈕的位置、大小、圖案等樣式。讀者可以試著、改動(dòng)、刪除部分代碼，看看按鈕形態(tài)會(huì)怎樣變化。

核心代碼就寫好了。有點(diǎn)小瑕疵的是前面在footer.html中定義了class="fixed-bottom"，這個(gè)屬性的顯示層級(jí)很高，會(huì)將浮動(dòng)按鈕給覆蓋掉。因此刪除templates/footer.html中的fixed-bottom屬性：

templates/footer.html

...

z-index這個(gè)css樣式?jīng)Q定了頁面中容器的顯示順序，數(shù)值越大則顯示優(yōu)先級(jí)越高。
之所以fixed-bottom會(huì)覆蓋掉浮動(dòng)按鈕，就是因?yàn)樗鼘-index設(shè)置成了一個(gè)很大的數(shù)值。

因?yàn)槲覀兿朐谌径紦碛羞@個(gè)按鈕，所以將剛寫好的模塊引用到base.html中：

templates/base.html

...


    ...

    
    
    ...
    
    {% include "back_to_top_func.html" %}


...

注意模塊用到了Jquery，因此要在Jquery后面引入。

效果如下：

點(diǎn)擊按鈕后，頁面滾回到頂部。

與老版本不同，Bootstrap 4 中也沒有自帶圖標(biāo)。作為補(bǔ)償，官方也推薦了幾款強(qiáng)大且免費(fèi)的第三方矢量圖標(biāo)提供商。我比較喜歡的是Font Awesome，提供1500+免費(fèi)圖標(biāo)（以及5000+付費(fèi)圖標(biāo)），完全夠用了。各種你想得到想不到的圖標(biāo)都有：

用法也很簡(jiǎn)單，你甚至不用將其下載到本地（當(dāng)然想下載也可以）。根據(jù)官網(wǎng)的提示，直接在base.html中引入：

templates/base.html

...

...

然后在頁面中插入某個(gè)圖標(biāo)的標(biāo)簽就可以用了。

首先在官網(wǎng)圖標(biāo)庫搜索想要的圖標(biāo)，比如eye：

點(diǎn)擊圖標(biāo)進(jìn)去后就能看到它的標(biāo)簽名稱：

將此標(biāo)簽名稱復(fù)制到你的網(wǎng)頁中，圖標(biāo)就渲染出來了。

很神奇的是，矢量圖標(biāo)跟普通的字體是完全類似的，你可以通過CSS定義圖標(biāo)的顏色（color）、大?。?b>font-size）等樣式。

嘗試一下。將圖標(biāo)代碼添加到templates/article/list.html中的列表循環(huán)：

templates/article/list.html

...


    
    
        
        {{ article.total_views }}   
    
    
        
        
        {{ article.comments.count }}   
    
    
        
        {{ article.created|date:"Y-m-d" }}
    

...

看看效果：

好玩吧。讀者朋友慢慢挑選心儀的圖標(biāo)，到自己的博客中吧。

相比寫代碼來說，這是個(gè)相當(dāng)愉悅的過程。

剛才做浮動(dòng)按鈕時(shí)，取消了頁腳固定在底部的fixed-bottom。

按鈕倒是沒被遮蓋了，但又冒出來另一個(gè)煩人的問題，請(qǐng)看下圖：

當(dāng)頁面內(nèi)容較少時(shí)，頁腳下方居然空出來一大塊地方，太丑了。

《Sticky Footer, Five Ways》羅列了5種方法解決這個(gè)問題，有興趣的同學(xué)可深入了解。

需要修改base.html和footer.html兩個(gè)文件。先貼改動(dòng)代碼：

templates/base.html

...

    {% include "header.html" %}
    
    
    

        {% block content %}{% endblock content %}
        

    

    {% include "footer.html" %}

    ...
    
    
    
    

...

templates/footer.html

...

代碼通過CSS樣式控制頁面尺寸不小于屏幕的高度，以及頁腳的高度為60px。不太好理解的主要有兩個(gè)地方：

#push容器留出一段與頁腳等高的空隙，避免正文內(nèi)容與頁腳重疊。

#wrapper容器的底部有一個(gè)負(fù)邊距，作用是給頁腳容器讓出位置。這個(gè)負(fù)邊距你不設(shè)置也可以，無非就是底部多出高度為60px的空白罷了。

刷新頁面：

舒服了。

隨著項(xiàng)目逐漸增大，HTML、JavaScript、CSS交織在一起，也更加混亂。
雖然教程沒有把這三種類型的代碼分離開，但是你應(yīng)該考慮這樣做。

目前教程將文章目錄放置在文章的右側(cè)，這就是相當(dāng)于是個(gè)側(cè)邊欄。問題是當(dāng)用戶向下閱讀文章時(shí)，目錄卻不會(huì)固定在頁面中，而是幾下就翻得沒影了，影響體驗(yàn)。

粘性側(cè)邊欄就是來解決這個(gè)問題的。當(dāng)頁面向下滾動(dòng)時(shí)，粘性側(cè)邊欄會(huì)靈活的固定在屏幕中，保證用戶在任何位置都可以看到側(cè)邊欄中的內(nèi)容。

具體工作模式如下圖：

考慮到側(cè)邊欄有可能會(huì)很長(zhǎng)，因此設(shè)計(jì)出足夠“聰明”的粘性側(cè)邊欄也不那么容易。教程將用到Abouolia的粘性側(cè)邊欄插件，強(qiáng)大且小巧，讀者可以去官方示例感受一下。

將插件的GitHub庫下載到本地后，因?yàn)椴┛晚?xiàng)目已經(jīng)加載好了Jquery，所以只需要用到dist目錄下的jquery.sticky-sidebar.min.js這個(gè)文件就可以了。在項(xiàng)目的static目錄下新建目錄sticky_sidebar，將其粘貼進(jìn)去：

/static/sticky_sidebar/jquery.sticky-sidebar.min.js

因?yàn)橹恍枰?strong>文章詳情頁面用到，所以在詳情頁中引入模塊就夠用了：

templates/article/detail.html

...


    

        
目錄
        

        

            {{ toc|safe }}
        
    


...




...

{% block script %}




...
{% endblock script %}

按照插件的要求，側(cè)邊欄套上了兩層容器，第一層含有屬性id="sidebar" class="sidebar"，第二層含有屬性class="sidebar__inner"。然后設(shè)置樣式，引入靜態(tài)文件并調(diào)用插件，沒什么好說的，照做就可以了。與前面的章節(jié)相同，由于插件需求Jquery，一定要把 JavaScript 語句放到{% block script %}中，否則會(huì)報(bào)錯(cuò)哦。

插件還有其他可設(shè)置的規(guī)則，詳情見官方文檔

刷新頁面，不管你怎么滾動(dòng)頁面，目錄都顯示在屏幕中，并且隨著滾輪很自然的上下移動(dòng)了：

本章學(xué)習(xí)了回到頂部浮動(dòng)按鈕、矢量圖標(biāo)、頁腳沉底和粘性側(cè)邊欄四個(gè)功能。

就像前面說的，這幾個(gè)功能跟Django沒什么關(guān)系，但是既然要想做一個(gè)完整的博客網(wǎng)站，就不要抱有幻想。光靠那么一點(diǎn)點(diǎn)Django代碼是不可能的，什么知識(shí)你都得會(huì)一點(diǎn)才行。

讀者以后會(huì)遇到更加多樣的編程工具，一定不要被“Django程序員”這個(gè)頭銜所束縛，勇敢去學(xué)吧。誰讓你已經(jīng)上了賊船呢。

有疑問請(qǐng)?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。

或Email私信我：[email protected]

項(xiàng)目完整代碼：Django_blog_tutorial