Bootstrap4、jquery.js、popper.js 下載下傳連結：
連結：https://pan.baidu.com/s/1HZ19327TDMtgkH5mXbRIcA
提取碼：nx9p
一、配置Bootstrap 4
Bootstrap
是用于網站開發的開源前端架構，下載下傳好
Bootstrap4
之後解壓。
然後在項目根目錄下建立目錄
static/bootstrap/
，用于存放Bootstrap靜态檔案。靜态檔案通常指那些不會改變的檔案。Bootstrap中的css、js檔案，就是靜态檔案。
把剛才解壓出來的
css
和
js
兩個檔案夾複制進去。
因為bootstrap.js依賴jquery.js和popper.js才能正常運作，是以這兩個檔案也需要下載下傳并儲存。
配置完之後的static目錄如下：
因為在Django中需要指定靜态檔案的存放位置，才能夠在模闆中正确引用它們，是以在
settings.py
的末尾加上：
二、編寫模闆
在根目錄下的
templates/
中，建立三個檔案：
-
base.html
-
header.html
-
footer.html
這三個檔案在每個頁面中通常是不變的，獨立出來可以避免重複寫相同的代碼，提高可維護性。
templates/
現在的目錄結構如下：
2.1、編寫base.html檔案
<!-- 載入靜态檔案 -->
{% load staticfiles %}
<!DOCTYPE html>
<!-- 網站主語言 -->
<html lang="zh-cn">
<head>
<!-- 網站采用的字元編碼 -->
<meta charset="utf-8">
<!-- 預留網站标題的位置 -->
<title>{% block title %}{% endblock %}</title>
<!-- 引入bootstrap的css檔案 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
<!-- 引入導航欄 -->
{% include 'header.html' %}
<!-- 預留具體頁面的位置 -->
{% block content %}{% endblock content %}
<!-- 引入注腳 -->
{% include 'footer.html' %}
<!-- bootstrap.js依賴 jquery.js 和 popper.js ，是以在這裡引入 -->
<script src="{% static 'jquery/jquery-3.3.1.js' %}"></script>
<!--
popper.js采用cdn遠端引入，意思是不需要把它下載下傳到本地。
在實際開發中推薦靜态檔案盡量都使用cdn的形式。
教程采用本地引入是為了讓讀者了解靜态檔案本地部署的流程
-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<!-- 引入bootstrap的js檔案 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html> - 模闆中要加上
{% load staticfiles %}
{% static 'path' %}
- 留意Bootstrap的css、js檔案分别是如何引入的；
-
jquery.js
popper.js
bootstrap.js
2.2、編寫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> 2.3、編寫list.html檔案
<!-- extends表明此頁面繼承自base.html檔案 -->
{% extends "base.html" %}
{% load staticfiles %}
<!-- 寫入 base.html 中定義的 title -->
{% block title %}
首頁
{% endblock title %}
<!-- 寫入 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-body">{{ article.title }}</h4>
<!-- 摘要 -->
<div class="card-body">
<p class="card-text">{{ article.body|slice:'100' }}</p>
</div>
<!-- 注腳 -->
<div class="card-footer">
<a class="btn btn-primary" href="#">閱讀文本</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div> - 留意
{% block title %}
{% block content %}
base.html
- 摘要中的
{{ article.body|slice:'100' }}
|slice:'100'
2.4、編寫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.wangjichuan.cn 2020</p>
</div>
</footer> 2.5、宏觀分析
當我們通過
url
(http://127.0.0.1:8000/article/article-list)通路
list.html
時，頂部的
{% extends "base.html" %}
告訴Django：“這個檔案是繼承
base.html
的，你去調用它吧。”
于是Django就老老實實去渲染
base.html
檔案：
- 其中的
{% include 'header.html' %}
header.html
-
{% include 'footer.html' %}
footer.html
-
{% block content %} {% endblock content %}
list.html
三、檢視效果
儲存全部檔案，進入虛拟環境，運作開發伺服器