資訊專欄INFORMATION COLUMN
上一章我們的網(wǎng)站頁面實在太粗糙，你肯定不會拿來做真正的博客首頁。因此這章我們要借助Bootstrap的力量，改寫一個大氣的博客。
配置Bootstrap 4Bootstrap是用于網(wǎng)站開發(fā)的開源前端框架（“前端”指的是展現(xiàn)給最終用戶的界面），它提供字體排印、窗體、按鈕、導(dǎo)航及其他各種組件，旨在使動態(tài)網(wǎng)頁和Web應(yīng)用的開發(fā)更加容易。
Bootstrap有幾個版本都比較流行，我們選擇最新版本的Bootstrap 4：下載地址，并解壓。
然后在項目根目錄下新建目錄static/bootsrap/，用于存放Bootstrap靜態(tài)文件。靜態(tài)文件通常指那些不會改變的文件。Bootstrap中的css、js文件，就是靜態(tài)文件。
把剛才解壓出來的css和js兩個文件夾復(fù)制進去。
因為bootstrap.js依賴 jquery.js 和 popper.js 才能正常運行，因此這兩個文件我們也需要一并下載保存。附上官網(wǎng)下載鏈接（進入下載頁面，復(fù)制粘貼代碼到新文件即可）：
jquery.js
popper.js
2018-10-29 新增：不清楚popper.js如何下載的戳這個鏈接：
https://unpkg.com/[email protected]/dist/umd/popper.js
進去后頁面顯示很長一段代碼，把這段代碼全部拷貝；在項目中新建名叫popper.js的文件，把剛拷貝的代碼復(fù)制進去就可以了。很多開源js文件都是通過這樣的方式下載。
現(xiàn)在我們的static/目錄結(jié)構(gòu)像這樣：
my_blog
│
├─article
└─my_blog
│ ...
└─static
└─bootstrap
│ ├─css # 文件夾
│ └─js # 文件夾
└─jquery
│ └─jquery-3.3.1.js # 文件
└─popper
└─popper-1.14.4.js # 文件
因為在Django中需要指定靜態(tài)文件的存放位置，才能夠在模板中正確引用它們。因此在settings.py的末尾加上：
my_blog/settings.py
...
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
再確認一下settings.py中有沒有STATIC_URL = "/static/"字段，如果沒有把它也加在后面。
編寫模板在根目錄下的templates/中，新建三個文件：
base.html是整個項目的模板基礎(chǔ)，所有的網(wǎng)頁都從它繼承；
header.html是網(wǎng)頁頂部的導(dǎo)航欄；
footer.html是網(wǎng)頁底部的注腳。
這三個文件在每個頁面中通常都是不變的，獨立出來可以避免重復(fù)寫同樣的代碼，提高維護性。
現(xiàn)在templates的結(jié)構(gòu)像下面這個樣子：
templates
│
├─base.html
├─header.html
├─footer.html
└─article
└─list.html # 上一章創(chuàng)建的
加上之前的list.html，接下來就要重新寫這4個文件了。
因為前端知識非常博大精深，并且也不是Django學(xué)習(xí)的重點，本教程不會展開篇幅去講。如果之前沒接觸過前端知識也沒關(guān)系，這里可以先復(fù)制粘貼，不影響后面Django的學(xué)習(xí)。
你可以試著改寫其中的某段代碼，看看會對頁面產(chǎn)生什么樣的影響；遇到不懂的就在Bootstrap官方文檔找答案。慢慢就會明白它的運行機制，畢竟Bootstrap真的是非常簡單易用的工具。
這里會一次性寫大量代碼，不要著急慢慢看，理解了就很簡單了。
首先寫base.html：
templates/base.html
{% load staticfiles %}
{% block title %}{% endblock %}
{% include "header.html" %}
{% block content %}{% endblock content %}
{% include "footer.html" %}
模板中要加上 {% load staticfiles %} 之后，才可使用 {% static "path" %} 引用靜態(tài)文件。
HTML語法中，所有的內(nèi)容都被標簽包裹；標簽及標簽中的屬性可以對內(nèi)容進行排印、解釋說明等作用。
標簽內(nèi)包含網(wǎng)頁的元數(shù)據(jù)，是不會在頁面內(nèi)顯示出來的。標簽內(nèi)才是網(wǎng)頁會顯示的內(nèi)容。
留意Bootstrap的css、js文件分別是如何引入的
jquery.js 和 popper.js 要在 bootstrap.js 前引入。**
然后是header.html：
templates/header.html
標簽內(nèi)的class屬性是Bootstrap樣式的定義方法。試著改寫或刪除其中一些內(nèi)容，觀察頁面的變化。
然后改寫之前的list.html：
templates/article/list.html
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
首頁
{% endblock title %}
{% block content %}
{% for article in articles %}
{{ article.title }}
{{ article.body|slice:"100" }}...
{% endfor %}
{% endblock content %}
留意{% block title %}和{% block content %}是如何與base.html中相對應(yīng)起來的。
摘要中的{{ article.body|slice:"100" }}取出了文章的正文；其中的|slice:"100"是Django的過濾器語法，表示取出正文的前100個字符，避免摘要太長。
最后寫入footer.html：
{% load staticfiles %}
呼，真是一大堆的東西啊。
讓我們來捋一捋發(fā)生了什么：
當我們通過url訪問list.html時，頂部的{% extends "base.html" %}告訴Django：“這個文件是繼承base.html的，你去調(diào)用它吧?！?/p>
于是Django就老老實實去渲染base.html文件：
其中的{% include "header.html" %}表明這里需要加入header.html的內(nèi)容
{% include "footer.html" %}加入footer.html的內(nèi)容
{% block content %}{% endblock content %}表明這里應(yīng)該加入list.html中的對應(yīng)塊的內(nèi)容
運行服務(wù)器老規(guī)矩，保存全部文件，進入虛擬環(huán)境，運行開發(fā)服務(wù)器，在瀏覽器中輸入http://127.0.0.1:8000/article/article-list/，看到如下頁面：
一個漂亮的博客界面就這樣出現(xiàn)在眼前，非常神奇。
如果報錯也不要著急，程序員就是不斷與bug斗爭的一個職業(yè)。仔細檢查Django給出的錯誤提示，修復(fù)它，你一定行。
總結(jié)本章我們引入了前端框架Bootstrap 4，借助它重新組織了模板的結(jié)構(gòu)，編寫了一個漂亮的博客網(wǎng)站的首頁。
下一章我們將學(xué)習(xí)編寫文章詳情頁面。
有疑問請在杜賽的個人網(wǎng)站留言，我會盡快回復(fù)。
或Email私信我：[email protected]
項目完整代碼：Django_blog_tutorial
轉(zhuǎn)載請告知作者并注明出處。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/42489.html
摘要：隨著時間的推移加上勤奮的寫作，你的博客文章一定會越來越多。如果不進行處理，可能同一個頁面會擠上成百上千的文章，不美觀不說，還降低了頁面的反應(yīng)速度。這個時候就需要對文章進行分頁的處理。有疑問請在杜賽的個人網(wǎng)站留言，我會盡快回復(fù)。 隨著時間的推移（加上勤奮的寫作?。?，你的博客文章一定會越來越多。如果不進行處理，可能同一個頁面會擠上成百上千的文章，不美觀不說，還降低了頁面的反應(yīng)速度。 這個時...
摘要：改寫視圖函數(shù)上一章我們感受了視圖的工作流程。循壞表示依次取出中的元素，命名為，并分別執(zhí)行接下來操作。即為語言，中間包裹了一個段落的文字。有疑問請在杜賽的個人網(wǎng)站留言，我會盡快回復(fù)。 改寫視圖函數(shù) 上一章我們感受了視圖的工作流程。 為了讓視圖真正發(fā)揮作用，改寫article/views.py中的article_list視圖函數(shù)： article/views.py from django...
摘要：有了瀏覽量之后，文章受歡迎的程度就有了評價標準。隨之而來的就有根據(jù)瀏覽量對文章進行排序的需求，即顯示最熱文章。它也是可以傳遞多個參數(shù)的，如，參數(shù)間用隔開視圖根據(jù)參數(shù)的值，判斷取出的文章如何排序方法指定對象如何進行排序。 有了瀏覽量之后，文章受歡迎的程度就有了評價標準。隨之而來的就有根據(jù)瀏覽量對文章進行排序的需求，即顯示最熱文章。 現(xiàn)在你已經(jīng)很熟悉MTV模式，不需要我啰嗦也能完成任務(wù)： ...
摘要：有了文章列表頁面后，當然還需要詳情頁面，方便用戶對某一篇感興趣的文章深入閱讀。編寫視圖函數(shù)打開，增加文章詳情頁面的視圖函數(shù)文章詳情取出相應(yīng)的文章需要傳遞給模板的對象載入模板，并返回對象函數(shù)中多了這個參數(shù)。 有了文章列表頁面后，當然還需要詳情頁面，方便用戶對某一篇感興趣的文章深入閱讀。 編寫視圖函數(shù) 打開article/views.py，增加文章詳情頁面的視圖函數(shù)article_deta...
摘要：語法支持再次打開文件，在文件的最后添加指明了使用語法標記，做了兩個拓展，其中表示支持語法高亮，包含的特性請參見相關(guān)文檔。語法高亮支持注意這一步必須在安裝完主題之后。 目前網(wǎng)上搭建個人博客的方案很多，雖然使用諸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齊全的高性能個人博客，但是本文將嘗試一種更為小眾化的方案 —— 一款基于 dj...
閱讀 1373·2021-11-11 16:54
閱讀 2402·2021-09-22 10:51
閱讀 2664·2019-08-30 15:44
閱讀 3216·2019-08-29 17:05
閱讀 1464·2019-08-29 17:01
閱讀 2921·2019-08-29 12:28
閱讀 2485·2019-08-26 13:50
閱讀 1739·2019-08-23 16:47
