資訊專欄INFORMATION COLUMN
摘要：本章集中介紹四個重要的小功能回到頂部浮動按鈕矢量圖標頁腳沉底和粘性側邊欄。因為我們想在全站都擁有這個按鈕，所以將剛寫好的模塊引用到中在后面引入注意模塊用到了，因此要在后面引入。
本章集中介紹四個重要的小功能：回到頂部浮動按鈕、矢量圖標、頁腳沉底和粘性側邊欄。
這幾個功能與Django基本沒啥關系，更多的是前端知識，但是對博客網站都很重要，問的讀者也比較多，因此也集中講一下好了。
回到頂部浮動按鈕當用戶拜讀完你的博文后，可能想回到文章開頭重新閱讀，或者審視其中的某些內容。如果文章內容較多，不?；瑒訚L輪回頁面頂部未免有點太讓人煩躁了。
一種解決辦法是增加一個回到頂部的浮動按鈕。當頁面向下滾動到某個位置后，按鈕就呈現在頁面右下角；點擊按鈕，頁面就回到頂部。這個功能 Bootstrap 4 似乎沒有提供，但也不復雜，就自己用 JavaScript 和 CSS 寫吧。
在templates目錄新建back_to_top_func.html文件，寫入以下代碼：
templates/back_to_top_func.html
代碼分成html、javascript、css三部分。
HTML部分只有一行，用button標簽表示了浮動按鈕的容器。
JavaScript部分主要用到了Jquery的語法。頁面加載完成后開始監聽兩個事件：
當用戶點擊浮動按鈕時，將頁面滾動到頂部
當頁面滾動時，根據頁面距離頂部的距離，決定按鈕顯示或隱藏
CSS部分最長但也很簡單，主要定義了按鈕的位置、大小、圖案等樣式。讀者可以試著、改動、刪除部分代碼，看看按鈕形態會怎樣變化。
核心代碼就寫好了。有點小瑕疵的是前面在footer.html中定義了class="fixed-bottom"，這個屬性的顯示層級很高，會將浮動按鈕給覆蓋掉。因此刪除templates/footer.html中的fixed-bottom屬性：
templates/footer.html ...
z-index這個css樣式決定了頁面中容器的顯示順序，數值越大則顯示優先級越高。之所以fixed-bottom會覆蓋掉浮動按鈕，就是因為它將z-index設置成了一個很大的數值。
因為我們想在全站都擁有這個按鈕，所以將剛寫好的模塊引用到base.html中：
templates/base.html
...
...
...
{% include "back_to_top_func.html" %}
...
注意模塊用到了Jquery，因此要在Jquery后面引入。
效果如下：
點擊按鈕后，頁面滾回到頂部。
矢量圖標與老版本不同，Bootstrap 4 中也沒有自帶圖標。作為補償，官方也推薦了幾款強大且免費的第三方矢量圖標提供商。我比較喜歡的是Font Awesome，提供1500+免費圖標（以及5000+付費圖標），完全夠用了。各種你想得到想不到的圖標都有：
用法也很簡單，你甚至不用將其下載到本地（當然想下載也可以）。根據官網的提示，直接在base.html中引入：
templates/base.html ... ...
然后在頁面中插入某個圖標的標簽就可以用了。
首先在官網圖標庫搜索想要的圖標，比如eye：
點擊圖標進去后就能看到它的標簽名稱：
將此標簽名稱復制到你的網頁中，圖標就渲染出來了。
很神奇的是，矢量圖標跟普通的字體是完全類似的，你可以通過CSS定義圖標的顏色（color）、大小（font-size）等樣式。
嘗試一下。將圖標代碼添加到templates/article/list.html中的列表循環：
templates/article/list.html ...{{ article.total_views }} {{ article.comments.count }} {{ article.created|date:"Y-m-d" }}
...
看看效果：
好玩吧。讀者朋友慢慢挑選心儀的圖標，到自己的博客中吧。
相比寫代碼來說，這是個相當愉悅的過程。
頁腳沉底剛才做浮動按鈕時，取消了頁腳固定在底部的fixed-bottom。
按鈕倒是沒被遮蓋了，但又冒出來另一個煩人的問題，請看下圖：
當頁面內容較少時，頁腳下方居然空出來一大塊地方，太丑了。
《Sticky Footer, Five Ways》羅列了5種方法解決這個問題，有興趣的同學可深入了解。
需要修改base.html和footer.html兩個文件。先貼改動代碼：
templates/base.html
...
{% include "header.html" %}
{% block content %}{% endblock content %}
{% include "footer.html" %}
...
...
templates/footer.html ...
代碼通過CSS樣式控制頁面尺寸不小于屏幕的高度，以及頁腳的高度為60px。不太好理解的主要有兩個地方：
#push容器留出一段與頁腳等高的空隙，避免正文內容與頁腳重疊。
#wrapper容器的底部有一個負邊距，作用是給頁腳容器讓出位置。這個負邊距你不設置也可以，無非就是底部多出高度為60px的空白罷了。
刷新頁面：
舒服了。
隨著項目逐漸增大，HTML、JavaScript、CSS交織在一起，也更加混亂。粘性側邊欄雖然教程沒有把這三種類型的代碼分離開，但是你應該考慮這樣做。
目前教程將文章目錄放置在文章的右側，這就是相當于是個側邊欄。問題是當用戶向下閱讀文章時，目錄卻不會固定在頁面中，而是幾下就翻得沒影了，影響體驗。
粘性側邊欄就是來解決這個問題的。當頁面向下滾動時，粘性側邊欄會靈活的固定在屏幕中，保證用戶在任何位置都可以看到側邊欄中的內容。
具體工作模式如下圖：
考慮到側邊欄有可能會很長，因此設計出足夠“聰明”的粘性側邊欄也不那么容易。教程將用到Abouolia的粘性側邊欄插件，強大且小巧，讀者可以去官方示例感受一下。
將插件的GitHub庫下載到本地后，因為博客項目已經加載好了Jquery，所以只需要用到dist目錄下的jquery.sticky-sidebar.min.js這個文件就可以了。在項目的static目錄下新建目錄sticky_sidebar，將其粘貼進去：
/static/sticky_sidebar/jquery.sticky-sidebar.min.js
因為只需要在文章詳情頁面用到，所以在詳情頁中引入模塊就夠用了：
templates/article/detail.html ... ... ... {% block script %} ... {% endblock script %}
按照插件的要求，側邊欄套上了兩層容器，第一層含有屬性id="sidebar" class="sidebar"，第二層含有屬性class="sidebar__inner"。然后設置樣式，引入靜態文件并調用插件，沒什么好說的，照做就可以了。與前面的章節相同，由于插件需求Jquery，一定要把 JavaScript 語句放到{% block script %}中，否則會報錯哦。
插件還有其他可設置的規則，詳情見官方文檔
刷新頁面，不管你怎么滾動頁面，目錄都顯示在屏幕中，并且隨著滾輪很自然的上下移動了：
總結本章學習了回到頂部浮動按鈕、矢量圖標、頁腳沉底和粘性側邊欄四個功能。
就像前面說的，這幾個功能跟Django沒什么關系，但是既然要想做一個完整的博客網站，就不要抱有幻想。光靠那么一點點Django代碼是不可能的，什么知識你都得會一點才行。
讀者以后會遇到更加多樣的編程工具，一定不要被“Django程序員”這個頭銜所束縛，勇敢去學吧。誰讓你已經上了賊船呢。
有疑問請在杜賽的個人網站留言，我會盡快回復。
或Email私信我：dusaiphoto@foxmail.com
項目完整代碼：Django_blog_tutorial
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/43569.html
摘要：前端小白也能快速學會的博客園博客美化全攻略呦，博客園的自我修養是什么第一條，別只顧收藏和偷師呀，記得點推薦或關注本人喔美化方法論簡介一般而言，需要選一個默認的，然后在該基礎上調整?；蛘咭部蛇M博客園園子頁面，發狀態博客園團隊，申請開通權限。 前端小白也能快速學會的博客園博客美化全攻略 A呦V，博客園er的自我修養是什么？第一條，別只顧收藏和偷師呀，記得點推薦或關注本人喔~ 美化方法論簡...
摘要：自定義簡單的如果你想自定義啟動界面或頂部導航欄的，你需要在主題的根目錄下創建一個文件夾，將自定義的和圖片放在里面。你可以通過變量來定制頂部導航欄的高度。如果圖片的高度比頂部導航欄的高度小，那么會垂直居中顯示。 本文譯自 openstack-horizon 官方文檔 主題 從 Kilo 版本開始，Horizon 支持通過主題來定制樣式。主題內包含一個 _variables.scss 文件...
摘要：踩坑注意導入后要勾選禁用默認否則會造成各種顯示問題我的文件可以右鍵查看網頁源代碼獲取，使用時基于主題，懶得折騰的可以直接下載。主頁美化： 主要參考嘻哈燒餅的美化，在TA的基礎上增加了對主頁背景、色調以及側邊欄的調整 原帖地址：https://www.cnblogs.com/seanshao/p/5716543.html 修改博客園背景的代碼如下（在原帖使用的css文件中修改）： body ...
摘要：一些表單界面元素文本框或復選框非常簡單并內置在中，而其他會復雜些像彈出日期選擇等操作控件。和標簽中的屬性指定了當前文本框提交的數據的名稱，它必須與表單類中的字段名稱對應，否則服務器無法將字段和數據正確的對應起來。 前面我們已經學會如何用Markdown語法書寫文章了。 但是還有問題呀。之前寫文章都是在后臺中進行的，萬一有別的普通用戶也要發表文章怎么辦？萬一我想拓展些后臺中沒有的提交驗證...
上一章我們的網站頁面實在太粗糙，你肯定不會拿來做真正的博客首頁。因此這章我們要借助Bootstrap的力量，改寫一個大氣的博客。 配置Bootstrap 4 Bootstrap是用于網站開發的開源前端框架（前端指的是展現給最終用戶的界面），它提供字體排印、窗體、按鈕、導航及其他各種組件，旨在使動態網頁和Web應用的開發更加容易。 Bootstrap有幾個版本都比較流行，我們選擇最新版本的Boots...
閱讀 1595·2021-11-16 11:44
閱讀 7483·2021-09-22 15:00
閱讀 4507·2021-09-02 10:20
閱讀 1952·2021-08-27 16:20
閱讀 2397·2019-08-26 14:00
閱讀 2912·2019-08-26 11:44
閱讀 1645·2019-08-23 18:33
閱讀 1865·2019-08-22 17:28
