上一章我們的網(wǎng)站頁面實(shí)在太粗糙，你肯定不會(huì)拿來做真正的博客首頁。因此這章我們要借助Bootstrap的力量，改寫一個(gè)大氣的博客。
Bootstrap是用于網(wǎng)站開發(fā)的開源前端框架（“前端”指的是展現(xiàn)給最終用戶的界面），它提供字體排印、窗體、按鈕、導(dǎo)航及其他各種組件，旨在使動(dòng)態(tài)網(wǎng)頁和Web應(yīng)用的開發(fā)更加容易。
Bootstrap有幾個(gè)版本都比較流行，我們選擇最新版本的Bootstrap 4：下載地址，并解壓。
然后在項(xiàng)目根目錄下新建目錄static/bootsrap/，用于存放Bootstrap靜態(tài)文件。靜態(tài)文件通常指那些不會(huì)改變的文件。Bootstrap中的css、js文件，就是靜態(tài)文件。
把剛才解壓出來的css和js兩個(gè)文件夾復(fù)制進(jìn)去。
**因?yàn)閎ootstrap.js依賴 jquery.js 和 popper.js 才能正常運(yùn)行，因此這兩個(gè)文件我們也需要一并下載保存。**附上官網(wǎng)下載鏈接（進(jìn)入下載頁面，復(fù)制粘貼代碼到新文件即可）：
2018-10-29 新增：
不清楚
popper.js如何下載的戳這個(gè)鏈接：
https://unpkg.com/popper.js@1.14.4/dist/umd/popper.js進(jìn)去后頁面顯示很長一段代碼，把這段代碼全部拷貝；在項(xiàng)目中新建名叫popper.js的文件，把剛拷貝的代碼復(fù)制進(jìn)去就可以了。很多開源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 # 文件因?yàn)樵贒jango中需要指定靜態(tài)文件的存放位置，才能夠在模板中正確引用它們。因此在settings.py的末尾加上：
my_blog/settings.py...STATICFILES_DIRS = ( os.path.join(BASE_DIR, "static"),)再確認(rèn)一下settings.py中有沒有STATIC_URL = '/static/'字段，如果沒有把它也加在后面。
在根目錄下的templates/中，新建三個(gè)文件：
base.html是整個(gè)項(xiàng)目的模板基礎(chǔ)，所有的網(wǎng)頁都從它繼承；
header.html是網(wǎng)頁頂部的導(dǎo)航欄；
footer.html是網(wǎng)頁底部的注腳。
這三個(gè)文件在每個(gè)頁面中通常都是不變的，獨(dú)立出來可以避免重復(fù)寫同樣的代碼，提高維護(hù)性。
現(xiàn)在templates\的結(jié)構(gòu)像下面這個(gè)樣子：
templates│├─base.html├─header.html├─footer.html└─article └─list.html # 上一章創(chuàng)建的加上之前的list.html，接下來就要重新寫這4個(gè)文件了。
因?yàn)榍岸酥R(shí)非常博大精深，并且也不是Django學(xué)習(xí)的重點(diǎn)，本教程不會(huì)展開篇幅去講。如果之前沒接觸過前端知識(shí)也沒關(guān)系，這里可以先復(fù)制粘貼，不影響后面Django的學(xué)習(xí)。
你可以試著改寫其中的某段代碼，看看會(huì)對(duì)頁面產(chǎn)生什么樣的影響；遇到不懂的就在Bootstrap官方文檔找答案。慢慢就會(huì)明白它的運(yùn)行機(jī)制，畢竟Bootstrap真的是非常簡單易用的工具。
這里會(huì)一次性寫大量代碼，不要著急慢慢看，理解了就很簡單了。
首先寫base.html：
templates/base.html<!-- 載入靜態(tài)文件 -->{% load staticfiles %}<!DOCTYPE html><!-- 網(wǎng)站主語言 --><html lang="zh-cn"><head> <!-- 網(wǎng)站采用的字符編碼 --> <meta charset="utf-8"> <!-- 預(yù)留網(wǎng)站標(biāo)題的位置 --> <title>{% block title %}{% endblock %}</title> <!-- 引入bootstrap的css文件 --> <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}"></head><body> <!-- 引入導(dǎo)航欄 --> {% include 'header.html' %} <!-- 預(yù)留具體頁面的位置 --> {% block content %}{% endblock content %} <!-- 引入注腳 --> {% include 'footer.html' %} <!-- bootstrap.js 依賴 jquery.js 和popper.js，因此在這里引入 --> <script src="{% static 'jquery/jquery-3.3.1.js' %}"></script> <script src="{% static 'popper/popper-1.14.4.js' %}"></script> <!-- 引入bootstrap的js文件 --> <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script></body></html>模板中要加上 {% load staticfiles %} 之后，才可使用 {% static 'path' %} 引用靜態(tài)文件。
HTML語法中，所有的內(nèi)容都被標(biāo)簽包裹；標(biāo)簽及標(biāo)簽中的屬性可以對(duì)內(nèi)容進(jìn)行排印、解釋說明等作用。
<head></head>標(biāo)簽內(nèi)包含網(wǎng)頁的元數(shù)據(jù)，是不會(huì)在頁面內(nèi)顯示出來的。<body></body>標(biāo)簽內(nèi)才是網(wǎng)頁會(huì)顯示的內(nèi)容。
留意Bootstrap的css、js文件分別是如何引入的
jquery.js 和 popper.js 要在 bootstrap.js 前引入。**
然后是header.html：
templates/header.html<!-- 定義導(dǎo)航欄 --><nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <!-- 導(dǎo)航欄商標(biāo) --> <a class="navbar-brand" href="#">我的博客</a> <!-- 導(dǎo)航入口 --> <div> <ul class="navbar-nav"> <!-- 條目 --> <li class="nav-item"> <a class="nav-link" href="#">文章</a> </li> </ul> </div> </div></nav>標(biāo)簽內(nèi)的class屬性是Bootstrap樣式的定義方法。試著改寫或刪除其中一些內(nèi)容，觀察頁面的變化。
然后改寫之前的list.html：
templates/article/list.html<!-- extends表明此頁面繼承自 base.html 文件 -->{% extends "base.html" %}{% load staticfiles %}<!-- 寫入 base.html 中定義的 title -->{% block title %} 首頁{% endblock title %}<!-- 寫入 base.html 中定義的 content -->{% block content %}<!-- 定義放置文章標(biāo)題的div容器 --><div class="container"> <div class="row mt-2"> {% for article in articles %} <!-- 文章內(nèi)容 --> <div class="col-4 mb-4"> <!-- 卡片容器 --> <div class="card h-100"> <!-- 標(biāo)題 --> <h4 class="card-header">{{ article.title }}</h4> <!-- 摘要 --> <div class="card-body"> <p class="card-text">{{ article.body|slice:'100' }}...</p> </div> <!-- 注腳 --> <div class="card-footer"> <a href="#" class="btn btn-primary">閱讀本文</a> </div> </div> </div> {% endfor %} </div></div>{% endblock content %}留意{% block title %}和{% block content %}是如何與base.html中相對(duì)應(yīng)起來的。
摘要中的{{ article.body|slice:'100' }}取出了文章的正文；其中的|slice:'100'是Django的過濾器語法，表示取出正文的前100個(gè)字符，避免摘要太長。
最后寫入footer.html：
{% load staticfiles %}<!-- Footer --><div> <br><br><br></div><footer class="py-3 bg-dark fixed-bottom"> <div class="container"> <p class="m-0 text-center text-white">Copyright © www.dusaiphoto.com 2018</p> </div></footer>呼，真是一大堆的東西啊。
讓我們來捋一捋發(fā)生了什么：
當(dāng)我們通過url訪問list.html時(shí)，頂部的{% extends "base.html" %}告訴Django：“這個(gè)文件是繼承base.html的，你去調(diào)用它吧?！?/p>
于是Django就老老實(shí)實(shí)去渲染base.html文件：
其中的{% include 'header.html' %}表明這里需要加入header.html的內(nèi)容
{% include 'footer.html' %}加入footer.html的內(nèi)容
{% block content %}{% endblock content %}表明這里應(yīng)該加入list.html中的對(duì)應(yīng)塊的內(nèi)容
老規(guī)矩，保存全部文件，進(jìn)入虛擬環(huán)境，運(yùn)行開發(fā)服務(wù)器，在瀏覽器中輸入http://127.0.0.1:8000/article/article-list/，看到如下頁面：
一個(gè)漂亮的博客界面就這樣出現(xiàn)在眼前，非常神奇。
**如果報(bào)錯(cuò)也不要著急，程序員就是不斷與bug斗爭的一個(gè)職業(yè)。**仔細(xì)檢查Django給出的錯(cuò)誤提示，修復(fù)它，你一定行。
本章我們引入了前端框架Bootstrap 4，借助它重新組織了模板的結(jié)構(gòu)，編寫了一個(gè)漂亮的博客網(wǎng)站的首頁。
聯(lián)系客服
