前言
注意:學本章之前請檢查 Django 版本,確保安裝的是 Django 2 而不是 Django 3,否則後面所有的章節都會遇到 staticfiles 無法載入的錯誤。
在虛擬環境中輸入
pip list
即可查看。
配置Bootstrap 4
Bootstrap是用於網站開發的開源前端框架(“前端”指的是展現給最終用戶的界面),它提供字體排印、窗體、按鈕、導航及其他各種組件,旨在使動態網頁和Web應用的開發更加容易。
Bootstrap有幾個版本都比較流行,我們選擇最新版本的Bootstrap 4:下載地址,並解壓。
然後在項目根目錄下新建目錄static/bootstrap/
,用於存放Bootstrap
靜態文件。靜態文件通常指那些不會改變的文件。Bootstrap
中的css、js
文件,就是靜態文件。
把剛纔解壓出來的css和js兩個文件夾複製進去。
因爲bootstrap.js
依賴 jquery.js
和 popper.js
才能正常運行,因此這兩個文件我們也需要一併下載保存。附上官網下載鏈接(進入下載頁面,複製粘貼代碼到新文件即可):
不清楚
popper.js
如何下載的戳這個鏈接:https://unpkg.com/[email protected]/dist/umd/popper.js
進去後頁面顯示很長一段代碼,把這段代碼全部拷貝;在項目中新建名叫popper.js的文件,把剛拷貝的代碼複製進去就可以了。很多開源js文件都是通過這樣的方式下載。
現在我們的static/
目錄結構像這樣:
my_blog
│
├─article
└─my_blog
│ ...
└─static
└─bootstrap
│ ├─css # 文件夾
│ └─js # 文件夾
└─jquery
│ └─jquery-3.3.1.js # 文件
└─popper
└─popper-1.14.4.js # 文件
因爲在Django中需要指定靜態文件的存放位置,才能夠在模板中正確引用它們。因此在settings.py
的末尾加上:
my_blog/settings.py
...
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
再確認一下settings.py
中有沒有STATIC_URL = '/static/'
字段,如果沒有把它也加在後面。
編寫模板
在根目錄下的templates/
中,新建三個文件:
base.html
是整個項目的模板基礎,所有的網頁都從它繼承;header.html
是網頁頂部的導航欄;footer.html
是網頁底部的註腳。
這三個文件在每個頁面中通常都是不變的,獨立出來可以避免重複寫同樣的代碼,提高維護性。
現在templates\
的結構像下面這個樣子:
templates
│
├─base.html
├─header.html
├─footer.html
└─article
└─list.html # 上一章創建的
加上之前的list.html
,接下來就要重新寫這4個文件了。
因爲前端知識非常博大精深,並且也不是Django學習的重點,本教程不會展開篇幅去講。如果之前沒接觸過前端知識也沒關係,這裏可以先複製粘貼,不影響後面Django的學習。
你可以試着改寫其中的某段代碼,看看會對頁面產生什麼樣的影響;遇到不懂的就在Bootstrap
官方文檔找答案。慢慢就會明白它的運行機制,畢竟Bootstrap
真的是非常簡單易用的工具。
Bootstrap
是非常優秀的前端框架,上手簡單,所以很流行。官網是最權威的文檔。你可以在官方網站上進行系統的學習:https://getbootstrap.com/docs/4.1/getting-started/introduction/
通篇去看
Bootstrap
文檔會非常枯燥的,因此建議你可以像查字典一樣的,需要用哪個模塊,就到官網上找相關的代碼,修改一下拷貝到你的項目中就可以了。用多了自然會明白每個字段的作用。
這裏會一次性寫大量代碼,不要着急慢慢看,理解了就很簡單了。
首先寫base.html
:
templates/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>
<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' %}
引用靜態文件。 HTML
語法中,所有的內容都被標籤包裹;標籤及標籤中的屬性可以對內容進行排印、解釋說明等作用。- 標籤內包含網頁的元數據,是不會在頁面內顯示出來的。``標籤內纔是網頁會顯示的內容。
- 留意
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
樣式的定義方法。試着改寫或刪除其中一些內容,觀察頁面的變化。
然後改寫之前的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 %}
<!-- 定義放置文章標題的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
中相對應起來的。 - 摘要中的
{{ 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>
呼,真是一大堆的東西啊。
讓我們來捋一捋發生了什麼:
當我們通過url
訪問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
中的對應塊的內容
運行服務器
老規矩,保存全部文件,進入虛擬環境,運行開發服務器,在瀏覽器中輸入http://127.0.0.1:8000/article/article-list/
,看到如下頁面:
一個漂亮的博客界面就這樣出現在眼前,非常神奇。
**如果報錯也不要着急,程序員就是不斷與bug鬥爭的一個職業。**仔細檢查Django給出的錯誤提示,修復它,你一定行。
總結
本章我們引入了前端框架Bootstrap 4
,藉助它重新組織了模板的結構,編寫了一個漂亮的博客網站的首頁。
下一章我們將學習編寫文章詳情頁面。
創作不易,點個贊吧!!
版權聲明:如無特殊說明,文章均爲本站原創,轉載請註明出處
本文鏈接:https://blog.csdn.net/wsad861512140