|
上一章我們的網(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ù)制粘貼代碼到新文件即可）： 2018-10-29 新增： 不清楚popper.js如何下載的戳這個鏈接： https:///[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"),
)
再確認(rèn)一下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
<!-- 載入靜態(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)簽中的屬性可以對內(nèi)容進行排印,、解釋說明等作用,。 <head></head>標(biāo)簽內(nèi)包含網(wǎng)頁的元數(shù)據(jù)，是不會在頁面內(nèi)顯示出來的,。<body></body>標(biāo)簽內(nèi)才是網(wǎng)頁會顯示的內(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中相對應(yīng)起來的,。 摘要中的{{ article.body|slice:'100' }}取出了文章的正文；其中的|slice:'100'是Django的過濾器語法,，表示取出正文的前100個字符,，避免摘要太長。
最后寫入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時，頂部的{% extends "base.html" %}告訴Django：“這個文件是繼承base.html的,，你去調(diào)用它吧,。” 于是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è),。**仔細(xì)檢查Django給出的錯誤提示，修復(fù)它,，你一定行,。 總結(jié)本章我們引入了前端框架Bootstrap 4，借助它重新組織了模板的結(jié)構(gòu),，編寫了一個漂亮的博客網(wǎng)站的首頁,。
|
