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