Django搭建我的博客：使用 Bootstrap 4 改寫模板文件

時間 2020-01-30

標籤 django 搭建我的博客使用 bootstrap 改寫模板文件欄目 Python 简体版

原文原文鏈接

上一章咱們的網站頁面實在太粗糙，你確定不會拿來作真正的博客首頁。所以這章咱們要藉助Bootstrap的力量，改寫一個大氣的博客。css

配置Bootstrap 4

Bootstrap是用於網站開發的開源前端框架（「前端」指的是展示給最終用戶的界面），它提供字體排印、窗體、按鈕、導航及其餘各類組件，旨在使動態網頁和Web應用的開發更加容易。html

Bootstrap有幾個版本都比較流行，咱們選擇最新版本的Bootstrap 4：下載地址，並解壓。前端

而後在項目根目錄下新建目錄static/bootsrap/，用於存放Bootstrap靜態文件。靜態文件一般指那些不會改變的文件。Bootstrap中的css、js文件，就是靜態文件。python

把剛纔解壓出來的css和js兩個文件夾複製進去。jquery

由於bootstrap.js依賴 jquery.js 和 popper.js 才能正常運行，所以這兩個文件咱們也須要一併下載保存。附上官網下載連接（進入下載頁面，複製粘貼代碼到新文件便可）：git

2018-10-29 新增：
不清楚popper.js如何下載的戳這個連接：程序員

https://unpkg.com/popper.js@1.14.4/dist/umd/popper.jsgithub

進去後頁面顯示很長一段代碼，把這段代碼所有拷貝；在項目中新建名叫popper.js的文件，把剛拷貝的代碼複製進去就能夠了。不少開源js文件都是經過這樣的方式下載。django

如今咱們的static/目錄結構像這樣：bootstrap

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真的是很是簡單易用的工具。

這裏會一次性寫大量代碼，不要着急慢慢看，理解了就很簡單了。

首先寫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語法中，全部的內容都被標籤包裹；標籤及標籤中的屬性能夠對內容進行排印、解釋說明等做用。
<head></head>標籤內包含網頁的元數據，是不會在頁面內顯示出來的。<body></body>標籤內纔是網頁會顯示的內容。
留意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 &copy; 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，藉助它從新組織了模板的結構，編寫了一個漂亮的博客網站的首頁。

下一章咱們將學習編寫文章詳情頁面。

有疑問請在杜賽的我的網站留言，我會盡快回復。
或Email私信我：dusaiphoto@foxmail.com
項目完整代碼：Django_blog_tutorial

轉載請告知做者並註明出處。

相關標籤/搜索

zzzmh我的博客

我的博客搭建及配置六

文件的讀寫