Django Blog|07 引入Bootstrap前端框架，優(yōu)化頁面
大家好，我是老表，這個系列將會更新我編寫，項(xiàng)目的學(xué)習(xí)筆記，也是后面更新的一個重點(diǎn)，希望個人博客頁面可以早點(diǎn)和大家見面～歡迎大家點(diǎn)贊、留言支持。
Django Blog|01 創(chuàng)建環(huán)境和項(xiàng)目
Django Blog|02 創(chuàng)建admin賬戶&settings.py介紹
Django Blog|03 創(chuàng)建一個blog app和Article模型
Django Blog|04 創(chuàng)建blog視圖和完成MVT框架開發(fā)
Django Blog|06 添加博客詳情頁視圖，顯示博客詳情
在前面我們已經(jīng)完成了博客首頁和詳情頁面的簡單展示，這一節(jié)我們將引入前端框架 Bootstrap，幫我們美化前端顯示頁面，直接使用框架也能提升我們的開發(fā)效率，把更多時(shí)間花在業(yè)務(wù)邏輯上，而非前端樣式編寫上。
關(guān)于bootstrap的相關(guān)配置、入門介紹，在官網(wǎng)有很詳細(xì)的介紹，
官方網(wǎng)站：https://getbootstrap.com/ ?
國內(nèi)教程網(wǎng)站：https://www.bootcss.com/
英文不是很好的推薦先看國內(nèi)的教程網(wǎng)站，基本一模一樣，有點(diǎn)英文基礎(chǔ)的我都推薦看國外官網(wǎng)，不斷鍛煉自己英語閱讀能力，不會的還可以直接谷歌翻譯，也可以中英文教程對著看，總之在能提升英文閱讀能力的前提下怎么舒服怎么來。
進(jìn)入官網(wǎng)后，直接點(diǎn)擊Get started進(jìn)入教程，先不急將相關(guān)文件下載下來哈～
進(jìn)入入門教程后，我們可以簡單了解下，里面有說怎么引入css、js或者單個插件。
我們向下，可以找到Starter template入門模板，里面就已經(jīng)包含了前面說的css js加載和html基本框架了。
我們直接復(fù)制模板代碼，在templates中新建一個base.html文件，并將復(fù)制的bootstrap入門模板粘貼到文件內(nèi)，base.html將作為我們所有頁面的基礎(chǔ)頁面。
一般來說一個博客網(wǎng)站的頭部和底部是基本不變的，頭部一般是一個網(wǎng)站的導(dǎo)航欄，可以連接到網(wǎng)站的任意一個地方，而底部則往往是網(wǎng)站的聲明和一些說明信息、友情鏈接等，如下截圖所示：
所以我們對基礎(chǔ)模板也進(jìn)行簡單的調(diào)整，先簡單點(diǎn)，我們先將模板中的標(biāo)題和正文內(nèi)容設(shè)置的讓其他頁面可以自定義，很簡單，我們將需要自定義內(nèi)容的地方加上：
{%?block?block_name?%}
(這里我們也可以設(shè)置一些默認(rèn)值)
{%?endblock?%}
這樣我們在子模塊中就能直接使用{% eatends 'base.html' %}繼承base.html內(nèi)容了，base.html內(nèi)容如下
html>
<html?lang="en">
<head>
??
??<meta?charset="utf-8">
??<meta?name="viewport"?content="width=device-width,?initial-scale=1">
??
??<link?href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"?rel="stylesheet"
????integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"?crossorigin="anonymous">
??
??<title>
????{%?block?title?%}
????{%?endblock?%}
??title>
head>
<body>
??
??{%?block?content?%}
??{%?endblock?%}
??
??
??<script?src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
????integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
????crossorigin="anonymous">script>
??
??
body>
html>
避免大家出錯，這里我把其他兩個頁面內(nèi)容也發(fā)出來，首先是home.html：
{%?extends?'base.html'?%}
{%?block?title?%}
老表的博客
{%?endblock?%}
{%?block?content?%}
????
<h1>博客列表h1>
<ul>
{%?for?article?in?object_list?%}
????<li>
????????<a?href="{%?url?'detial'?article.pk?%}">{{article.title}}?-?{{article.author}}a>br>
????????{{article.summary}}
????li>
{%?endfor?%}
ul>
{%?endblock?%}
文章詳情頁面article_detail.html：
{%?extends?'base.html'?%}
{%?block?title?%}
????老表的博客-{{article.title}}
{%?endblock?%}
{%?block?content?%}
<h1>{{article.title}}h1>
<span>作者：{{article.author}}span>
<hr/>
<blockquote?style="margin:0?0?24px;background:#eef0f4;border-left:8px?solid?#dddfe4;">
????{{article.summary}}
blockquote>
<div>
????<p>{{article.content}}p>
div>
{%?endblock?%}
是不是很簡單，這樣我們就在我們的項(xiàng)目中引入了Bootstrap前端框架，這里需要注意的是，子模塊內(nèi){% extends 'base.html' %}必須在第一行，必須是子模塊中的第一個標(biāo)簽。
上面都修改好后，我們可以試運(yùn)行下項(xiàng)目，效果如下：
也許你會發(fā)現(xiàn)好像和之前沒什么變化，沒關(guān)系，通過文章詳情頁標(biāo)題的變化和項(xiàng)目沒有報(bào)錯，我們知道我們應(yīng)該是配置成功了。
接下來，我們就來應(yīng)用更多Bootstrap的模塊和插件、美化頁面。
首先我們添加個導(dǎo)航欄，我們在官網(wǎng)打開Components/Navbar，就可以看到關(guān)于導(dǎo)航欄相關(guān)介紹和案例了，在介紹開頭給了我們一個比較完整的導(dǎo)航欄示例代碼，我們直接復(fù)制，然后粘貼到base.html。
如果你不知道該粘貼到什么地方，沒關(guān)系，你可以隨便打開一個博客網(wǎng)站，然后按住f12，審查元素，看看它的導(dǎo)航欄在什么標(biāo)簽下，一般會在body標(biāo)簽下，所以我們也放在body下面。
保存代碼后，我們再刷新頁面，就會發(fā)現(xiàn)多了一個導(dǎo)航欄～
我們修改下導(dǎo)航欄樣式和內(nèi)容，最終效果如下：
是不是有一點(diǎn)酷了～只對導(dǎo)航欄部分進(jìn)行修改哈，下面只展示導(dǎo)航欄部分代碼：
??<nav?class="navbar?navbar-expand-lg?navbar-dark?bg-dark">
????<div?class="container-fluid">
??????<a?class="navbar-brand"?href="{%?url?'home'?%}">
????????<img?src="https://files.mdnice.com/user/16444/ed3007c0-ae8d-43a9-aa25-e17c81bdef87.jpeg"?alt=""?width="24"?height="24">
????????老表的博客
??????a>
??????<button?class="navbar-toggler"?type="button"?data-bs-toggle="collapse"?data-bs-target="#navbarSupportedContent"?aria-controls="navbarSupportedContent"?aria-expanded="false"?aria-label="Toggle?navigation">
????????<span?class="navbar-toggler-icon">span>
??????button>
??????<div?class="collapse?navbar-collapse"?id="navbarSupportedContent">
????????<ul?class="navbar-nav?me-auto?mb-2?mb-lg-0">
??????????<li?class="nav-item">
????????????<a?class="nav-link?active"?aria-current="page"?href="{%?url?'home'?%}">首頁a>
??????????li>
??????????<li?class="nav-item">
????????????<a?class="nav-link"?href="#">Pythona>
??????????li>
??????????<li?class="nav-item">
????????????<a?class="nav-link"?href="#">Goa>
??????????li>
??????????<li?class="nav-item">
????????????<a?class="nav-link"?href="#">程序人生a>
??????????li>
??????????
??????????<li?class="nav-item">
????????????<a?class="nav-link?disabled">開發(fā)inga>
??????????li>
????????ul>
????????<form?class="d-flex">
??????????<input?class="form-control?me-2"?type="search"?placeholder="Search"?aria-label="Search">
??????????<button?class="btn?btn-outline-success"?type="submit">Searchbutton>
????????form>
??????div>
????div>
??nav>
歡迎大家點(diǎn)贊、在看、轉(zhuǎn)發(fā)支持，點(diǎn)擊在看，下次可以第一時(shí)間收到公眾號推文～
本文為付費(fèi)專欄，每周更新1-2篇，利用Django帶大家一起實(shí)現(xiàn)個人博客，最后也會上線。
如果是對Django感興趣的初學(xué)者可以購買，如果你對Django已經(jīng)有所了解了，那我不建議你付費(fèi)，你可以選擇后面你感興趣的、更深層次的章節(jié)進(jìn)行付費(fèi)，如果需要的話。
閱讀到這里的都是真想學(xué)習(xí)Django的學(xué)習(xí)者，我為大家準(zhǔn)備了一個Django學(xué)習(xí)交流群（付費(fèi)，目前直接購買本系列任意一篇文章即可加入），加入方式如下：